Prism for syntax highlighting

Prism, is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

The paragraph above is from the Prism website, I use Prism in combination with Publii to "supercharge" my code-blocks.

I showed my friend Herman this a while ago and he asked me to write down the steps to install Prism in Publii. 

Publii already has a page 'Highlight your code syntax with Prism' describing most of this process but I added my personal preferences to it. 

 Prism

Go to Prism. You can now preview the different themes by clicking on the circles at the right.

If you made your choice; click on the 'Download' button.

Compression level

Select a compression level, if you want to make changes choose the 'Development version' otherwise keep te default 'Minified version'

Select a theme

Select one of the themes:

  • Default (light grey background)
  • Dark (brown background)
  • Coy (light background with blue vertical bar)
  • Twilight (black background)
  • Tomorrow Night (dark grey background)

I chose to stick with the 'Default'.

Languages

At the 'Languages' section choose the languages you expect to use most. 

I chose the following:

  • Markup + HTML + XML + SVG + MathML
  • CSS
  • C-like
  • JavaScript
  • Bash + Shell
  • Go
  • HTTP
  • JSON
  • JSONP
  • JSON5
  • YAML

No need to selct all languages you expect to use ever. With the Autoloader plugin other syntax highlight classes can be loaded dynamically.

Plugins

The 'Plugins' section lets you choose a couple of extra options for your code-block. My selection of plugins was:

  • Line Numbers, use these in the pre-tag.
  • Autoloader, dynamically load syntax highlight classes.
  • Normalize Whitespace, removes the empty line at the top of your code-block and some more.
  • Toolbar, required by the 'Clipboard Button'
  • Copy to Clipboard Button, add a 'Copy to Clipboard' button to you code-block.

The total size of my download was 33.17 KB unzipped.

Downloads

Click on the buttons 'DOWNLOAD JS' and the 'DOWNLOAD CSS' to download the files 'prism.js' and 'prism.css'

Copy JS and CSS

Copy the files to the 'js' and 'css' directory in your theme/assets folder:

  • Copy the 'prism.js' file to the directory [Publii theme]/assets/js.
  • Copy the 'prism.css' file to the directory [Publii theme]/assets/css.

Modify the partial 'head.hbs'

Add the reference to the 'prism.css' file '[Publii theme]/partials/head.hbs'. Just add it right after the default css-reference. 
Optionally you can copy the file to the folder '[Publii theme]-override/partials/' and save the the modified version in the override location.

<link rel="stylesheet" href="{{css "style.css" }}">
<link rel="stylesheet" href="{{css "prism.css" }}">

Modify the partial 'footer.hbs'

Add the reference to the 'prism.js' file '[Publii theme]/partials/footer.hbs'. Add it after the other two script references.
Optionally you can copy the file to the folder '[Publii theme]-override/partials/' and save the the modified version in the override location.

<script defer src="{{js "jquery-3.2.1.slim.min.js"}}"></script>
<script defer src="{{js "scripts.min.js"}}"></script>
<script defer src="{{js "prism.js"}}"></script>

Add it to the post-editor

To be able to use the syntax highlighting from the editor you have to edit the file '[Publii theme]/config.json' ands add some 'customElements'. See my partial 'config.json' below.


"customElements": [
        {
            "label": "Info",
            "cssClasses": "msg msg--info",
            "selector": "p"
        },
        {
            "label": "Highlight",
            "cssClasses": "msg msg--highlight ",
            "selector": "p"
        },
        {
            "label": "Success",
            "cssClasses": "msg msg--success",
            "selector": "p"
        },
        {
            "label": "Drop cap",
            "cssClasses": "dropcap",
            "selector": "p"
        },
        {
            "label": "Line numbers",
            "cssClasses": "line-numbers",
            "selector": "pre"
        },
        {
            "label": "Code-markup",
            "cssClasses": "language-markup",
            "selector": "code"
        },
        {
            "label": "Code HTML",
            "cssClasses": "language-html",
            "selector": "code"
        },
        {
            "label": "Code XML",
            "cssClasses": "language-xml",
            "selector": "code"
        },
        {
            "label": "Code CSS",
            "cssClasses": "language-css",
            "selector": "code"
        },
        {
            "label": "Code C-like",
            "cssClasses": "language-clike",
            "selector": "code"
        },
        {
            "label": "Code JavaScript",
            "cssClasses": "language-javascript",
            "selector": "code"
        },
        {
            "label": "Code Bash/Shell",
            "cssClasses": "language-bash",
            "selector": "code"
        },
        {
            "label": "Code Go(lang)",
            "cssClasses": "language-go",
            "selector": "code"
        },
        {
            "label": "Code HTTP",
            "cssClasses": "language-http",
            "selector": "code"
        },
        {
            "label": "Code JSON",
            "cssClasses": "language-json",
            "selector": "code"
        },
        {
            "label": "Code JSONP",
            "cssClasses": "language-jsonp",
            "selector": "code"
        },
        {
            "label": "Code JSON5",
            "cssClasses": "language-json5",
            "selector": "code"
        },
        {
            "label": "Code YAML",
            "cssClasses": "language-yaml",
            "selector": "code"
        }
    ]
}

You have to restart Publii to see the changes in the editor menu.

How to use it

Maybe I did something wrong but it somehow does not work as expected in the editor.
As an alternative you can dive into the "<> HTML" and make your changes there.

The code block should look something like this:

<pre class="linenumbers">
<code class="language-css">
  your code here
</code></pre>

I hope this wil get you started. It's not perfect but the result do look good.

Comments