Syntax Highlighting

hugo 內建的 Chroma 會自動在生 HTML 的時候加上 highlight

pygmentsuseclasses 生成的時候用 class ，要引入 syntax.css

# config.toml

pygmentsuseclasses = true
pygmentscodefences = true

生成 syntax.css

style gallery: https://xyproto.github.io/splash/docs/all.html

hugo gen chromastyles --style=monokai > syntax.css

關掉

其他設定：https://gohugo.io/getting-started/configuration-markup#highlight

[markup]
  [markup.highlight]
    codeFences = false

Highlight Shortcode

• linenos: configure line numbers. Valid values are true, false, table, or inline.
  • false will turn off line numbers if it’s configured to be on in site config.
  • table will give copy-and-paste friendly code blocks.
• hl_lines: lists a set of line numbers or line number ranges to be highlighted.
• linenostart=199: starts the line number count from 199.

```js {linenos=table,linenostart=125,hl_lines=["7-9",20]}
// code

![](<https://s3-us-west-2.amazonaws.com/secure.notion-static.com/df3325c3-568d-47ef-a6aa-8c40620d7c6f/Untitled.png>)