Hugo 如何实现网站代码高亮

Hugo 自带一个内置的代码高亮功能,可以通过在文章中使用 ``` 标记来实现。这种方式比较简单,只需要在代码块前后添加 ``` 即可,不需要手动指定编程语言。Hugo 会根据代码的语法自动应用合适的高亮样式。下面是一个示例:

```javascript
function hello() {
  console.log('Hello, world!');
}
```

内置的代码高亮功能使用 Chroma 作为语法高亮引擎,Chroma 支持广泛的编程语言,能够提供较为准确的高亮效果。不过,Chroma 的高亮样式较为简单,需要更复杂的高亮效果,可以考虑使用第三方的高亮库。

除 Hugo 内置的代码高亮功能,我们还可以使用第三方的高亮库。其中最常用的是 Prism.js 和 Highlight.js。这两个库都提供丰富的高亮样式,并支持大量的编程语言。

要在 Hugo 中使用 Prism.js,需要在网站的 layouts/partials/ 目录下创建一个 head.html 文件,并在其中引入 Prism.js 的 CSS 和 JavaScript 文件。下面是一个示例:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>

在文章中使用 ```language 的语法来指定编程语言,Prism.js 就会自动应用相应的高亮样式。例如:

```javascript
function hello() {
  console.log('Hello, world!');
}
```

使用 Highlight.js 的方式与 Prism.js 类似,只需要在 head.html 文件中引入 Highlight.js 的 CSS 和 JavaScript 文件即可。

内置的高亮样式和第三方库提供的样式都不满足你的需求,你还可以自定义高亮样式。在 Hugo 中,可以在网站的 assets/css/ 目录下创建一个 CSS 文件,并在 head.html 中引入该文件。你可以根据自己的需求修改高亮样式的 CSS 规则。

例如,你可以修改代码块的背景色、字体颜色、边框样式等,以达到你想要的效果。下面是一个示例:

pre {
  background-color: #f8f8f8;
  padding: 1em;
  border-radius: 4px;
  font-size: 0.9em;
  overflow-x: auto;
}

code {
  font-family: 'Courier New', monospace;
  color: #333;
}

.hljs-keyword {
  color: #c7254e;
}

.hljs-string {
  color: #a71d5d;
}

通过这种方式,你可以完全自定义代码高亮的样式,满足你的个性化需求。

Hugo 提供多种实现网站代码高亮的方式。内置的代码高亮功能简单易用,但样式较为简单;使用第三方高亮库如 Prism.js 和 Highlight.js 可以获得更丰富的高亮样式,但需要额外引入库文件;自定义高亮样式可以完全满足个性化需求,但需要一定的 CSS 编码能力。根据具体需求,可以选择合适的方式来实现网站代码的高亮显示。