シンタックスハイライト

Hugo には、Chroma による非常に高速なシンタックスハイライトが搭載されています。

On this page

Hugo は Chroma をコードハイライターとして使用します。これは Go で構築されており、非常に高速です。また、最も重要な部分については、以前使用していた Pygments と互換性があります。

シンタックスハイライターの設定

シンタックスハイライター CSS を生成する

サイト設定で markup.highlight.noClasses=false を指定して実行する場合は、スタイルシートが必要です。

以下のコマンドにより、Hugo でシンタックスハイライター CSS を生成することができます。

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

その他のオプションは hugo gen chromastyles -h を実行してください。利用可能なスタイルのギャラリーは https://xyproto.github.io/splash/docs/ を参照してください。

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

ハイライト表示は、組み込みの highlight ショートコードを使って行われます。ハイライト表示されるプログラミング言語の必須パラメータを 1 つだけ受け取り、終了ショートコードが必要です。なお、highlight はクライアント側の JavaScript のハイライトには 使用されない ことに注意してください。

オプション:

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" >}}
// ... code
{{< / highlight >}}

上記のコードは、以下を出力します。

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

Hugo/Go テンプレートコードのハイライト

Hugo/Go のテンプレートコードをページ上でハイライト表示するには、開始の二重中括弧の後に /* を、終了の中括弧の前に */ を追加します。

{{</* myshortcode */>}}

上記のコードは、以下を出力します。

{{< myshortcode >}}

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

「highlight 関数」を参照してください。

コードフェンスでのハイライト表示

コードフェンス内のハイライト表示は、デフォルトで有効になっています。

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

上記のコードは、以下を出力します。

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

オプションは linenos=false を含むハイライトショートコードと同じですが、Markdown 属性の構文がわずかに異なることに注意してください。

Chroma ハイライト言語の一覧

以下は、Chroma レキサーとそのエイリアスの完全なリストです (これは、highlight テンプレート関数やコードフェンスでハイライト表示を行う際に使用する識別子です)。

ABAP: abap
ABNF: abnf
ActionScript: as, actionscript
ActionScript 3: as3, actionscript3
Ada: ada, ada95, ada2005
AL: al
Angular2: ng2
ANTLR: antlr
ApacheConf: apacheconf, aconf, apache
APL: apl
AppleScript: applescript
Arduino: arduino
ArmAsm: armasm
Awk: awk, gawk, mawk, nawk
Ballerina: ballerina
Bash: bash, sh, ksh, zsh, shell
BashSession: 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
CMake: cmake
COBOL: cobol
CoffeeScript: coffee-script, coffeescript, coffee
Common Lisp: common-lisp, cl, lisp
Common Lisp: common-lisp, cl, lisp
Coq: coq
Crystal: cr, crystal
CSS: css
Cython: cython, pyx, pyrex
D: d
Dart: dart
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
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
Genshi: genshi, kid, xml+genshi, xml+kid
Genshi HTML: html+genshi, html+kid
Genshi Text: genshitext
Gherkin: cucumber, Cucumber, gherkin, Gherkin
GLSL: glsl
Gnuplot: gnuplot
Go: go, golang
Go HTML Template: go-html-template
Go HTML Template: go-html-template
Go Text Template: go-text-template
GraphQL: graphql, graphqls, gql
Groff: groff, nroff, man
Groovy: groovy
Handlebars: handlebars, hbs
Haskell: haskell, hs
Haxe: hx, haxe, hxsl
HCL: hcl
Hexdump: hexdump
HLB: hlb
HLSL: hlsl
HTML: html
HTTP: http
Hy: hylang
Idris: idris, idr
Igor: igor, igorpro
INI: ini, cfg, dosini
Io: io
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
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
Newspeak: newspeak
Nginx configuration file: nginx
Nim: nim, nimrod
Nix: nixos, nix
Objective-C: objective-c, objectivec, obj-c, objc
OCaml: ocaml
Octave: octave
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
PromQL: promql
properties: java-properties
Protocol Buffer: protobuf, proto
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
reStructuredText: rst, rest, restructuredtext
Rexx: rexx, arexx
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
Smalltalk: smalltalk, squeak, st
Smarty: smarty
Snobol: snobol
Solidity: sol, solidity
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
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
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
Whiley: whiley
XML: xml
Xorg: xorg.conf
YAML: yaml
YANG: yang
Zed: zed
Zig: zig

シンタックスハイライト

シンタックスハイライターの設定

シンタックスハイライター CSS を生成する

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

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

Hugo/Go テンプレートコードのハイライト

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

コードフェンスでのハイライト表示

Chroma ハイライト言語の一覧

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

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