Problema di kramdown del blocco di codice recintato da Jekyll: jekyll, codeblocks, kramdown

Sto lottando con l'evidenziazione dei blocchi di codice recintato. Potresti aiutarmi a capire cosa sto sbagliando?

L'evidenziazione del codice funziona bene quando utilizzo il liquidotags: {% highlight lang%} {% endhighlight%}, ma questo approccio rompe gli elenchi (è un problema noto). La cosa che mi infastidisce di più è che quando uso la sintassi di kramdown + rouge non evidenzia affatto il codice.

Ecco come jekyll analizza in entrambi i modi:

1. Kramdown + sintassi rouge

   ```xml
   <intent-filter>
   <action android:name="some.event" />
   
   <category android:name="some.event" />
   </intent-filter>
   ```
   

   

2. Sintassi liquida

   {% highlight xml %}
   <intent-filter>
   <action android:name="some.event" />
   
   <category android:name="some.event" />
   </intent-filter>
   {% endhighlight %}
   

   

Ho provato qualsiasi combinazione di righe e spazi vuoti prima e dopo il blocco del codice, ma nulla sembra funzionare.

risposte:

L'immagine che hai collegato per il risultato di kramdown + rouge mostra solo parzialmente l'output di kramdown (cioè solo <div ...>...</div>). Tuttavia, immagino che il risultato assomigli a questo:

<div class="language-xml highlighter-rouge"><span class="nt">&lt;intent-filter&gt;</span>
<span class="nt">&lt;action</span> <span class="na">android:name=</span><span class="s">"some.event"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;category</span> <span class="na">android:name=
</span><span class="s">"some.event"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/intent-filter&gt;</span>
</div>

Se lo fa, il risultato è Evidenziatore di sintassi di rouge tramite kramdown. Probabilmente hai solo bisogno di includere gli stili CSS corretti. Per fare questo, questo post del blog posso aiutare.