12

Hugo中添加代码高亮支持

 4 years ago
source link: https://note.qidong.name/2017/06/24/hugo-highlight/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Hugo中添加代码高亮支持

2017-06-24 21:50:29 +08  字数：1625  标签： Hugo Markdown

对程序员来说，最重要的分享内容，就是代码。

自然语言，只是为了解释代码而已。

Hugo的代码高亮

很多Hugo的主题，都自带代码高亮的支持。其中，Hyde由于极简的设计，默认是没有的。

代码高亮，其实就是把包含在<pre><code>与</code></pre>之间的内容，做相应的着色。 这个过程中，最麻烦的，莫过于分辨出代码的内容。 谁是函数，谁是类，谁是数字，谁是字符串……

这个问题虽然不是很难，用正则表达式也能做出一个不错的结果，但也是件麻烦事。 幸好，已经有成熟的工具，解决了这个问题。

Hugo在官方文档中，推荐的是Pygments。 （从0.30版本开始，集成了Chroma作为替代。） 而孤则不建议使用这种后端生成的方案。

代码高亮的工作，可以在生成静态网页时做，也可以在浏览器里做。 前者的优势在于，渲染更快，并且在禁用JavaScript的环境下仍然能正常显示，而后者则更加灵活。

Pygments就是在生成时做，需要开发与生产环境下，对其进行安装。 就效果而言，其实也有一些小瑕疵。 最大的问题是，它是维护在Bitbucket上的，而孤的Bitbucket账户又……

虽然Pygments的安装简单，不过孤最终还是选择让代码高亮在浏览器里做。

代码高亮的JavaScript

通过JavaScript，让页面在浏览器里渲染时，顺便给代码上色。 Hugo官方文档推荐了以下的库：

孤考察了上述JavaScript库，最终还是选择了Highlight.js。

其实，它们多少都有些问题。 Highlight.js的问题相对少一些，文档好一些。 毕竟，不能指望一群前端工程师对其它语言有多么深入的理解。

使用Highlight.js

在<head>的模板中，添加以下内容：

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

当前（2017年），highlight.js最新版本是9.12.0。

三行代码，第一行的monokai.min.css是配色方案，孤对Monokai情有独钟。 第二行引入是highlight.js的压缩版，第三行是使用highlight.js着色。 就是这么简单。

考虑到国内的访问速度，本站改用了BootCDN。 （2019年1月开始，改用[staticfile.org]。）

<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/monokai.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

示例

在Markdown中，输入以下内容：


```c
#include 

int main(void)
{
  printf("Hello world!"),
  return 0;
}
```

转换为静态网页后，可以看到：

<pre><code class="language-c">
#include <stdio.h>

int main(void)
{
  printf("Hello world!"),
  return 0;
}
</code></pre>

这种东西，默认当然是没有代码高亮的。 但是在前面highlight.js的三行代码的帮助下， 就可以按C语言的方式匹配，最终得出以下效果。

#include <stdio.h>

int main(void)
{
  printf("Hello world!"),
  return 0;
}

其中，Markdown里标明的语言，最终会转换成language-*，帮助highlight.js识别。

如果仍然是9.12.0，你应该能明显发现，#include <stdio.h>被错误地识别为注释。 这么简单的东西都会搞错！

highlight.js只是一个最好、但仍不够好的选择。

其它语言支持

在默认的js里，支持很多常见的语言，比如HTML、Java、Python等。 但有些比较偏门的语言或配置文件，默认的js里是没有支持的。 不过，却可以通过引入额外的js来支持，比如Django、Dockerfile、Vim、YAML、Gradle、TeX等。

<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/monokai.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/django.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/dockerfile.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/vim.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/yaml.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/gradle.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/tex.min.js"></script>
...

<script>hljs.initHighlightingOnLoad();</script>

注意：这些代码需要放在highlight.min.js之后、hljs.initHighlightingOnLoad();之前。

这些额外的支持，可以在CDN提供页面去查询，按需使用。

调整pre样式

默认情况下，代码黑块周围会有一层白边。 此外，如果代码中有<Tab>，默认会使用8格缩进。 这些都需要在CSS中调整，以下是孤的配置示例。

pre {
  white-space: pre;
  overflow-x: auto;

  tab-size: 4;
  -moz-tab-size: 4;

  padding: 0;
}

心机

  1. 浏览器做代码高亮，可以减少服务器的工作。
  2. 使用CDN，减轻服务器的负担。

参考


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK