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

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?

score 6 · Accepted Answer · answered Dec 14 '14 at 20:42

6

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.

answered Dec 14 '14 at 20:42

bdesham

15,430
13
79
123

This is nice, but for those of you using Jekyll with github pages it won't work. That is because github pages does not allow custom plugins. – marvin Jul 13 '22 at 22:13

score 1 · Answer 2 · answered Nov 10 '13 at 18:38

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.

score 0 · Answer 3 · answered Mar 07 '13 at 15:19

0

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.

answered Mar 07 '13 at 15:19

Leo White

1,131
5
9

1

This didn’t work for me… adding `nowrap` doesn’t change the output at all. Where did you hear about this option? – bdesham Mar 09 '13 at 16:21
I think that I found it in the [source code](https://bitbucket.org/birkenfeld/pygments-main/src/7304e4759ae65343d89a51359ca538912519cc31/pygments/formatters/html.py?at=default#cl-186) – Leo White Sep 10 '13 at 22:10

score 0 · Answer 4 · answered Jul 19 '15 at 19:27

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>

Pygments syntax highlighting in Jekyll without starting a

4 Answers4

Linked