在列表中添加代码块时，markdown显示不正确 [英] markdown display incorrect when add code block in list

问题描述

我在 jekyll博客中使用pygments和kramdown.

I am using pygments and kramdown in my jekyll blog.

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

I tried to add code block to markdown list, but display incorrect.

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>

但是如果我这样写，那没问题.

but if I write like this, it is no problem.

1. first

2. second

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

3. third

这是pygments还是kramdown问题?希望有人能帮助我，谢谢高级！

Is this pygments or kramdown problem? Hope someone can help me, thanks in advanced!

推荐答案

问题不在于Liquid或kramdown单独存在，而是它们如何一起运行. Jekyll似乎首先使用Liquid处理文件，然后将结果传递给kramdown以解析为markdown.

The problem is not with Liquid or kramdown individually, but how they operate together. Jekyll seems to be processing the files with Liquid first, followed by passing the result to kramdown to be parsed as markdown.

这意味着kramdown看到这样的内容:

This means that kramdown is seeing something like this:

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 isn’t keeping the indentation of the code section, and so when processed as markdown it is causing the list to close and the third item to be seen as a new list.

为了在此处使用highlight Liquid标签，您需要确保Liquid处理的结果是适当缩进的markdown.我不知道普通的Jekyll是否可以做到这一点，但您可以使用插件相当简单地完成此操作(因此，如果您使用的是Github页面，则无法使用).

In order to use the highlight Liquid tag here you need to ensure the result of Liquid processing is the appropriately indented markdown. I don’t know if this is possible with plain Jekyll, but you could do this fairly simply with a plugin (so this won’t work if you are using Github pages).

使用以下内容创建一个名为_plugins/indent_filter.rb之类的文件:

Create a file named something like _plugins/indent_filter.rb with these contents:

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

Liquid::Template.register_filter(IndentFilter)

现在您可以像这样使用它:

Now you can use it like this:

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标签根本没有缩进，这是由过滤器处理的.

Note that you need to use capture first in order to use the indent filter (you could probably create a custom tag to use instead of highlight if you prefer). Also note that the Liquid tags aren’t indented at all, that is handled by the filter.

在Liquid处理之后但降价之前的结果如下:

The result of this after Liquid processing but before markdown is something like this:

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不会尝试进一步处理它，也不会导致列表被关闭.降价处理后的结果是:

Now the code block is correctly indented so that markdown sees it as the content of the second list item. Since it is already HTML kramdown doesn’t try to process it further, but also it doesn’t cause the list to be closed. The result after markdown processing is:

<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>

这篇关于在列表中添加代码块时，markdown显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！