在 Jekyll 中突出显示 Pygments 语法，无需启动 <div>

Posted 2023-03-30

【中文标题】在 Jekyll 中突出显示 Pygments 语法，无需启动 <div>

【英文标题】：Pygments syntax highlighting in Jekyll without starting a <div>

【发布时间】：2012-09-15 20:47:00

【问题描述】：

如果你将 Jekyll 与 Pygments 语法高亮包一起使用，则可以编写

% highlight clojure %
(def something :foobar)
% endhighlight %

它产生一个包含该行的<div>，根据 Clojure 语法高亮显示。但是有没有办法在段落中间突出显示语法？我希望能够写作

In Clojure, keywords like % highlight clojure %:foobar% endhighlight %
are prepended by colons.

此处所需的行为是 Clojure 关键字将使用与第一个示例中的关键字相同的样式突出显示。但是，当我尝试这样做时，它只会像以前一样产生<div>。 （也许这是我使用的 Kramdown 降价引擎特有的，但 div 标签本身是 html 转义的，因此您可以在生成的文本中看到“

”。）

有没有办法让 Jekyll/Pygments 像这样进行“内联”语法高亮显示？

【参考方案1】：

两年后，我继续创建自己的 Jekyll 插件来提供内联语法高亮。它被称为inline_highlight，可以这样使用：

In Clojure, keywords like % ihighlight clojure %:foobar% endihighlight %
are prepended by colons.

【参考方案2】：

您可以将 CSS 类添加到您在帖子中放置的任何对象。

如果你像这样定义一个 CSS 条目：

.inlined  display:inline; 

然后您可以将此类添加到生成的<div> 中：

In Clojure, keywords like 
% highlight clojure %:foobar% endhighlight %: .inlined  
are prepended by colons.

这适用于所有类型的对象（表格、图像等）。我现在无法测试它，但我认为这会解决问题。

当你测试它时，看看输出的 HTML。然后您会发现您的<div> 现在具有class=inlined 属性集。

【参考方案3】：

我认为您可以使用nowrap 选项来防止Pygments 将代码包装在div 标记中。所以你的例子会变成：

In Clojure, keywords like 
<span class='highlight'><code class='closure'>
% highlight clojure nowrap %:foobar% endhighlight %
</code></span>
are prepended by colons.

【讨论】：

这对我不起作用……添加 nowrap 根本不会改变输出。您是从哪里得知此选项的？

我想我是在source code找到的

【参考方案4】：

我的快速解决方法是让 Jekyll 预处理代码：

<div class="highlight">
    <code class="language-css" data-lang="css">…</code>
</div>

在用 span 替换 div 后将其粘贴到需要的位置：

<span class="highlight">
    <code class="language-css" data-lang="css">…</code>
</span>