Highlight.JS Inline Code Syntax Highlightning

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?

---

The answer, for version 11 and up.

If using version 11 or newer of highlight.js you can use the following to also highlight <code> elements.

hljs.config({ cssSelector: 'code' });;
hljs.highlightAll();

Otherwise, check our README (this can be done with just a few lines of code) or skim below for possibly more specific examples.

[tylerlong]

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

[joshgoebel]

Sounds like a Prismatic problem, maybe. I feel users should actually know and understand their setup and how they are altering it. Far too much harm comes from from people copying and pasting code they don’t understand from one box to another. Perhaps you’ve never been “that user” yet though. 😃