How do I get in-line code with Jekyll and Pygments? - syntax-highlighting

Question

I'm using Markdown with Liquid tags to mark up some code for a Jekyll-generated site and would like to include some code that is both in-line (in a paragraph) and has coloured syntax (with Pygments), but it does not appear to work.
The markup
Lorem ipsum dolor {% highlight javascript %} var sit = "amet"; {% endhighlight %} consectetur adipiscing elit.
results in
<p>Lorem ipsum dolor <div class='highlight'><pre><code class='javascript'> <span class='kd'>var</span> <span class='nx'>sit</span> <span class='o'>=</span> <span class='s2'>"amet"</span><span class='p'>;</span></code></pre></div> consectetur adipiscing elit.</p>
I would very much like highlighted text not be wrapped in <div class='highlight'>, or at least have it be a <span class='highlight'>.
Using {% highlight javascript nowrap %} does not work, as suggested elsewhere. (Perhaps this is an issue with my setup—which is Ruby 2.0, Jekyll 0.12.1, pygments.rb 0.3.7?)
I would like to host this page on GitHub, which means I cannot rely on a plugin. Bummer, right?
Addendum: Line numbering (ie. {% highlight javascript linenos %}) does not appear to work either. Man.

Answer 1

The easiest way to do this is to use Github Flavoured Markdown and use their default inline code.
in your _config.yml file, change your markdown to redcarpet. You're now ready to go with GFM.
markdown: redcarpet
Now you can follow all the GitHub Markdown. To do inline code as follow:
Here is some `inline code` in the middle of sencence

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:
Lorem ipsum dolor
{% highlight javascript %}var sit="amet"; {% endhighlight %}{: .inlined }
consectetur adipiscing elit.
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

What's the problem with the .highlight div? It's put there to make syntax highlighting easy to theme.
To change the wrapper to a span my bet is that you haveto change Jekyll configuration.
Linenumbers only appear when you have a multi-line snippet.

Answer 4

If you include the following two functions (and call them):
var inlineElements = function() {
var inlinedElements = document.getElementsByClassName('inlined');
inlinedElements = Array.prototype.concat.apply([], inlinedElements); // copy
for (var i = 0; i < inlinedElements.length; i++) {
var div = inlinedElements[i];
var span = document.createElement('span');
span.innerHTML = div.children[0].innerHTML;
var previous = div.previousElementSibling;
var paragraph;
if (previous.tagName.toLowerCase() === 'p') {
paragraph = previous;
} else {
paragraph = document.createElement('p');
div.parentNode.insertBefore(paragraph, div);
}
div.remove();
paragraph.innerHTML += ' ' + span.innerHTML + ' ';
paragraph.classList.add('highlight');
paragraph.classList.add('inlined');
if (div.classList.contains('connectNext')) {
paragraph.classList.add('connectNext');
}
}
}
var connectElements = function() {
while (true) {
var connectNextElements = document.getElementsByClassName('connectNext');
if (connectNextElements.length == 0) break;
var prefix = connectNextElements[0];
var next = prefix.nextElementSibling;
prefix.innerHTML += ' ' + next.innerHTML;
next.remove();
if (!next.classList.contains('connectNext')) {
prefix.classList.remove('connectNext');
}
}
}
inlineElements();
connectElements();
You can use .inline and .connectNext in your Markdown:
{% highlight objective-c %}
[[NSObject alloc] init];
{% endhighlight %} {: .inlined .connectNext }
vs.
{% highlight java %}
new Object();
{% endhighlight %} {: .inlined }
.connectNext will make ensure that the text following the code block is also inlined in the same <p>.