用 highlight.js 强调线条答案

【问题标题】：Emphasizing lines with highlight.js用 highlight.js 强调线条
【发布时间】：2015-05-24 05:58:41
【问题描述】：

有没有办法用 highlight.js 强调线条？

例如通过对它们进行不同的着色、更改背景颜色或其他方式。

【问题讨论】：

【解决方案1】：

您可以使用 HTML5 的 mark 标签。
我们以这段Java代码为例：

<pre><code>
View.OnClickListener listener = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.d(&#x22;TAG&#x22;, &#x22;Clicked!&#x22;);
    }
};
</code></pre>

会显示如下：

并为部分代码添加黄底灰高亮：

<pre><code>
View.OnClickListener listener = <mark class="highlight-inline">new View.OnClickListener() {
    @Override
    public void onClick</mark>(View v) {
        Log.d(&#x22;TAG&#x22;, &#x22;Clicked!&#x22;);
    <mark class="highlight-inline">}</mark>
};
</code></pre>

<style type="text/css">
.highlight-inline {
    background:yellow;
    color:gray;
}
.highlight-inline span {
    background:inherit;
    color:inherit;
}
</style>

结果如下：

【讨论】：

<mark></mark> 没有class="highlight-inline" 对我来说效果更好。这样highlight.js的字体颜色就被保留了。

【解决方案2】：

您也可以使用highlightjs-highlight-lines.js。

这个插件可以让你用 background-color css 来强调一些线条。

用法在代码下面，所以你只需要在你的HTML页面中添加一行代码。

<head>
...
<link rel="stylesheet" href="path/to/default.min.css">
<script src="path/to/highlight.min.js"></script>

<!-- Add this line ↓ -->
<script src="//cdn.jsdelivr.net/gh/TRSasasusu/highlightjs-highlight-lines.js@1.1.5/highlightjs-highlight-lines.min.js"></script>
<!-- Add this line ↑ -->

<script>
hljs.initHighlightingOnLoad();

// Add this code ↓
hljs.initHighlightLinesOnLoad([
    [{start: 1, end: 3, color: '#555'}, {start: 6, end: 6, color: 'yellow'},], // Highlight line 4 from line 2 and line 7 in the first <pre><code></code></pre> block.
    [{start: 2, end: 3, color: 'rgba(255, 255, 255, 0.2)'},], // Highlight line 4 from line 3 in the second <pre><code></code></pre> block.
]);
// Add this code ↑

</script>
...
</head>

那么，第一个<pre><code></code></pre> 的结果将如下所示：

【讨论】：