Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Emphasizing lines with highlight.js

Tags:

highlight.js

Is there a way to emphasize lines with highlight.js?

For instance by coloring them differently, changing the background color, or other means.

like image 566
user3761898 Avatar asked Mar 20 '15 18:03

user3761898


People also ask

Why doesn’t highlight JS support line numbers?

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.

How do I use highlight JS on a web page?

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.

How to use line highlighting without line numbers in reveal?

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!

How do I use the highlighting features in reveal?

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.


1 Answers

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(&#x22;TAG&#x22;, &#x22;Clicked!&#x22;);
    }
};
</code></pre>

which will be displayed as following:

highlightjs-1

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(&#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>

which will result as:

enter image description here

like image 193
Alex Lipov Avatar answered Sep 28 '22 01:09

Alex Lipov