在Hugo中突出显示某些代码片段（diff、mark）

2019-01-12 10:14:30 +08  字数：814  标签： Hugo Markdown

有时，展示的代码虽多，却只需要着重强调几行。 比如，在《配置yapf和isort的Vim与Pytest插件》中，有以下配置。

[tool:pytest]
addopts = --verbose
          --isort
          --yapf
          ...
isort_ignore = setup.py

[isort]
...

[yapf]
...

展示这个配置的目的，是想要强调--isort和--yapf那两行。 但是，上面的代码块不够直观。

diff ¶

一种做法是使用diff作为language。

  [tool:pytest]
  addopts = --verbose
+           --isort
+           --yapf
            ...
  isort_ignore = setup.py

  [isort]
  ...

  [yapf]
  ...

在Markdown中，上面的代码写法如下：

```diff
  [tool:pytest]
  addopts = --verbose
+           --isort
+           --yapf
            ...
  isort_ignore = setup.py

  [isort]
  ...

  [yapf]
  ...
```

也就是把语言换成了diff，并且在特点行前加上+。 +在diff中表示添加一行，也可以使用-表示删除一行。

这种做法的好处是，修改简单，效果明显。 缺点是，丢了原先的代码高亮信息。

mark ¶

如果要保留代码高亮，再突出显示，则可以用HTML的<mark>。 本质上，一个Markdown其实就是一个HTML。

[tool:pytest]
addopts = --verbose
          --isort
          --yapf
          ...
isort_ignore = setup.py

[isort]
...

[yapf]
...

以上代码在Markdown中的写法如下：

<pre><code class="language-ini">[tool:pytest]
addopts = --verbose
<mark>          --isort
          --yapf</mark>
          ...
isort_ignore = setup.py

[isort]
...

[yapf]
...
</code></pre>

……是的，非常复杂且丑陋，其实就是在写HTML。

<pre><code></code></pre>替换了六个反引号，只有这样里面才能用<mark>。 并且，<code>还需加入class="language-ini"。 这是因为，需要以这种方式直接通知Highlight.js（或其它代码高亮引擎）语言是什么。 而且，为了避免第一行无端空出，还需要把第一行代码顶在<pre><code>上。

在某些场景下，由于高亮过多，黄色的默认高亮效果不佳。 如果只针对黑底的代码块，可以选用白色、或灰色。 这样可以避免多数情况下的色差过小，当然，也不太美观。

pre code mark {
    background-color: grey;
}

效果如下：

#include "stdio.h"int main(void)
{
    printf("Hello world!");
    return 0;
}

对本站这样没有太多颜色的Monokai配色来说，白色的<mark>效果还勉强能接受。 其它配色方案，就只能自己调整了。