Jekyll fenced code block kramdown issue

Question

I'm struggling with fenced code blocks highlighting. Could you help me to sort out what am I doing wrong?

Code highlighting works well when I use liquid tags: {% highlight lang %}{% endhighlight %}, but this approach breaks lists (it's a known issue). The thing that bothers me most is that when I use kramdown+rouge syntax it doesn't highlight code at all.

Here's how jekyll parses both ways:

1. Kramdown+rouge syntax

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

   

2. Liquid syntax

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

   

I've tried any combinations of blank lines and spaces before and after code block, but nothing seems to work.

Answer 1

The image you linked for the kramdown+rouge result only partially displays what kramdown output (i.e. only <div ...>...</div>). However, I'm guessing that the result looks like this:

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

If it does, the result is syntax highlighter by rouge via kramdown. You probably only need to include the correct CSS styles. For doing this, this blog post may help.