使用highlight.js强调行
使用highlight.js强调行
提问于 2015-03-21 02:07:07
有没有办法用highlight.js来强调代码行？
例如通过对它们进行不同的着色、改变背景颜色或其它手段。
回答 2
Stack Overflow用户
发布于 2016-07-24 05:00:47
你可以使用html5的mark标签。
让我们以这段Java代码为例：
<pre><code>
View.OnClickListener listener = new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("TAG", "Clicked!");
}
};
</code></pre>它将显示如下：
并为代码的一部分添加灰色-黄色突出显示：
<pre><code>
View.OnClickListener listener = <mark class="highlight-inline">new View.OnClickListener() {
@Override
public void onClick</mark>(View v) {
Log.d("TAG", "Clicked!");
<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>这将导致：
Stack Overflow用户
发布于 2019-02-27 16:38:17
您也可以使用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>的结果将如下所示：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29173081
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号