语法高亮

Zola 带有内置的语法高亮，但你首先需要在配置中启用它。

完成此操作后，Zola 将自动突出显示您内容中的所有代码块。Markdown 中的代码块如下所示：

```rust
let highlight = true;
```

您可以替换rust为另一种语言或不放置任何内容以使文本被解释为纯文本。

以下是受支持语言及其简称的完整列表：

- ActionScript -> ["as"]
- Advanced CSV -> ["csv", "tsv"]
- AppleScript -> ["applescript", "script editor"]
- ASP -> ["asa"]
- Assembly x86 (NASM) -> ["asm", "inc", "nasm"]
- AWK -> ["awk"]
- Batch File -> ["bat", "cmd"]
- BibTeX -> ["bib"]
- Bourne Again Shell (bash) -> [".bash_aliases", ".bash_completions", ".bash_functions", ".bash_login", ".bash_logout", ".bash_profile", ".bash_variables", ".bashrc", ".ebuild", ".eclass", ".profile", ".textmate_init", ".zlogin", ".zlogout", ".zprofile", ".zshenv", ".zshrc", "PKGBUILD", "ash", "bash", "sh", "zsh"]
- C -> ["c", "h"]
- C# -> ["cs", "csx"]
- C++ -> ["C", "c++", "cc", "cp", "cpp", "cxx", "h", "h++", "hh", "hpp", "hxx", "inl", "ipp"]
- Clojure -> ["clj", "cljc", "cljs", "edn"]
- ClojureC -> ["boot", "clj", "cljc", "cljs", "cljx"]
- CMake -> ["CMakeLists.txt", "cmake"]
- CMake C Header -> ["h.in"]
- CMake C++ Header -> ["h++.in", "hh.in", "hpp.in", "hxx.in"]
- CMakeCache -> ["CMakeCache.txt"]
- Crystal -> ["cr"]
- CSS -> ["css", "css.erb", "css.liquid"]
- D -> ["d", "di"]
- Dart -> ["dart"]
- Diff -> ["diff", "patch"]
- Dockerfile -> ["Dockerfile", "dockerfile"]
- EDN -> ["edn"]
- Elixir -> ["ex", "exs"]
- Elm -> ["elm"]
- Erlang -> ["Emakefile", "emakefile", "erl", "escript", "hrl"]
- F# -> ["fs", "fsi", "fsx"]
- Fortran (Fixed Form) -> ["F", "F77", "FOR", "FPP", "f", "f77", "for", "fpp"]
- Fortran (Modern) -> ["F03", "F08", "F90", "F95", "f03", "f08", "f90", "f95"]
- Fortran Namelist -> ["namelist"]
- Friendly Interactive Shell (fish) -> ["fish"]
- GDScript (Godot Engine) -> ["gd"]
- Generic Config -> [".dircolors", ".gitattributes", ".gitignore", ".gitmodules", ".inputrc", "Doxyfile", "cfg", "conf", "config", "dircolors", "gitattributes", "gitignore", "gitmodules", "ini", "inputrc", "mak", "mk", "pro"]
- Git Attributes -> [".gitattributes", "attributes", "gitattributes"]
- Git Commit -> ["COMMIT_EDITMSG", "MERGE_MSG", "TAG_EDITMSG"]
- Git Config -> [".gitconfig", ".gitmodules", "gitconfig"]
- Git Ignore -> [".gitignore", "exclude", "gitignore"]
- Git Link -> [".git"]
- Git Log -> ["gitlog"]
- Git Mailmap -> [".mailmap", "mailmap"]
- Git Rebase Todo -> ["git-rebase-todo"]
- GLSL -> ["comp", "frag", "fs", "fsh", "fshader", "geom", "glsl", "gs", "gsh", "gshader", "tesc", "tese", "vert", "vs", "vsh", "vshader"]
- Go -> ["go"]
- GraphQL -> ["gql", "graphql", "graphqls"]
- Graphviz (DOT) -> ["DOT", "dot", "gv"]
- Groovy -> ["Jenkinsfile", "gradle", "groovy", "gvy"]
- Handlebars -> ["handlebars", "handlebars.html", "hbr", "hbrs", "hbs", "hdbs", "hjs", "mu", "mustache", "rac", "stache", "template", "tmpl"]
- Haskell -> ["hs"]
- HTML -> ["htm", "html", "shtml", "xhtml"]
- HTML (ASP) -> ["asp"]
- HTML (EEx) -> ["html.eex", "html.leex"]
- HTML (Erlang) -> ["yaws"]
- HTML (Jinja2) -> ["htm.j2", "html.j2", "xhtml.j2", "xml.j2"]
- HTML (Rails) -> ["erb", "html.erb", "rails", "rhtml"]
- HTML (Tcl) -> ["adp"]
- Java -> ["bsh", "java"]
- Java Properties -> ["properties"]
- Java Server Page (JSP) -> ["jsp"]
- JavaScript -> ["htc", "js"]
- JavaScript (Rails) -> ["js.erb"]
- Jinja2 -> ["j2", "jinja", "jinja2"]
- JSON -> ["Pipfile.lock", "ipynb", "json", "sublime-build", "sublime-color-scheme", "sublime-commands", "sublime-completions", "sublime-keymap", "sublime-macro", "sublime-menu", "sublime-mousemap", "sublime-project", "sublime-settings", "sublime-theme"]
- Julia -> ["jl"]
- Kotlin -> ["kt", "kts"]
- LaTeX -> ["ltx", "tex"]
- Less -> ["css.less", "less"]
- Linker Script -> ["ld"]
- Lisp -> ["cl", "clisp", "el", "fasl", "l", "lisp", "lsp", "mud", "scm", "ss"]
- Literate Haskell -> ["lhs"]
- lrc -> ["lrc", "lyric"]
- Lua -> ["lua"]
- Makefile -> ["GNUmakefile", "Makefile", "Makefile.am", "Makefile.in", "OCamlMakefile", "mak", "make", "makefile", "makefile.am", "makefile.in", "mk"]
- Markdown -> ["markdn", "markdown", "md", "mdown"]
- MATLAB -> ["matlab"]
- MiniZinc (MZN) -> ["dzn", "mzn"]
- NAnt Build File -> ["build"]
- Nim -> ["nim", "nims"]
- Nix -> ["nix"]
- Objective-C -> ["h", "m"]
- Objective-C++ -> ["M", "h", "mm"]
- OCaml -> ["ml", "mli"]
- OCamllex -> ["mll"]
- OCamlyacc -> ["mly"]
- Pascal -> ["dpr", "p", "pas"]
- Perl -> ["pc", "pl", "pm", "pmc", "pod", "t"]
- PHP -> ["php", "php3", "php4", "php5", "php7", "phps", "phpt", "phtml"]
- Plain Text -> ["txt"]
- PowerShell -> ["ps1", "psd1", "psm1"]
- Protocol Buffer -> ["proto", "protodevel"]
- Protocol Buffer (TEXT) -> ["pb.txt", "pbtxt", "proto.text", "prototxt", "textpb"]
- PureScript -> ["purs"]
- Python -> ["SConscript", "SConstruct", "Sconstruct", "Snakefile", "bazel", "bzl", "cpy", "gyp", "gypi", "pxd", "pxd.in", "pxi", "pxi.in", "py", "py3", "pyi", "pyw", "pyx", "pyx.in", "rpy", "sconstruct", "vpy", "wscript"]
- R -> ["R", "Rprofile", "r"]
- Racket -> ["rkt"]
- Rd (R Documentation) -> ["rd"]
- Reason -> ["re", "rei"]
- Regular Expression -> ["re"]
- Regular Expressions (Elixir) -> ["ex.re"]
- reStructuredText -> ["rest", "rst"]
- Ruby -> ["Appfile", "Appraisals", "Berksfile", "Brewfile", "Cheffile", "Deliverfile", "Fastfile", "Gemfile", "Guardfile", "Podfile", "Rakefile", "Rantfile", "Scanfile", "Snapfile", "Thorfile", "Vagrantfile", "capfile", "cgi", "config.ru", "fcgi", "gemspec", "irbrc", "jbuilder", "podspec", "prawn", "rabl", "rake", "rb", "rbx", "rjs", "ruby.rail", "simplecov", "thor"]
- Ruby Haml -> ["haml", "sass"]
- Ruby on Rails -> ["builder", "rxml"]
- Rust -> ["rs"]
- Sass -> ["sass"]
- Scala -> ["sbt", "sc", "scala"]
- SCSS -> ["scss"]
- SQL -> ["ddl", "dml", "sql"]
- SQL (Rails) -> ["erbsql", "sql.erb"]
- srt -> ["srt", "subrip"]
- Stylus -> ["styl", "stylus"]
- SWI-Prolog -> ["pro"]
- Swift -> ["swift"]
- Tcl -> ["tcl"]
- TeX -> ["cls", "sty"]
- Textile -> ["textile"]
- TOML -> ["Cargo.lock", "Gopkg.lock", "Pipfile", "tml", "toml"]
- TypeScript -> ["ts"]
- TypeScriptReact -> ["tsx"]
- VimL -> ["vim"]
- XML -> ["dtml", "opml", "rng", "rss", "svg", "tld", "xml", "xsd", "xslt"]
- YAML -> ["sublime-syntax", "yaml", "yml"]
- Zig -> ["zig"]

注意：由于 JavaScript 语法的一些问题，将改用 TypeScript 语法。

如果您想突出显示不在此列表中的语言，请在Zola repo上打开一个问题或一个拉取请求。或者，extra_syntaxes_and_themes配置选项可用于添加额外的语法（和主题）文件。

如果您的站点源布局如下：

.
├── config.toml
├── content/
│   └── ...
├── static/
│   └── ...
├── syntaxes/
│   ├── Sublime-Language1/
│   │   └── lang1.sublime-syntax
│   └── lang2.sublime-syntax
└── templates/
    └── ...

你会设置你extra_syntaxes_and_themes的["syntaxes", "syntaxes/Sublime-Language1"]加载lang1.sublime-syntax和lang2.sublime-syntax。

您可以在配置页面上看到可用主题的列表。

🔗内联 VS 分类高亮

如果你使用像这样的高亮方案

highlight_theme = "base16-ocean-dark"

对于像这样的代码块

```rs
let highlight = true;
```

你得到直接编码在 html 文件中的颜色。

<pre class="language-rs" style="background-color:#2b303b;">
    <code class="language-rs">
        <span style="color:#b48ead;">let</span>
        <span style="color:#c0c5ce;"> highlight = </span>
        <span style="color:#d08770;">true</span>
        <span style="color:#c0c5ce;">;
    </span>
  </code>
</pre>

这很好，因为如果所有内容都在一个文件中，您的页面加载速度会更快。但是如果你想让用户从列表中选择一个主题，或者对深色/浅色配色方案使用不同的配色方案，你需要一个不同的解决方案。

如果你使用特殊css配色方案

highlight_theme = "css"

相反，您会得到 CSS 类定义。

<pre class="language-rs">
    <code class="language-rs">
        <span class="z-source z-rust">
            <span class="z-storage z-type z-rust">let</span> highlight
            <span class="z-keyword z-operator z-assignment z-rust">=</span>
            <span class="z-constant z-language z-rust">true</span>
            <span class="z-punctuation z-terminator z-rust">;</span>
        </span>
    </code>
</pre>

staticZola 可以使用该选项为目录中的主题输出一个 css 文件highlight_themes_css。

highlight_themes_css = [
  { theme = "base16-ocean-dark", filename = "syntax-theme-dark.css" },
  { theme = "base16-ocean-light", filename = "syntax-theme-light.css" },
]

然后你可以像这样支持明暗模式：

@import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
@import url("syntax-theme-light.css") (prefers-color-scheme: light);

或者，您可以在基本模板中引用样式表以减少请求链：

<head>
  <!-- Other content -->
  <link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
  <link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
</head>

主题可以有条件地包含代码高亮样式表<link>标签，方法是将它们包装在条件中：

{% if config.markdown.highlight_code and config.markdown.highlight_theme == "css" %}
<link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
{% endif %}

🔗注释

您可以使用其他注释来自定义代码块的显示方式：

linenos启用行编号。

```rust,linenos
use highlighter::highlight;
let code = "...";
highlight(code);
```

linenostart指定第一行的数字（默认为 1）

```rust,linenos,linenostart=20
use highlighter::highlight;
let code = "...";
highlight(code);
```

hl_lines突出线条。您必须指定要突出显示的行的包含范围列表，以（空格）分隔。范围是从 1 开始索引的并且linenostart不影响值，它总是指代码块行号。

```rust,hl_lines=1 3-5 9
use highlighter::highlight;
let code = "...";
highlight(code);
```

hide_lines隐藏线条。您必须指定要隐藏的行的包含范围列表，以（空格）分隔。范围是 1 索引的。

```rust,hide_lines=1-2
use highlighter::highlight;
let code = "...";
highlight(code);
```

🔗样式代码块

根据所使用的注释，一些代码块在没有任何 CSS 的情况下将难以阅读。我们建议在您的网站中使用以下代码段：

pre {
  padding: 1rem;
  overflow: auto;
}
// The line numbers already provide some kind of left/right padding
pre[data-linenos] {
  padding: 1rem 0;
}
pre table td {
  padding: 0;
}
// The line number cells
pre table td:nth-of-type(1) {
  text-align: center;
  user-select: none;
}
pre mark {
  // If you want your highlights to take the full width.
  display: block;
  // The default background colour of a mark is bright yellow
  background-color: rgba(254, 252, 232, 0.9);
}
pre table {
  width: 100%;
  border-collapse: collapse;
}

此代码段使突出显示在整个宽度上起作用，并确保用户无需选择行号即可复制内容。显然，您可能需要调整它以适应您的网站风格。

这是一个使用了所有选项的示例：scss, linenos, linenostart=10, hl_lines=3-4 8-9, hide_lines=2 7上面的代码片段。

10 pre mark {
12   display: block;
13   color: currentcolor;
14 }
15 pre table td:nth-of-type(1) {
17   color: #6b6b6b;
18   font-style: italic;
19 }

第 2 行和第 7 行是最终输出中未显示的注释。

当行号处于活动状态时，代码块将变成一个包含一行和两个单元格的表格。第一个单元格包含行号，第二个单元格包含代码。突出显示是通过<mark>HTML 标记完成的。当突出显示带有行号的行时，<mark>将创建两个标签：一个围绕行号，一个围绕代码。

🔗自定义高亮主题

语法突出显示的默认主题称为base16-ocean-dark，您可以使用配置选项从内置的突出显示主题集中选择另一个主题highlight_theme。例如，此文档站点当前使用kronuz内置的主题。

[markdown]
highlight_code = true
highlight_theme = "kronuz"

或者，extra_syntaxes_and_themes配置选项可用于添加其他主题文件。您可以从 TextMate 文件加载自己的突出显示主题.tmTheme。

它的工作方式与添加额外语法的方式相同。它应该包含指向包含您要包含的 .tmTheme 文件的文件夹的路径列表。然后您将设置highlight_theme为这些文件之一的名称，不带.tmTheme扩展名。

如果您的站点源布局如下：

.
├── config.toml
├── content/
│   └── ...
├── static/
│   └── ...
├── highlight_themes/
│   ├── MyGroovyTheme/
│   │   └── theme1.tmTheme
│   ├── theme2.tmTheme
└── templates/
    └── ...

你会设置你extra_syntaxes_and_themes的["highlight_themes", "highlight_themes/MyGroovyTheme"]加载theme1.tmTheme和theme2.tmTheme。然后通过设置选择其中一个来使用，比如theme1 highlight_theme = theme1。

10	pre mark {
12	display: block;
13	color: currentcolor;
14	}
15	pre table td:nth-of-type(1) {
17	color: #6b6b6b;
18	font-style: italic;
19	}