计算机源代码的样式

在网上发布代码？这里有如何让它看起来很棒。

格式化你的代码

无论你的代码风格有多好，如果代码看起来很草率，那也没有用。确保它使用一致的缩进风格，并且是齐头并进的。

确保你的 "智能标点符号 "是智能的

许多博客引擎重写内容以改善排版：智能引号，将破折号改为Unicode减号，等等。这在正常的散文中看起来很好，但要确保它不会对代码块做这种处理。如果有人剪切和粘贴你的代码，它将无法工作。历史上，一些流行的平台都会破坏代码块。

使用现代单空格系统字体

在大多数浏览器上，默认的单色字体是一些可怕的字体，如Courier，或者更糟糕的Courier New。这些字体真的不适合用于计算机代码。为了解决这个问题，你不需要使用网络字体，因为它有固有的复杂性和性能成本。你的电脑和你的访问者的电脑已经有了许多优秀的单色字体，可以在CSS中使用。我已经写过几次关于这些本地字体堆栈的文章，但总的来说，这就是Bootstrap所使用的：

code, kbd, var {
  font-family:
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
}

这将使你的代码看起来很棒，无论你的访问者使用的是什么平台。

注意换行问题

默认情况下，HTML会将空白处和普通破折号视为插入换行的好地方。这可能会造成混乱，比如说：

to prevent writes use the flag <code>--dry-run</code>

可以呈现为以下任何一种情况：

to prevent writes use the flag --
dry-run
to prevent writes use the flag --dry
-run

通过将留白的CSS属性设置为nowrap 来防止这种情况：

/* for inline code */
code, kbd, var {
  white-space: nowrap;
}
/* for large code blocks */
pre>code {
  white-space: pre;
}

处理嵌入式标签

如果你确实使用了标签，或者它们意外地溜进来，你可以用这个古老的CSS属性tab-size来控制它们所代表的空间：

/* set tabs to 2 spaces */
tab-size: 2

如果你从不使用标签，那么可以考虑将其设置为大数字，故意扰乱设计，这样你就可以找到并删除隐藏的标签。

调低语法颜色

在编辑时，有很多理由对源代码进行着色。在摘录10或20行以供阅读时，这样做的理由要少得多。颜色的一个很好的用途是用于键盘会话记录，在那里你要区分请求和响应。另一个好用途是区分代码和代码注释。除此之外，对计算机代码来说，语法着色是个垃圾。

如果你必须这样做，请使用服务器端渲染而不是客户端。加载另一个JavaScript库并让风格闪现出来的代价是不值得的。让你的网站快速加载和执行比给关键词着色更重要。

清理GitHub gists

对于较长的代码样本，使用GitHub的gist服务会有很大的意义。一个小的脚本标签就可以把你的源代码嵌入到HTML中，许多博客模板引擎也支持gist的快捷方式来做这个。

然而，默认的渲染有很多图表垃圾--行数、过多的颜色，还有那个奇怪的GitHub页脚是怎么回事？幸运的是，清理这些并不是一个科学项目。威尔-博伊德（Will Boyd）已经写下了你想知道的关于定制GitHub清单的一切，以及一些样本主题。