MaiDeveloper

How to add code highlight to Ghost blog with Prism?

Ghost blog platform doesn't support code highlight. Forunately, there are many solutions out there. One of them is Prism. Prism supports many languages; such as javascript, sql, bash, etc.

 

Download Prism

  1. Visit http://prismjs.com/download.html
  2. Pick a theme, languages, and plugins.
  3. Scroll down and download javascript and css file.

 

Edit Ghost theme

  1. Copy Prism javascript file to theme's javascript folder. It should be content/themes/{your_theme}/assets/js.

  2. Copy Prism stylesheet file to theme's stylesheet folder. It should be content/themes/{your_theme/assets/css.

  3. Edit content/themes/{your_theme}/default.hbs.

    Add the following tag under {{! Styles }}.

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

    Add the following tag before the body tag.

    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
    
  4. Upload the changes to server.

 

Usage

```html
```

This will output the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>window.console && console.log('foo');</script>
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="favicon.png" />
        <title>Prism</title>
    </head>
    <body><body>
</html>


Mike Mai
Mike Mai   Brooklyn, New York
I am full-stack web developer, passionate about building world class web applications. Knowledge in designing, coding, testing, and debugging. I love to solve problems.