Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 


Preface

Goal: A few method to highlight code.

From default, triple backtick, to prismjs.

Table of Content

  • Preface: Table of Content

  • 1: Built-in: Pygment

  • 2: Triple Backtick

  • 3: PrismJS

  • 4: Highlight Stylesheet

  • What is Next ?


1: Built-in: Pygment

Reading

Shortcode

Syntax highlight in Hugo is easy, just put it under syntax shortcode. For example, this Haskell code:

1
2
3
4
5
6
7
8
{{ < highlight haskell > }}
-- Layout Hook
commonLayout = renamed [Replace "common"]
    $ avoidStruts 
    $ gaps [(U,5), (D,5)] 
    $ spacing 10
    $ Tall 1 (5/100) (1/3)
{{ < / highlight > }}

Example provided here, between the lyric:

Preview: Dark

Hugo will show nice default dark color on web browser.

Hugo Highlight: Pygment: Default

Theme

Highlight theme in Hugo can be set in config.

PygmentsCodeFences = true
PygmentsStyle      = "tango"

Preview: Bright

Hugo will show nice bright color on web browser.

Hugo Highlight: Pygment: Tango


2: Triple Backtick

There is another way, using triple backtick.

```haskell
-- Layout Hook
commonLayout = renamed [Replace "common"]
    $ avoidStruts 
    $ gaps [(U,5), (D,5)] 
    $ spacing 10
    $ Tall 1 (5/100) (1/3)
```

Server Output: Browser

Open in your favorite browser. You should see, highlighted code.

Hugo Highlight: Backtick: Haskell


3: PrismJS

You can also, format the result later using PrismJS.

But you need to change these artefacts:

  • themes/tutor-06/layouts/partials/site-head.html

  • themes/tutor-06/layouts/partials/site-scripts.html

Reading

CSS

    <link rel="stylesheet" type="text/css" href="{{ "css/prism.css" | relURL }}">

Javascript

    <script src="{{ "js/prism.js" | relURL }}"></script>

Server Output: Browser

Open in your favorite browser. You should see, highlighted code.

Hugo Highlight: PrismJS: Haskell


4: Highlight Stylesheet

There is also this useful pygmentsUseClasses directive that you can set in config.toml.

So you can use this:

With highlight class renamed to chroma.

But I never explore it. Since Hugo and PrismJS, are more than enough for me.

Chromastyles

You can also use this useful command line.

hugo gen chromastyles --style=perldoc > perldoc.css

I think this is enough for now.


What is Next ?

I hope that ypu are still there. Consider relax, and look at this cat in my workshop. Have a break for a while, but do not give up yet. We still have a few materials to go.

adorable cat

There are, some interesting topic about using Meta in Hugo, such as Opengraph and Twitter. Consider continue reading [ Hugo - Meta - Opengraph ].

Thank you for reading.