How to: Highlighting code inline (script)

#1

Hey everyone. Thought I would share what I did to get highlighting of code with syntax in-line.
I did this with PrismJS and with the theme Casper. It might not work with other types of setups.

<script type="text/javascript">
(function foo(){
    var nodelist = document.getElementsByClassName('post-content')[0].getElementsByTagName('code');
    for (i = 0; i < nodelist.length; i++) {
        nodelist[i].className = 'language-python';
      }
}());
</script>

Basically, this piece of code look for anything in the post you are writing, then assigns a css class name to it. Here, I used python, since that is what I use on my website. You will have to adapt the name to whatever you are using, if that is not Python.

Backquote is this symbol:
`

How to use it?

  1. Press backquote (for me it’s shift plus the key to the left of the backspace)
    1a. If your backquote does not appear immediatly, you can press spacebar
  2. Insert code, write or copy-paste
  3. Press backquote THEN spacebar

You cannot double press backquote and then insert, it has to be in that specific order, because that is how it works in the Koenig editor.

Note that this only works with one programming language at a time, unless you past it into the {{ghost_foot}} of every post and change the language-xxxx every time.

As a result, I get this look on my website when using it, which I am quite happy with.

3 Likes