update FAQ for Using Hugo's Syntax highlighter "chroma"

This commit is contained in:
Aditya Telange 2021-01-22 11:32:52 +05:30
parent 5265710f2d
commit 49f2c2632b
No known key found for this signature in database
GPG Key ID: 82E844EF3DA99E77

View File

@ -274,34 +274,36 @@ Add `#center` after image to center align an image
1. Disable Highlight.js in site `config.yml` 1. Disable Highlight.js in site `config.yml`
```yml ```yml
params: params:
assets: assets:
disableHLJS: true disableHLJS: true
``` ```
2. Set hugo's markdown styling in site `config.yml` 2. Set hugo's markdown styling in site `config.yml`
```yml ```yml
markup: markup:
highlight: highlight:
# anchorLineNos: true # anchorLineNos: true
codeFences: true codeFences: true
guessSyntax: true guessSyntax: true
lineNos: true lineNos: true
# noClasses: false # noClasses: false
style: monokai style: monokai
``` ```
3. If you want `lineNos: true`, the background won't be proper. 3. If you want `lineNos: true`, the background won't be proper.
This will only work with `noClasses: false` or `pygmentsUseClasses: true`.
Read [Generate Syntax Highlighter CSS](https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css)
Add the following to `assets/css/extended/custom.css` Add the following to `assets/css/extended/custom.css`
```css ```css
.chroma { .chroma {
background-color: unset; background-color: unset;
} }
``` ```
More Info : [Configure Markup - Highlight](https://gohugo.io/getting-started/configuration-markup#highlight) More Info : [Configure Markup - Highlight](https://gohugo.io/getting-started/configuration-markup#highlight)