Warning: I'm assuming you already use PrismJS for syntax highlighting. Also, you already installed it via code injection in your site. If you need to do this first, please refer to the Ghost tutorial or write me.

One of the beauties of Ghost is that you can implement multiple technologies such as PrismJS. In some cases, you want to not only give some sauce to your code syntax, but you also are looking to highlight specific lines of your code.

PrismJS: rism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

In those cases, using the syntax highlight plugin of PrismJS is. very useful. Now, for Ghost users, using this could become a hassle, because you don't use the regular 'code block'.

Get PrismJS

So, how can you use it within the editor then? Easy, with a HTML card. The trick is to convert the HTML block in a code block with your specifications:

<pre class="line-highlight" data-line="3"><code class="lang-css">

When you put your code within this lines, you'll:

  1. Present it with syntax highlight.
  2. Adjust the language and show it.
  3. Show the line highlighted (in this case, i selected line #3).

It will look like this:

With this, you can use line-highlight without any issues within Ghost.

Warning: if you use line-numbers and line-highlight, by default PrismJS will not present the number in the highlighted row/line.

My recommendation is to use a snippet manager, like cacher or Snippets Lab (the one i use), and save the code there for any use case in the future.

What do you think about using the line highlight feature? Are you a heavy user? Let me know in the comments.