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">
</code></pre>

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:

	body {
      margin-left: 200px;
      background: #5d9ab2 url("img_tree.png") no-repeat top left;
    }

    .center_div {
      border: 1px solid gray;
      margin-left: auto;
      margin-right: auto;
      width: 90%;
      background-color: #d0f0f6;
      text-align: left;
      padding: 8px;
    }

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

One thing to note is, that if you put the code all together in one HTML card, line count will start at the 2nd row and not in the first. To avoid this, you will have to use multiple cards and "simulate" the same thing. The above example is as follows:

<pre class="line-highlight" data-line="3"><code class="lang-css">
first block
	body {
      margin-left: 200px;
      background: #5d9ab2 url("img_tree.png") no-repeat top left;
    }

    .center_div {
      border: 1px solid gray;
      margin-left: auto;
      margin-right: auto;
      width: 90%;
      background-color: #d0f0f6;
      text-align: left;
      padding: 8px;
    }
your code to highlight
</code></pre>
closing block
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.