Is there a way to emphasize lines with highlight.js?
For instance by coloring them differently, changing the background color, or other means.
Highlight.js’ notable lack of line numbers support is not an oversight but a feature. Following is an explanation from the original author: One of the defining design principles for Highlight.js from the start was simplicity.
Please see SECURITY.md for long-term support information. The bare minimum for using highlight.js on a web page is linking to the library along with one of the themes and calling highlightAll: This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically.
There is no Reveal.js parameter to use line highlighting without line numbers. However it can be achieved by adding the some custom CSS. Thanks!
This presentation shows the use of the new highlighting features which were introduced with Reveal.js v3.9.0. Disable codeFences in to your config.toml to prevent Hugo’s built-in highlighting for code inside of --- fences. The line highlighting is configured by adding {} immediately after the language selection of the markdown code block.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With