Jekyll 围栏代码块 kramdown 问题答案

【问题标题】：Jekyll fenced code block kramdown issueJekyll 围栏代码块 kramdown 问题
【发布时间】：2017-11-25 09:29:26
【问题描述】：

我正在努力使用围栏代码块突出显示。你能帮我弄清楚我做错了什么吗？

当我使用液体标签时，代码突出显示效果很好：{% highlight lang %}{% endhighlight %}，但这种方法会破坏列表（这是一个已知问题）。最困扰我的是，当我使用 kramdown+rouge 语法时，它根本不会突出显示代码。

以下是 jekyll 的双向解析方式：

Kramdown+rouge 语法

```xml
<intent-filter>
    <action android:name="some.event" />

    <category android:name="some.event" />
</intent-filter>
```

流式语法

{% highlight xml %}
<intent-filter>
    <action android:name="some.event" />

    <category android:name="some.event" />
</intent-filter>
{% endhighlight %}

我在代码块前后尝试了空行和空格的任意组合，但似乎没有任何效果。

【问题讨论】：

而不是```试试~~~。

标签： jekyll codeblocks kramdown

【解决方案1】：

您为 kramdown+rouge 结果链接的图像仅部分显示 kramdown 输出（即仅<div ...>...</div>）。但是，我猜结果是这样的：

<div class="language-xml highlighter-rouge"><span class="nt">&lt;intent-filter&gt;</span>
<span class="nt">&lt;action</span> <span class="na">android:name=</span><span class="s">"some.event"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;category</span> <span class="na">android:name=
</span><span class="s">"some.event"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/intent-filter&gt;</span>
</div>

如果是这样，结果是 rouge 通过 kramdown 的语法荧光笔。您可能只需要包含正确的 CSS 样式。为此，this blog post 可能会有所帮助。

【讨论】：