How to use Prism js with Hugo

Here are the steps to use Prism.js instead of Chroma the default syntax highlighter in Hugo.

Add Prism js to Hugo

First you can choose to either download the prism’s files and add them to your site’s static folder, or you can reference the files directly from the Prism.js cdn. The prism.css and prism.js files ought to be connected to your Hugo pages layout, which may be found in the layouts/_default/baseof.html file.

Below is an example of how to link those files in the layouts/_default/baseof.html file.

<!DOCTYPE html>
<html>
  <head>
    ...
     <link href="/css/prism.css" rel="stylesheet" />
  </head>
  <body>
    ...
   <script src="/js/prism.js"></script>
  </body>
</html>

Given a folder structure like that:
hugo/static/js/prism.js
hugo/static/css/prism.css
You can also replace the paths with the cdn links:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.js"></script>

Create the render code block html

The next step is to create a layouts/_default/_markup/render-codeblock.html file with the following content.

{{- $attributes := .Attributes }}
{{- $classes := slice (printf "language-%s" .Type) .Attributes.class }}
{{- $attributes = merge $attributes (dict "class" (delimit $classes " ")) }}
<pre
  {{- range $k, $v := $attributes }}
    {{- printf " %s=%q" $k $v | safeHTMLAttr }}
  {{- end -}}
><code>{{- .Inner -}}</code></pre>
{{- .Page.Store.Set "hasCodeBlock" true }}

That’s it Hugo will now use prism js to render your code blocks.

# How to use Prism js with Hugo

Add Prism js to Hugo

Create the render code block html