summaryrefslogtreecommitdiffstats
path: root/docs/content/en/content-management/syntax-highlighting.md
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/en/content-management/syntax-highlighting.md')
-rw-r--r--docs/content/en/content-management/syntax-highlighting.md141
1 files changed, 141 insertions, 0 deletions
diff --git a/docs/content/en/content-management/syntax-highlighting.md b/docs/content/en/content-management/syntax-highlighting.md
new file mode 100644
index 000000000..c53a6d65e
--- /dev/null
+++ b/docs/content/en/content-management/syntax-highlighting.md
@@ -0,0 +1,141 @@
+---
+title: Syntax Highlighting
+description: Hugo comes with really fast syntax highlighting from Chroma.
+date: 2017-02-01
+publishdate: 2017-02-01
+keywords: [highlighting,chroma,code blocks,syntax]
+categories: [content management]
+menu:
+ docs:
+ parent: "content-management"
+ weight: 300
+weight: 20
+sections_weight: 20
+draft: false
+aliases: [/extras/highlighting/,/extras/highlight/,/tools/syntax-highlighting/]
+toc: true
+---
+
+
+Hugo uses [Chroma](https://github.com/alecthomas/chroma) as its code highlighter; it is built in Go and is really, really fast -- and for the most important parts compatible with Pygments we used before.
+
+## Configure Syntax Highlighter
+
+See [Configure Highlight](/getting-started/configuration-markup#highlight).
+
+
+## Generate Syntax Highlighter CSS
+
+If you run with `pygmentsUseClasses=true` in your site config, you need a style sheet.
+
+You can generate one with Hugo:
+
+```bash
+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
+
+Highlighting is carried out via the [built-in shortcode](/content-management/shortcodes/) `highlight`. `highlight` takes exactly one required parameter for the programming language to be highlighted and requires a closing shortcode. Note that `highlight` is *not* used for client-side javascript highlighting.
+
+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. {{< new-in "0.60.0" >}} `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.
+
+### Example: Highlight Shortcode
+
+```
+{{</* highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" */>}}
+// ... code
+{{</* / highlight */>}}
+```
+
+Gives this:
+
+{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
+// GetTitleFunc returns a func that can be used to transform a string to
+// title case.
+//
+// The supported styles are
+//
+// - "Go" (strings.Title)
+// - "AP" (see https://www.apstylebook.com/)
+// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
+//
+// If an unknown or empty style is provided, AP style is what you get.
+func GetTitleFunc(style string) func(s string) string {
+ switch strings.ToLower(style) {
+ case "go":
+ return strings.Title
+ case "chicago":
+ return transform.NewTitleConverter(transform.ChicagoStyle)
+ default:
+ return transform.NewTitleConverter(transform.APStyle)
+ }
+}
+{{< / highlight >}}
+
+
+
+## Highlight Template Func
+
+See [Highlight](/functions/highlight/).
+
+## Highlighting in Code Fences
+
+Highlighting in code fences is enabled by default.{{< new-in "0.60.0" >}}
+
+````
+```go {linenos=table,hl_lines=[8,"15-17"],linenostart=199}
+// ... code
+```
+````
+
+
+Gives this:
+
+```go {linenos=table,hl_lines=[8,"15-17"],linenostart=199}
+// GetTitleFunc returns a func that can be used to transform a string to
+// title case.
+//
+// The supported styles are
+//
+// - "Go" (strings.Title)
+// - "AP" (see https://www.apstylebook.com/)
+// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
+//
+// If an unknown or empty style is provided, AP style is what you get.
+func GetTitleFunc(style string) func(s string) string {
+ switch strings.ToLower(style) {
+ case "go":
+ return strings.Title
+ case "chicago":
+ return transform.NewTitleConverter(transform.ChicagoStyle)
+ default:
+ return transform.NewTitleConverter(transform.APStyle)
+ }
+}
+```
+
+{{< new-in "0.60.0" >}}Note that only Goldmark supports passing attributes such as `hl_lines`, and it's important that it does not contain any spaces. See [goldmark-highlighting](https://github.com/yuin/goldmark-highlighting) for more information.
+
+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
+
+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):
+
+{{< chroma-lexers >}}
+
+[Prism]: https://prismjs.com
+[prismdownload]: https://prismjs.com/download.html
+[Highlight.js]: https://highlightjs.org/
+[Rainbow]: https://craig.is/making/rainbows
+[Syntax Highlighter]: https://alexgorbatchev.com/SyntaxHighlighter/
+[Google Prettify]: https://github.com/google/code-prettify
+[Yandex]: https://yandex.ru/