Highlight.js: Highlight.JS Inline Code Syntax Highlightning

Created on 27 Sep 2015 · 3Comments · Source: highlightjs/highlight.js

Hello!

Highlight.js is a great highlightning tool. But now i want to know if it is also possible to make inline highlighting, so not like a block (like at http://tekkkz.com/posts/articles/arch_installation.html) but inside a text paragraph?

If it is possible, how?

Source

ghost

👍2

Most helpful comment

Problem is:

.hljs {
    display: block;
}

The code won't be displayed as inline.

Solution is to add the following to your css code:

pre code.hljs {
  display: block;
}

code.hljs {
  display: inline;
}

tylerlong on 20 Oct 2015

👍7

All 3 comments

Yes, you can use highlight.js not only with <pre><code> blocks, but with any other, see README#custom-initialization.

Sannis on 11 Oct 2015

Problem is:

.hljs {
    display: block;
}

The code won't be displayed as inline.

Solution is to add the following to your css code:

pre code.hljs {
  display: block;
}

code.hljs {
  display: inline;
}

tylerlong on 20 Oct 2015

👍7

Just pointing out, the ideal solution is to have pre > code.hljs on the library for display: block; and padding rules, but I solved this in my case with two lines, though I will expand the JS in here to make it clearer.

Intialize like this (Without jQuery):

for (i in document.getElementsByTagName("code")) {
  console.log(document.getElementsByTagName("code")[i]);
};

Or like this (With jQuery):

$('pre code').each(function(i, block) {
  hljs.highlightBlock(block);
});

And add this CSS: p code.hljs, li code.hljs { display: inline; padding: .2em }

The padding change is necessary for Solarized Dark, with .5em it overlaps for more convoluted examples, at least on my blog, and feels utterly ugly.