语法高亮 | Hugo 中文网

Hugo 使用 Chroma 作为其代码高亮工具；它使用 Go 语言构建，速度非常快。

配置语法高亮器

生成语法高亮器 CSS

如果在站点配置中使用 markup.highlight.noClasses=false 运行，则需要一个样式表。样式表将覆盖 markup.highlight.style 中指定的样式。

可以使用 Hugo 生成一个：

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

运行 hugo gen chromastyles -h 获取更多选项。参见 https://xyproto.github.io/splash/docs/ 查看可用样式的图库。

高亮短代码

高亮通过内置的 highlight 短代码执行。它只有一个必需的参数，用于指定要高亮的编程语言，并且需要一个闭合标签。

选项：

linenos ：配置行号。有效值为 true 、 false 、 table 或 inline 。如果在站点配置中将其配置为开启，则 false 将关闭行号。 table 将提供方便复制粘贴的代码块。
hl_lines ：列出一组要高亮的行号或行号范围。
linenostart=199 ：将行号计数从 199 开始。
anchorlinenos ：配置行号上的锚点。有效值为 true 或 false ；
lineanchors ：配置行号上锚点的前缀。将在其后添加 - ，因此使用选项 lineanchors=prefix 将行号 1 链接到页面会向页面添加锚点 prefix-1 。
hl_inline 在 <code> （内联 HTML 元素）标签内高亮。有效值为 true 或 false 。 code 标签将获得一个名为 code-inline 的类。

示例：高亮短代码

{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
// ... 代码
{{< / highlight >}}

效果如下：

199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218


// GetTitleFunc 返回一个函数，该函数可用于将字符串转换为
// 标题大小写。
//
// 支持的样式为
//
// - "Go" (strings.Title)
// - "AP" (参见 https://www.apstylebook.com/)
// - "Chicago" (参见 https://www.chicagomanualofstyle.org/home.html)
//
// 如果提供未知或空样式，则获得 AP 样式。
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)
  }
}

高亮 Hugo/Go 模板代码

要在页面上高亮 Hugo/Go 模板代码，请在起始双大括号后添加 /* ，在结束双大括号前添加 */ 。

{{</* myshortcode */>}}

效果如下：

{{< myshortcode >}}

高亮模板函数

参见高亮。

代码围栏中的高亮

代码围栏中的高亮默认启用。

```go {linenos=table,hl_lines=[8,"15-17"],linenostart=199}
// ... 代码
```

效果如下：

199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218


// GetTitleFunc 返回一个函数，该函数可用于将字符串转换为
// 标题大小写。
//
// 支持的样式为
//
// - "Go" (strings.Title)
// - "AP" (参见 https://www.apstylebook.com/)
// - "Chicago" (参见 https://www.chicagomanualofstyle.org/home.html)
//
// 如果提供未知或空样式，则获得 AP 样式。
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)
  }
}

选项与高亮短代码中的相同，包括 linenos=false ，但请注意 Markdown 属性语法略有不同。

Chroma 高亮语言列表

Chroma 词法分析器及其别名（这是在 highlight 模板函数中或在代码围栏中进行高亮时使用的标识符）的完整列表：

ABAP: abap
ABNF: abnf
ActionScript: as, actionscript
ActionScript 3: as3, actionscript3
Ada: ada, ada95, ada2005
Agda: agda
AL: al
Alloy: alloy
Angular2: ng2
ANTLR: antlr
ApacheConf: apacheconf, aconf, apache
APL: apl
AppleScript: applescript
ArangoDB AQL: aql
Arduino: arduino
ArmAsm: armasm
AutoHotkey: autohotkey, ahk
AutoIt: autoit
Awk: awk, gawk, mawk, nawk
Ballerina: ballerina
Bash: bash, sh, ksh, zsh, shell
Bash Session: bash-session, console, shell-session
Batchfile: bat, batch, dosbatch, winbatch
BibTeX: bib, bibtex
Bicep: bicep
BlitzBasic: blitzbasic, b3d, bplus
BNF: bnf
BQN: bqn
Brainfuck: brainfuck, bf
C: c
C#: csharp, c#
C++: cpp, c++
Caddyfile: caddyfile, caddy
Caddyfile Directives: caddyfile-directives, caddyfile-d, caddy-d
Cap'n Proto: capnp
Cassandra CQL: cassandra, cql
Ceylon: ceylon
CFEngine3: cfengine3, cf3
cfstatement: cfs
ChaiScript: chai, chaiscript
Chapel: chapel, chpl
Cheetah: cheetah, spitfire
Clojure: clojure, clj, edn
CMake: cmake
COBOL: cobol
CoffeeScript: coffee-script, coffeescript, coffee
Common Lisp: common-lisp, cl, lisp
Coq: coq
Crystal: cr, crystal
CSS: css
CUE: cue
Cython: cython, pyx, pyrex
D: d
Dart: dart
Dax: dax
Desktop file: desktop, desktop_entry
Diff: diff, udiff
Django/Jinja: django, jinja
dns: zone, bind
Docker: docker, dockerfile
DTD: dtd
Dylan: dylan
EBNF: ebnf
Elixir: elixir, ex, exs
Elm: elm
EmacsLisp: emacs, elisp, emacs-lisp
Erlang: erlang
Factor: factor
Fennel: fennel, fnl
Fish: fish, fishshell
Forth: forth
Fortran: fortran, f90
FortranFixed: fortranfixed
FSharp: fsharp
GAS: gas, asm
GDScript: gdscript, gd
GDScript3: gdscript3, gd3
Genshi: genshi, kid, xml+genshi, xml+kid
Genshi HTML: html+genshi, html+kid
Genshi Text: genshitext
Gherkin: cucumber, Cucumber, gherkin, Gherkin
Gleam: gleam>
GLSL: glsl
Gnuplot: gnuplot
Go: go, golang
Go HTML Template: go-html-template
Go Template: go-template
Go Text Template: go-text-template
GraphQL: graphql, graphqls, gql
Groff: groff, nroff, man
Groovy: groovy
Handlebars: handlebars, hbs
Hare: hare
Haskell: haskell, hs
Haxe: hx, haxe, hxsl
HCL: hcl
Hexdump: hexdump
HLB: hlb
HLSL: hlsl
HolyC: holyc
HTML: html
HTTP: http
Hy: hylang
Idris: idris, idr
Igor: igor, igorpro
INI: ini, cfg, dosini
Io: io
ISCdhcpd: iscdhcpd
J: j
Java: java
JavaScript: js, javascript
JSON: json
Julia: julia, jl
Jungle: jungle
Kotlin: kotlin
Lighttpd configuration file: lighty, lighttpd
LLVM: llvm
Lua: lua
Makefile: make, makefile, mf, bsdmake
Mako: mako
markdown: md, mkd
Mason: mason
Materialize SQL dialect: materialize, mzsql
Mathematica: mathematica, mma, nb
Matlab: matlab
mcfunction: mcfunction
Meson: meson, meson.build
Metal: metal
MiniZinc: minizinc, MZN, mzn
MLIR: mlir
Modula-2: modula2, m2
MonkeyC: monkeyc
MorrowindScript: morrowind, mwscript
Myghty: myghty
MySQL: mysql, mariadb
NASM: nasm
Natural: natural
NDISASM: ndisasm
Newspeak: newspeak
Nginx configuration file: nginx
Nim: nim, nimrod
Nix: nixos, nix
Objective-C: objective-c, objectivec, obj-c, objc
ObjectPascal: objectpascal
OCaml: ocaml
Octave: octave
Odin: odin
OnesEnterprise: ones, onesenterprise, 1S, 1S:Enterprise
OpenEdge ABL: openedge, abl, progress, openedgeabl
OpenSCAD: openscad
Org Mode: org, orgmode
PacmanConf: pacmanconf
Perl: perl, pl
PHP: php, php3, php4, php5
PHTML: phtml
Pig: pig
PkgConfig: pkgconfig
PL/pgSQL: plpgsql
plaintext: text, plain, no-highlight
Plutus Core: plutus-core, plc
Pony: pony
PostgreSQL SQL dialect: postgresql, postgres
PostScript: postscript, postscr
POVRay: pov
PowerQuery: powerquery, pq
PowerShell: powershell, posh, ps1, psm1, psd1, pwsh
Prolog: prolog
Promela: promela
PromQL: promql
properties: java-properties
Protocol Buffer: protobuf, proto
PRQL: prql
PSL: psl
Puppet: puppet
Python: python, py, sage, python3, py3
Python 2: python2, py2
QBasic: qbasic, basic
QML: qml, qbs
R: splus, s, r
Racket: racket, rkt
Ragel: ragel
Raku: perl6, pl6, raku
react: jsx, react
ReasonML: reason, reasonml
reg: registry
Rego: rego
reStructuredText: rst, rest, restructuredtext
Rexx: rexx, arexx
RPMSpec: spec
Ruby: rb, ruby, duby
Rust: rust, rs
SAS: sas
Sass: sass
Scala: scala
Scheme: scheme, scm
Scilab: scilab
SCSS: scss
Sed: sed, gsed, ssed
Sieve: sieve
Smali: smali
Smalltalk: smalltalk, squeak, st
Smarty: smarty
Snobol: snobol
Solidity: sol, solidity
SourcePawn: sp
SPARQL: sparql
SQL: sql
SquidConf: squidconf, squid.conf, squid
Standard ML: sml
stas
Stylus: stylus
Svelte: svelte
Swift: swift
SYSTEMD: systemd
systemverilog: systemverilog, sv
TableGen: tablegen
Tal: tal, uxntal
TASM: tasm
Tcl: tcl
Tcsh: tcsh, csh
Termcap: termcap
Terminfo: terminfo
Terraform: terraform, tf
TeX: tex, latex
Thrift: thrift
TOML: toml
TradingView: tradingview, tv
Transact-SQL: tsql, t-sql
Turing: turing
Turtle: turtle
Twig: twig
TypeScript: ts, tsx, typescript
TypoScript: typoscript
TypoScriptCssData: typoscriptcssdata
TypoScriptHtmlData: typoscripthtmldata
ucode
V: v, vlang
V shell: vsh, vshell
Vala: vala, vapi
VB.net: vb.net, vbnet
verilog: verilog, v
VHDL: vhdl
VHS: vhs, tape, cassette
VimL: vim
vue: vue, vuejs
WDTE
WebGPU Shading Language: wgsl
Whiley: whiley
XML: xml
Xorg: xorg.conf
YAML: yaml
YANG: yang
Z80 Assembly: z80
Zed: zed
Zig: zig

配置语法高亮器

生成语法高亮器 CSS

高亮短代码

示例：高亮短代码

高亮 Hugo/Go 模板代码

高亮模板函数

代码围栏中的高亮

Chroma 高亮语言列表

Last updated: January 10, 2025: 添加 gtm 谷歌代码管理 (6220bf5)