Question

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

例如，通过不同的着色，更改背景颜色或其他方式。

Answer 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>

将导致：

Answer 2

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

此插件使您可以使用背景色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>的结果就是这个picture。

强调使用highlight.js的行

2 个答案: