affichage de démarquage incorrect lorsque ajouter un bloc de code dans la liste

Question

J'utilise pygments et kramdown dans mon jekyll blog.

J'ai essayé d'ajouter un bloc de code à la liste de démarques, mais l'affichage est incorrect.

1. first 

2. second 

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

3. third 

généré 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> 

mais si j'écris comme ça, il n'y a pas de problème.

1. first 

2. second 

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

3. third 

Est-ce pygments ou problème kramdown? J'espère que quelqu'un peut m'aider, merci à l'avance!

Answer 1

Le problème n'est pas avec Liquid ou kramdown individuellement, mais comment ils fonctionnent ensemble. Jekyll semble traiter les fichiers avec Liquid en premier, puis passer le résultat à kramdown pour être analysé en tant que démarque.

Cela signifie que kramdown voit quelque chose comme ceci:

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 

liquide ne suit pas l'empreinte de la section de code, et donc quand traité comme démarquage il est à l'origine de la liste fermer et le troisième élément être vu comme une nouvelle liste.

Afin d'utiliser l'étiquette highlight Liquid ici, vous devez vous assurer que le résultat du traitement liquide est la marque en retrait appropriée. Je ne sais pas si c'est possible avec Jekyll, mais vous pouvez le faire assez simplement avec un plugin (donc cela ne fonctionnera pas si vous utilisez des pages Github).

Créez un fichier nommé quelque chose comme _plugins/indent_filter.rb avec ce contenu:

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

Liquid::Template.register_filter(IndentFilter) 

Maintenant, vous pouvez l'utiliser comme ceci:

1. first 

2. second 

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

3. third 

Notez que vous devez utiliser capture d'abord afin d'utiliser la indent filtre (vous pouvez probablement créer un tag personnalisé à utiliser au lieu de highlight si vous préférez). Notez également que les étiquettes de liquide ne sont pas du tout indentées, ce qui est géré par le filtre.

Le résultat de ce traitement après liquide mais avant démarquage est quelque chose comme ceci:

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 

Maintenant, le bloc de code est correctement mis en retrait pour que démarquage il voit que le contenu du deuxième élément de la liste.Comme il est déjà HTML, kramdown n'essaie pas de le traiter davantage, mais il ne provoque pas non plus la fermeture de la liste. Le résultat après le traitement de démarquage est:

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

La balise Jekyll highlight coupe le contenu. Étant donné que les espaces avant votre instruction end sont au milieu du texte, ils ne seront pas rognés.

Désactivez le bloc de code entier et il doit s'afficher correctement.

1. first 

2. second 

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

3. third