Codeblock

Hugo Narrow add kinds of functions for codeblock:

• click to copy
• code language display
• collapse codeblock

1codeblock:
2  collapse:
3    enabled: true
4    defaultState: expanded # expanded, collapsed
5    autoCollapseLines: 30
6    autoCollapseHeight: 400
7    collapsedHeight: 120

Highlight

Hugo Narrow uses chroma for syntax highlighting, with github and github-dark as the styles for light and dark modes respectively.

To better integrate with the theme, the style files are created and adapted using the command hugo gen chromastyles --style=github > ./assets/css/github.css. Modifying the highlighting styles also requires generating them via the command line, making the process of replacing them somewhat complex:

1. Generate the styles using the hugo cli.
2. Replace the corresponding theme variable colors in ~/assets/css/chroma.css.

1# view all chroma styles
2hugo gen chromastyles --help
3
4# generate style files
5hugo gen chromastyles --style=github > ./github.css
6hugo gen chromastyles --style=github-dark > ./github-dark.css