シンタックスハイライト

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/ では、入手可能なスタイルが示されています。

Hightlight ショートコード

ハイライト処理は組み込みのhighlight ショートコードによって実現されます。 It takes exactly one required argument for the programming language to be highlighted and requires a closing tag.

オプションは以下です。

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.

ハイライトショートコードの例

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

Gives this:

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


// 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 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.

{{</* myshortcode */>}}

Gives this:

{{< myshortcode >}}

ハイライトテンプレート関数

Highlight を参照してください。

Highlighting in code fences

Highlighting in code fences is enabled by default.

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

Gives this:

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


// 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)
  }
}

The options are the same as in the highlighting 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):

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

シンタックスハイライト