Is there a way to emphasize lines with highlight.js?
For instance by coloring them differently, changing the background color, or other means.
Emphasizing lines with highlight.js
Asked Answered
You can use the HTML5's mark tag.
Let's take this block of Java code as an example:
<pre><code>
View.OnClickListener listener = new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("TAG", "Clicked!");
}
};
</code></pre>
which will be displayed as following:
and add a gray-on-yellow highlight for a part of the code:
<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>
which will result as:
You can also use highlightjs-highlight-lines.js.
This plugin enables you to emphasize some lines with background-color css.
The usage is below code, so you have only to add one line and one code into your HTML page.
<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/[email protected]/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>
Then, the result of the first <pre><code></code></pre> will look like this:
© 2022 - 2024 — McMap. All rights reserved.
<mark></mark>withoutclass="highlight-inline"worked better for me. This way the font color of highlight.js is preserved. – Kirchner