Pygments syntax highlighting in Jekyll without starting a <div>

Question

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

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

which produces a <div> containing that line, syntax-highlighted according to Clojure syntax. But is there a way to get the syntax highlighting in the middle of a paragraph? I’d like to be able to write

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

The desired behavior here is that the Clojure keyword would be highlighted using the same style as was used for the keyword in the first example. When I try to do this, though, it just produces a <div> like before. (And maybe this is specific to the Kramdown markdown engine I’m using, but the div tag itself is HTML-escaped so that you can see “<div>” right there in the generated text.)

Is there a way to get Jekyll/Pygments to do “inline” syntax highlighting like this?

Answer 1

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.

Answer 2

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

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>