在列表中添加代码块时降价显示不正确

Question

中使用 pygments 和 kramdown

我尝试将代码块添加到降价列表中，但显示不正确。

1. first

2. second

    {% highlight ruby %}
    def foo
      puts 'foo'
    end
    {% endhighlight %}

3. third

生成html:

<ol>
  <li>
    <p>first</p>
  </li>
  <li>
    <p>second</p>
  </li>
</ol>

<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">foo</span>
  <span class="nb">puts</span> <span class="s1">&#39;foo&#39;</span>
<span class="k">end</span></code></pre></div>

<ol>
  <li>third</li>
</ol>

但是我这样写就没问题了

1. first

2. second

    ```
    def foo
      puts 'foo'
    end
    ```

3. third

这是pygments还是kramdown的问题？

Answer 1

Jekyll highlight 标签正在修剪内容。由于 end 语句之前的空格位于文本中间，因此不会被修剪。

取消缩进整个代码块，它应该正确呈现。

1. first

2. second

    {% highlight ruby %}
def foo
  puts 'foo'
end
    {% endhighlight %}

3. third

Answer 2

问题不在于 Liquid 或 kramdown 单独存在，而在于它们如何协同工作。 Jekyll 似乎首先使用 Liquid 处理文件，然后将结果传递给 kramdown 以解析为 markdown。

这意味着 kramdown 看到的是这样的东西：

1. first

2. second


<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby">    <span class="k">def</span> <span class="nf">foo</span>
      <span class="nb">puts</span> <span class="s1">'foo'</span>
    <span class="k">end</span>
    </code></pre></figure>


3. third

Liquid 不保留代码部分的缩进，因此当作为 markdown 处理时，它会导致列表关闭，第三项被视为新列表。

为了在此处使用 highlight Liquid 标签，您需要确保 Liquid 处理的结果是适当缩进的降价。我不知道普通的 Jekyll 是否可行，但你可以使用插件相当简单地做到这一点（所以如果你使用 Github 页，这将不起作用）。

创建一个名为 _plugins/indent_filter.rb 的文件，内容如下：

module IndentFilter
  def indent(input)
    input.gsub(/\n/, "\n    ")
  end
end

Liquid::Template.register_filter(IndentFilter)

现在你可以这样使用了：

1. first

2. second

{% capture the_code %}
{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}
{% endcapture %}
{{ the_code | indent }}

3. third

请注意，您需要先使用 capture 才能使用 indent 过滤器（如果您愿意，您可以创建一个自定义标签来代替 highlight）。另请注意，Liquid 标签根本没有缩进，这是由过滤器处理的。

在 Liquid 处理之后但在 markdown 之前的结果是这样的：

1. first

2. second

    <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">foo</span>
      <span class="nb">puts</span> <span class="s1">'foo'</span>
    <span class="k">end</span></code></pre></figure>

3. third

现在代码块已正确缩进，以便 markdown 将其视为第二个列表项的内容。因为它已经是 HTML kramdown 不会尝试进一步处理它，而且它也不会导致列表被关闭。 markdown处理后的结果为：

<ol>
  <li>
    <p>first</p>
  </li>
  <li>
    <p>second</p>

    <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">foo</span>
   <span class="nb">puts</span> <span class="s1">'foo'</span>
 <span class="k">end</span></code></pre></figure>
  </li>
  <li>
    <p>third</p>
  </li>
</ol>

Answer 3

我稍微修改了@matt 的回答。

我们可以在 rb 文件中使用 \t 而不是 4 space。

由于此更改，我们也可以对第一级和第二级列表项使用缩进。

找到下面的rb文件

module IndentFilter
  def indent1(input)
    input.gsub(/\n/, "\n\t")
  end
  def indent2(input)
    input.gsub(/\n/, "\n\t\t")
  end
end

Liquid::Template.register_filter(IndentFilter)

在列表中添加代码块时降价显示不正确

markdown display incorrect when add code block in list

css

markdown

jekyll

pygments

kramdown