Install highlight. js locally on the Ghost to highlight the code and highlight. js to highlight the code.

Install highlight. js locally on the Ghost to highlight the code and highlight. js to highlight the code.

This code highlighting is a minimum requirement for programmers to write blogs. However, Ghost does not support highlighted code. But it can be achieved through extension. It is highlight. js -- with the official website attached, I read the home page introduction, which is really powerful. Now I want to talk about how to install it, which is very simple.

Download highlight. js

Many supported highlighted languages are already included. If you cannot find the language you want, you can continue to check the language below and click Download below.

Unzip and install highlight. js

Decompress highlight. js to the resource folder under the local topic folder of Ghost. Here I am:

Install highlight. js

Use a text editor to open the default. hbase file in the theme folder and edit it:

Find {{! Styles 'n' Scripts}, add below:

<link rel="stylesheet" type="text/css" href="{{asset "/highlight/styles/hybrid.css"}}" />

Here, hybrid.css is the code topic you want to use. Here I use hybrid.css, which is my personal preference. You can also select other theme styles in the styles folder. You can preview various style code topics on this website and select your preferred one.

Find {{! The main JavaScript file for Casper} is added below:

    <script type="text/javascript" src="{{asset "/highlight/highlight.pack.js"}}"></script>    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>

How to use code highlighting

When using the markdown editor that comes with Ghost, the format is as follows:

<pre><code class="python">...</code></pre>

Python can be replaced with other languages.

OK! Now you can experience code highlighting! The result is as follows:

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.