How to get inline code with Jekyll and Pygments?

Question

I use Markdown with Liquid tags to mark up the code for a site created by Jekyll, and would like to include some code that is both inline (in the paragraph) and color syntax (using Pygments), but it does not work.

Markup

Lorem ipsum dolor {% highlight javascript %} var sit = "amet"; {% endhighlight %} consectetur adipiscing elit. 

leads to

 <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'>&quot;amet&quot;</span><span class='p'>;</span></code></pre></div> consectetur adipiscing elit.</p> 

I would really like the selected text not to be wrapped in <div class='highlight'> , or at least it was <span class='highlight'> .

Using {% highlight javascript nowrap %} does not work, as elsewhere . (Perhaps this is a problem with my setup - Ruby 2.0, Jekyll 0.12.1, pygments.rb 0.3.7?)

I would like to host this page on GitHub , which means that I cannot rely on the plugin. Bummer, right?

Addendum: Line numbering (ie {% highlight javascript linenos %} ) does not work either. Man.

Answer 1

The easiest way to do this is to use the Github Flavored Markdown and use the default inline code.

in your _config.yml file, change markdown to red carpet. Now you are ready to go with GFM.

 markdown: redcarpet 

Now you can follow the GitHub Markdown . To make inline code as follows:

 Here is some `inline code` in the middle of sencence 

Answer 2

You can add a CSS class to any object that you posted in the post.

If you define a CSS entry as follows:

 .inlined { display:inline; } 

Then you can add this class to the generated <div> :

 Lorem ipsum dolor {% highlight javascript %}var sit="amet"; {% endhighlight %}{: .inlined } consectetur adipiscing elit. 

This works with all types of objects (tables, images, etc.). I can’t check it right now, but I think it will solve the problem.

When you test it, look at the HTML output. Then you will find that your <div> now has a class=inlined .

Answer 3

What is the problem with .highlight div? He set it so that syntax highlighting was easy for the topic. To change a shell to a range, my bet is that you change the configuration of Jekyll.

Line numbers are only displayed if you have a multi-line fragment.

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 ensure that text following the code block is also embedded in the same <p> .