Preface
Goal: A few method to highlight code.
From default, triple backtick, to prismjs.
1: Built-in: Pygment
Reading
Shortcode
Syntax highlight in Hugo is easy, just put it under syntax shortcode. For example, this Haskell code:
|
|
Example provided here, between the lyric:
-
- content/quotes/julian-baker-something.md
- gitlab.com/…/content/quotes/julian-baker-something.md
Preview: Dark
Hugo will show nice default dark color on web browser.
Theme
Highlight theme in Hugo can be set in config.
-
- config.toml
- gitlab.com/…/config.toml
PygmentsCodeFences = true
PygmentsStyle = "tango"
Preview: Bright
Hugo will show nice bright color on web browser.
Highlight Theme Gallery
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)
```
-
- content/quotes/joni-mitchell-both-sides-now.md
- gitlab.com/…/content/quotes/joni-mitchell-both-sides-now.md
Server Output: Browser
Open in your favorite browser. You should see, highlighted code.
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
-
- themes/tutor-06/layouts/partials/site-head.html
- gitlab.com/…/layouts/partials/site-head.html.
<link rel="stylesheet" type="text/css" href="{{ "css/prism.css" | relURL }}">
Javascript
-
- themes/tutor-06/layouts/partials/site-scripts.html
- gitlab.com/…/layouts/partials/site-scripts.html.
<script src="{{ "js/prism.js" | relURL }}"></script>
Server Output: Browser
Open in your favorite browser. You should see, highlighted code.
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.
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.