如何使用 Jekyll 和 Pygments 获得内联代码？答案

【问题标题】：How do I get in-line code with Jekyll and Pygments?如何使用 Jekyll 和 Pygments 获得内联代码？
【发布时间】：2013-03-18 08:11:51
【问题描述】：

我正在使用带有 Liquid 标签的 Markdown 来为 Jekyll 生成的网站标记一些代码，并希望包含一些内联（在段落中）和具有彩色语法（使用 Pygments）的代码，但是它似乎不起作用。

标记

Lorem ipsum dolor {% highlight javascript %} var sit = "amet"; {% endhighlight %} consectetur adipiscing elit.

结果

<p>Lorem ipsum dolor <div class='highlight'><pre><code class='javascript'> <span class='kd'>var</span> <span class='nx'>sit</span> <span class='o'>=</span> <span class='s2'>&quot;amet&quot;</span><span class='p'>;</span></code></pre></div> consectetur adipiscing elit.</p>

我非常希望突出显示的文本不包含在 <div class='highlight'> 中，或者至少是 <span class='highlight'>。

使用{% highlight javascript nowrap %} 不起作用，如suggested elsewhere。（也许这是我的设置的问题——Ruby 2.0、Jekyll 0.12.1、pygments.rb 0.3.7？）

我想host this page on GitHub，这意味着我不能依赖插件。没用，对吧？

附录：行号（即{% highlight javascript linenos %}）似乎也不起作用。男人。

【问题讨论】：

标签： syntax-highlighting jekyll css pygments

【解决方案1】：

.highlight div 有什么问题？它放在那里是为了使语法突出显示易于主题化。要将包装器更改为跨度，我敢打赌，您必须更改 Jekyll 配置。

只有当你有一个多行 sn-p 时才会出现行号。

【讨论】：

【解决方案2】：

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

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

.inlined { display:inline; }

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

Lorem ipsum dolor 
{% highlight javascript %}var sit="amet"; {% endhighlight %}{: .inlined } 
consectetur adipiscing elit.

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

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

【讨论】：

投反对票的人，请解释原因，以便我改进或更正我的答案。

【解决方案3】：

最简单的方法是使用 Github Flavored Markdown 并使用它们的默认内联代码。

在您的 _config.yml 文件中，将您的 markdown 更改为 redcarpet。您现在已准备好使用 GFM。

markdown: redcarpet

现在您可以关注所有GitHub Markdown。内联代码如下：

Here is some `inline code` in the middle of sencence

【讨论】：

普通的内联代码很简单。问题是让 Pygments 语法突出显示 内联代码。

【解决方案4】：

如果你包含以下两个函数（并调用它们）：

var inlineElements = function() {
    var inlinedElements = document.getElementsByClassName('inlined');
    inlinedElements = Array.prototype.concat.apply([], inlinedElements); // copy
    for (var i = 0; i < inlinedElements.length; i++) {
        var div = inlinedElements[i];
        var span = document.createElement('span');
        span.innerHTML = div.children[0].innerHTML;
        var previous = div.previousElementSibling;
        var paragraph;
        if (previous.tagName.toLowerCase() === 'p') {
            paragraph = previous;
        } else {
            paragraph = document.createElement('p');
            div.parentNode.insertBefore(paragraph, div);
        }
        div.remove();
        paragraph.innerHTML += ' ' + span.innerHTML + ' ';
        paragraph.classList.add('highlight');
        paragraph.classList.add('inlined');
        if (div.classList.contains('connectNext')) {
            paragraph.classList.add('connectNext');
        }
    }
}

var connectElements = function() {
    while (true) {
        var connectNextElements = document.getElementsByClassName('connectNext');
        if (connectNextElements.length == 0) break;
        var prefix = connectNextElements[0];
        var next = prefix.nextElementSibling;
        prefix.innerHTML += ' ' + next.innerHTML;
        next.remove();
        if (!next.classList.contains('connectNext')) {
            prefix.classList.remove('connectNext');
        }
    }
}

inlineElements();
connectElements();

您可以在 Markdown 中使用 .inline 和 .connectNext：

{% highlight objective-c %}
[[NSObject alloc] init];
{% endhighlight %} {: .inlined .connectNext }
vs.
{% highlight java %}
new Object();
{% endhighlight %} {: .inlined }

.connectNext 将确保代码块后面的文本也内联在同一 <p> 中。

【讨论】：