在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>
效果还勉强能接受。
其它配色方案,就只能自己调整了。