这是个好问题。这是我的两分钱。
这里,我以你的_posts/2012-11-16-idisposable.html帖子为例。
存储代码sn-ps
由于代码是帖子内容的一部分,我在逻辑上将其移至_posts 文件夹。将其存储在_includes 文件夹中不如这是一个模板文件夹。
让我们将idisposable/TryFinallyDispose.cs.html 从_includes/code-snippets 复制到_posts/_code 或任何你想要的。
由于代码存储在带下划线的文件夹 (_code) 中,Jekyll 不会按原样处理它。我们只会将其“包含”在我们的帖子中。
注意:代码sn-p可以保存为code.cs
由于我们将使用 Jekyll 依赖项中的 highligting(见下文),我们只需修改代码 sn-p,删除 <pre> 和 <code>。
变成了:
var x = new X(); // X is a class that implements IDisposable
try
{
// do something with x
}
finally
{
x.Dispose();
}
显示代码
Jekyll 提供了多种高亮代码的方法(markdown、pygments、rouge、..)。这里我演示了pygments的方式,但你可以探索其他解决方案。
基本模板将是 (_includes/code-snippet-csharp.html):
{% capture filePath %}_code/{{include.file}}{% endcapture %}
{% highlight csharp %}
{% include_relative {{filePath}} %}
{% endhighlight %}
注意:这里有一个缺点,在 {% highlight csharp %} 中,代号是硬编码的。我发现无法将language 作为变量传递给highlight 标记。如果要使用多种语言,则需要将包含模板复制为 code-snippet-csharp.html、code-snippet-js.html、...
样式代码
为了美化我们的代码,我们需要一个额外的css文件。 The basic one is here,但是有many more。
样式保存为assets/syntax.css并包含在_layouts/default.hmtl中:
<link rel="stylesheet" href="{{site.baseUrl}}assets/syntax.css">
它也可以包含在你的 sass 进程中。
在帖子中包含代码
我们现在只需在_posts/2012-11-16-idisposable.html 中调用我们的代码。
{% include code-snippets/idisposable/TryFinallyDispose.cs.html %}
替换为:
{% include code-snippet-csharp.html file="idisposable/TryFinallyDispose.cs.html" %}
结果
更好的内容结构和突出显示的代码!