How to Add prism.js Syntax Highlighting to Ghost

If you want to enhance the syntax highlighting in the Casper Ghost theme (if you use other theme, check if extra syntax highlighting is already enabled) you should take a look at Prism. I know there are plenty other scripts for this, but Prism is simple, lightweight and has super color schemes.

add_action( 'pre_get_posts', 'minimum_toolbox_items' );
function minimum_toolbox_items( $query ) {

    if( $query->is_main_query() && !is_admin() && is_post_type_archive( 'toolbox' ) ) {
        $query->set( 'posts_per_page', '12' );
    }

}

Prism is super easy to install in Casper theme. Don't be scared by length of this tutorial, you will be ready to go within five minutes.

Install and Enable Prism

1. Download Prism preconfigured for online languages by using field below or go to http://prismjs.com/download.html if you need support for additional languages.

[sociallocker]syntax-highlighter[/sociallocker]

2. Extract archive and upload prism.js and prism.css files to your server and login there.

3. Copy prism.js to ghost/content/themes/theme-name/assets/js folder.

4. Copy prism.css to ghost/content/themes/theme-name/assets/css folder.

5. Edit ghost/default.hbs file

Add link to prism.css at the top of the file with this code:

{{! Styles'n'Scripts }} 
<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />

and add script tag to prism.js at the file bottom with this code:

{{! The main JavaScript file for Casper }}
<script type="text/javascript" src="/assets/js/prism.js"></script>

Done! Now you will be able to use custom syntax highlighter.

How To Use

That's pretty much easy, use this markup when writing a code snippet:

 ```language-markup
 <h2>This is my snippet!</h2>
 ```
and the output will look like:
 <h2>This is my snippet!</h2>

There are different markup strings for different languages: language-php, language-css, language-javascript etc.

That's it, simple as I promised.

Divi 2.0 WordPress Theme

Like what you read here in this blog post? If yes, please sign up and get latest articles delivered to your email account for FREE! You’ll be also subscribed to newsletter, where I share a exclusive content and offers.

About Kris Hoja

Hi! I'm Kris. For a while I was blogging about WordPress, now I'm owner of HogStudio - Creative Agency focused on website development.
Add me on Google+ and don't forget to follow me on Twitter :)

Comments

  1. Hello Kris,
    This is perfect article. What's syntax highlighter plugin you are using on this blog? It' very cool.

Leave a Reply