Syntax Hightlighting Tests

Publish date: Jul 3, 2022

Introduction

For hugo’s theme Cupper, syntax highlighting is done with https://prismjs.com , not in the ways commonly documented online for hugo. That cost me a lot of time when I first setup this hugo blog site…

See: https://github.com/zwbetz-gh/cupper-hugo-theme#syntax-highlighting

I preferred Prism’s Coy theme and added the languages that I thought that I would use. To add more languages, start here .

Add the languages that are needed and then download prism.js and prism.css, and place them into the correct places, as follows:

$ pwd
<hugo site root>
$ mv ~/Downloads/prism.js ./themes/cupper-hugo-theme/static/js/prism.js 
$ mv ~/Downloads/prism.css ./themes/cupper-hugo-theme/static/css/prism.css

Tests

HTML

<html>
<body>
test
</body>
</html>

CSS

body {
  font-family: "Noto Sans", sans-serif;
}

Perl

 $foo = "hello world";
 say($foo);

bash

# and this is some bash code
echo 'hi!'