Highlighting Hugo Code Fragments with Prism

Adding the Prism.js code highlighting library to a Hugo site is easy.

First goto Prism.js Download and select the code types that are in need of highlighting plus any other options that are needed.

Second, download the generated package and etract the files. Place the prism.js and prism.css files from the package into the respective static folders for the site.

Third, place in the following into the header.html in the layouts/partials folder of either themes folder or of the main site if not using a theme.

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/prism.css" type="text/css" media="all" />
<script type="text/javascript" src="{{ .Site.BaseURL }}js/prism.js"></script>


Once the site is rendered, these links will point to the location the files will be in the public site.

Now, using the three back-ticks followed by a shortcode will highlight the text from there until the next 3 back-ticks.

Examples:

    ```html
    ```javascript
    ```css
    ```http
    ```csharp
    ```bash
    ``` and many more...