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

有时,展示的代码虽多,却只需要着重强调几行。 比如,在《配置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>效果还勉强能接受。 其它配色方案,就只能自己调整了。


相关笔记