To make code and markup such as XML and HTML easier to read on a website, you should use syntax highlighting.
Ghost does not have built in syntax highlighting out of the box, but its quite easy to add it!
Theres a library called Prism.js (by Leah Verou) that can add such a feature to your website.
Setting up Prism
- Go to the prism download page, and select a theme, and which languages you would like highlight support for.
- Download the .css and .js file at the bottom of the page.
- Copy
prism.js
toghost/content/themes/casper/assets/js
- Copy
prism.css
toghost/content/themes/casper/assets/css
- In the file
ghost/content/themes/caspter/deafult.hbs
add a link to theprism.css
file below the{{! Styles'n'Scripts }}
tag:
{{! Styles'n'Scripts }}
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
6. In the same file, add a script tag to include prism.js
:
{{! The main JavaScript file for Casper }}
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
That should be it, Prism should now be installed.
Using Prism for Syntax highlighted code
When writing a blogpost, you can type:
```language-markup
<p class="awesome">This HTML should be syntax highlighted</p>
```
And it should look like similar to this (except for the color theme you chose):
<p class="awesome">This HTML should be syntax highlighted</p>
Prism has a whole lot of options when it comes to languages. You can specify which you want included on the download page.
Examples:
language-java
language-markup
language-css
language-bash
language-php
language-ini
language-sql