1

私はjekyll blogで pygments と kramdown を使用しています。

マークダウン リストにコード ブロックを追加しようとしましたが、正しく表示されません。

1. first

2. second

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

3. third

2015-10-29 6 39 28

生成された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

2015-10-29 6 41 37

これはピグメントまたはクラムダウンの問題ですか? 誰かが私を助けてくれることを願っています。

4

3 に答える 3

3

問題は、Liquid や kramdown が個別に存在することではなく、それらがどのように連携して動作するかです。Jekyllは、最初にLiquidでファイルを処理し、次に結果をkramdownに渡してマークダウンとして解析しているようです。

これは、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 はコード セクションのインデントを保持していないため、マークダウンとして処理されると、リストが閉じられ、3 番目の項目が新しいリストとして表示されます。

ここで Liquid タグを使用するにhighlightは、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 処理後、マークダウン前の結果は次のようになります。

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

これで、コード ブロックは正しくインデントされ、マークダウンはそれを 2 番目のリスト項目のコンテンツとして認識します。すでに HTML であるため、kramdown はそれ以上の処理を試みませんが、リストが閉じられることもありません。マークダウン処理後の結果は次のとおりです。

<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>
于 2015-10-30T03:22:40.590 に答える