Customizing highlight.js

[inktrap]

Hi, guys. I don’t know the first thing about javascript and need some help. Could somebody please take a look at
https://highlightjs.org/usage/ and http://highlightjs.readthedocs.org/en/latest/api.html and tell me what kind of script I need to make it work on inline code tags?

[nkrisc]

What isn’t working? According to the instructions it will find any code in <pre><code></code></pre> tags.

Did you follow the instructions and include it?

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

[inktrap]

I’d like it to work on <code> alone so I can highlight inline snippets of code.
The documentation clearly says that it’s possible to use any tags instead of <pre><code>.

[nkrisc]

You mean like this?

http://codepen.io/nkrisc/pen/XbYoBx

I don’t know if there’s a better way to do this with the library but I’m not going to look through all the documentation.

[inktrap]

And where do I put it? Right now I have this in my header, like the example on their site

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/github.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

[nkrisc]

You’ll need to make sure all code tags are rendered before it runs so either put it at the end of the body or in the head but wrapped to make sure the DOM is ready.

[Author]

Posts