Pygments syntax highlighting in Jekyll without starting a

Question

If you use Jekyll with the Pygments syntax-highlighting package, it’s possible to write

{% highlight clojure %}
(def something :foobar)
{% endhighlight %}


        

Answer 1

You can add a CSS class to any object you put in a post.

If you define a CSS entry like this:

.inlined { display:inline; }

You can then add this class to the generated <div> doing this:

In Clojure, keywords like 
{% highlight clojure %}:foobar{% endhighlight %}{: .inlined } 
are prepended by colons.

This works with all kind of objects (tables, images, etc). I can not test it right now, but I think this will solve the issue.

When you test it, look at the output HTML. You will then find that your <div> now has the class=inlined attribute set.

Answer 2

My quick workaround was letting Jekyll preprocess the code:

<div class="highlight">
    <code class="language-css" data-lang="css">…</code>
</div>

And paste it into a desirable place after replacing divs with spans:

<span class="highlight">
    <code class="language-css" data-lang="css">…</code>
</span>    

Answer 3

I think that you can use the nowrap option to prevent Pygments from wrapping the code in a div tag. So your example would become:

In Clojure, keywords like 
<span class='highlight'><code class='closure'>
{% highlight clojure nowrap %}:foobar{% endhighlight %}
</code></span>
are prepended by colons.

Answer 4

Two years later, I went ahead and created my own Jekyll plugin to provide inline syntax highlighting. It’s called inline_highlight and it can be used like so:

In Clojure, keywords like {% ihighlight clojure %}:foobar{% endihighlight %}
are prepended by colons.