CSP vs. syntax highlighting in GoHugo

Patrick Kollitsch  | Wednesday, October 27, 2021 at 9:52 pm
Photo by Christopher Gower via Unsplash
Photo by Christopher Gower via Unsplash

If you are using the code styling functionality of GoHugo then you might have stumbled over a common issue when you are using Content Security Policies (CSP) and inline styles. Using CSPs is the proper way these days to secure your site code but it is considered (in the realm of CSPs) bad style to have your style sheets or JavaScript inlined into your page.

Proper CSP rules will not allow unsafe-inline in your CSP rules (because there is a reason, why it starts with unsafe). You could set this parameter to get rid of the error messages in your console, or you could ignore those errors. Or, configure your site setup to stop using inline styles for the highlight function, Markdown rendering and shortcodes.

First step: Configure GoHugo to use classes for syntax highlighting in your configuration:

1
2
3
4
[markup]
[markup.highlight]
noClasses = false
style = "monokai"

Then on the command prompt create the style sheet for the highlight shortcode or Markdown code fences:

1
hugo gen chromastyles --style=monokai > path/to/_syntaxhighlighting.scss

Add this file in your theme or style sheet pipeline and the code will be highlighted as before, but uses style sheet classes instead of inline styles.

Now everyone is happy. You and your CSP.

To see a list of available syntax highlight themes to use instead of “monokai” in the sample above go to the Chrome Style Gallery.

Remotely related

Photo by Gerry Roarty on Unsplash
Photo by Gerry Roarty on Unsplash

Giscus Module for GoHugo

Giscus is a new star on the comment systems for static website generators orbit. It is inspired by the wonderful utterances and uses Github Discussions to save comments. It’s open source, easily configurable, themeable, translatable, and you can host it on your own server (it’s JavaScript based) if you like.

Read Article
Hyper shell
Hyper shell
  • Patrick Kollitsch
  • Tuesday, November 16, 2021 at 7:52 pm

    Hyper Shell

    There is nothing, you can’t do with Electron, apparently. Newest proof is Hyper, a shell inside of Electron (you read that right). Developed by Vercel, the app is theme-able and extensible by plugins, like any other Electron app. It doesn’t look though like any init scripts like .

    Read Article