Hugo 如何实现代码高亮

Hugo内置代码高亮功能,开发者可以直接使用它来渲染代码块。要启用这个功能,需要在Hugo的配置文件(通常是config.toml或config.yaml)中设置以下参数:

pygmentsCodeFences = true
pygmentsUseClasses = true

设置 pygmentsCodeFences = true 可以让Hugo识别基于围栏的代码块,而 pygmentsUseClasses = true 则使用CSS类来高亮代码。

使用这种方式,您只需在Markdown文件中使用三个反引号(```)包围代码块,Hugo就会自动应用代码高亮:

```javascript
function hello() {
  console.log("Hello, World!");
}
```

Hugo会根据代码块中使用的语言自动应用合适的高亮样式。您也可以在代码块开头指定语言,以便Hugo正确地识别代码的类型:

```python
def fibonacci(n):
    if n <= 1:
        return n
    else:
        return(fibonacci(n-1) + fibonacci(n-2))
```

除使用Hugo内置的代码高亮功能外,您也可以选择使用第三方高亮库,如Chroma或Highlight.js。这些库提供更丰富的高亮样式选择,并且可以更好地与您的网站主题集成。

使用Chroma

要使用Chroma,需要在Hugo的配置文件中进行如下设置:

pygmentsUseClasses = true
pygmentsCodeFences = true
pygmentsCodeFencesGateWidth = true

与使用Hugo内置高亮功能类似,您只需在Markdown文件中使用三个反引号包围代码块,Hugo就会自动应用Chroma的高亮样式。Chroma提供大量的高亮样式,您可以在配置文件中设置 pygmentsStyle 参数来选择合适的样式。

使用Highlight.js

您更喜欢使用Highlight.js,则需要先在项目中引入Highlight.js库。您可以在Hugo的布局文件(如基础模板)中添加以下代码来引入Highlight.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

引入Highlight.js后,您可以在Markdown文件中使用 <pre><code> 标签包围代码块,Highlight.js会自动为代码块应用高亮样式。您也可以在 <code> 标签中指定语言,以便Highlight.js正确地识别代码的类型:

<pre><code class="language-javascript">
function hello() {
  console.log("Hello, World!");
}
</code></pre>

无论使用Hugo内置的高亮功能还是第三方库,您都可以通过自定义CSS样式来调整代码块的外观。这可以让您的网站代码高亮与整体设计更好地协调。您可以在项目的CSS文件中添加自定义样式,例如:

.highlight pre {
  background-color: #f8f8f8;
  padding: 1em;
  border-radius: 4px;
}

.highlight .hl {
  background-color: #e6e6e6;
}

通过这种方式,您可以控制代码块的背景颜色、字体、边距等属性,从而实现与网站主题更好的视觉协调。

代码高亮是构建静态网站时的一个重要功能。Hugo提供多种方式来实现代码高亮,包括使用内置的高亮功能以及引入第三方高亮库。无论选择哪种方式,您都可以通过自定义CSS样式来调整代码块的外观,以确保它们与您的网站设计协调一致。通过合理利用这些功能,您可以为网站的开发者和访问者提供更好的体验。