mirror/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2025-08-24 21:56:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge commit '87de22d7464e239c775fbd48ebce1665d5b1e80d'

Browse Source
This commit is contained in:
Bjørn Erik Pedersen
2023-07-29 11:17:28 +02:00
parent bec9b80d95 87de22d746
commit 8859be1c01
177 changed files with 1623 additions and 1556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/content/en/content-management/syntax-highlighting.md
View File

@@ -1,5 +1,5 @@
---
title: Syntax Highlighting
title: Syntax highlighting
description: Hugo comes with really fast syntax highlighting from Chroma.
keywords: [highlighting,chroma,code blocks,syntax]
categories: [content management]
@@ -14,13 +14,13 @@ aliases: [/extras/highlighting/,/extras/highlight/,/tools/syntax-highlighting/]
Hugo uses [Chroma](https://github.com/alecthomas/chroma) as its code highlighter; it is built in Go and is really, really fast.
## Configure Syntax Highlighter
## Configure syntax highlighter
See [Configure Highlight](/getting-started/configuration-markup#highlight).
## Generate Syntax Highlighter CSS
## Generate syntax highlighter CSS
If you run with `markup.highlight.noClasses=false` in your site config, you need a style sheet.
If you run with `markup.highlight.noClasses=false` in your site configuration, you need a style sheet.
You can generate one with Hugo:
@@ -30,20 +30,20 @@ hugo gen chromastyles --style=monokai > syntax.css
Run `hugo gen chromastyles -h` for more options. See https://xyproto.github.io/splash/docs/ for a gallery of available styles.
## Highlight Shortcode
## Highlight shortcode
Highlighting is carried out via the built-in [`highlight` shortcode](https://gohugo.io/content-management/shortcodes/#highlight). It takes exactly one required parameter for the programming language to be highlighted and requires a closing shortcode.
Highlighting is carried out via the built-in [`highlight` shortcode](/content-management/shortcodes/#highlight). It takes exactly one required parameter for the programming language to be highlighted and requires a closing shortcode.
Options:
* `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.
* `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 configuration. `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.
* `anchorlinenos`: Configure anchors on line numbers. Valid values are `true` or `false`;
* `lineanchors`: Configure a prefix for the anchors on line numbers. Will be suffixed with `-`, so linking to the line number 1 with the option `lineanchors=prefix` adds the anchor `prefix-1` to the page.
* `hl_inline` Highlight inside a `<code>` (inline HTML element) tag. Valid values are `true` or `false`. The `code` tag will get a class with name `code-inline`. {{< new-in "0.101.0" >}}
### Example: Highlight Shortcode
### Example: highlight shortcode
```go-html-template
{{</* highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" */>}}
@@ -76,9 +76,9 @@ func GetTitleFunc(style string) func(s string) string {
}
{{< / highlight >}}
## Highlight Hugo/GO Template Code
## Highlight Hugo/Go template code
For highlighting Hugo/GO template code on your page, add `/*` after the opening double curly braces and `*/` before closing curly braces.
For highlighting Hugo/Go template code on your page, add `/*` after the opening double curly braces and `*/` before closing curly braces.
``` go
{{</*/* myshortcode */*/>}}
@@ -90,11 +90,11 @@ Gives this:
{{</* myshortcode */>}}
```
## Highlight Template Func
## Highlight template function
See [Highlight](/functions/highlight/).
## Highlighting in Code Fences
## Highlighting in code fences
Highlighting in code fences is enabled by default.
@@ -132,7 +132,7 @@ func GetTitleFunc(style string) func(s string) string {
The options are the same as in the [highlighting shortcode](/content-management/syntax-highlighting/#highlight-shortcode), including `linenos=false`, but note the slightly different Markdown attribute syntax.
## List of Chroma Highlighting Languages
## List of Chroma highlighting languages
The full list of Chroma lexers and their aliases (which is the identifier used in the `highlight` template func or when doing highlighting in code fences):