CSP vs. syntax highlighting in GoHugo
| Wednesday, October 27, 2021 at 9:52 pm
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:
noClasses = false
style = "monokai"
Then on the command prompt create the style sheet for the highlight shortcode or Markdown code fences:
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.