Ghost Local Install Highlight.js make code highlight

For the program Ape to write a blog, this code highlighting is the minimum requirement. But ghost itself does not support highlighting code.

But can be achieved through the extension, it is highlight.js--attached to the official site, read the Ere page introduction, really very powerful, now say how to install, very easy.

Download Highlight.js

Already includes a very much supported highlighting language, assuming that you do not find the language you want, you can continue to check the following. Finally, click Download below.

Unzip the installation Highlight.js

Unzip the resource directory below the highlight.js to ghost Local theme directory. I am here:

Installing Highlight.js

Open the Default.hbs file in the theme directory with a text editor for editing:

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

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

The hybrid.css here is the code theme you want to use. Here I use the hybrid.css,, personal preferences. You can also select other theme styles under the Styles directory. You can go to this site to preview the various styles of code theme, choose your favorite.

Find {{! The main JavaScript file for Casper}}, join below:

 <script  type  = "text/ JavaScript " src  ="    {{asset  /highlight/ Highlight.pack.js "}}  "     </script   <script  type  = "Text/javascript" ;   </script ;    

How to use code highlighting

When Ghost comes with the Markdown editor. Follow the following format, for example:

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

Python can be replaced by other languages.

Ok. Now you can experience the feeling of code highlighting! Effects such as the following, this is a Python code:

Ghost Local Install Highlight.js make code highlight