Reveal.js: Highlight specified line(s) in source code

Created on 15 Feb 2015  路  6Comments  路  Source: hakimel/reveal.js

In some cases it is very useful to be able to highlight specified line(s) in source code by giving them other background (e.g. yellow).

The mentioned effect achieved with remark.js: http://jsfiddle.net/szpak/059x3ygs/1/

plugin question

Most helpful comment

Based on https://github.com/hakimel/reveal.js/blob/master/plugin/highlight/highlight.js#L14 it looks like you should be able to add a data-noescape attribute to avoid the html inside the code tag getting escaped.

<pre><code data-noescape data-trim>

All 6 comments

The highlighting is handled by https://highlightjs.org so I think this request should be open on their repo.
I would also find this useful, especially if you could highlight only a portion of a line, for example just a keyword.

Good idea. Reported as #740.

Did anyone get this working? https://github.com/isagalaev/highlight.js/issues/740 is closed with the advice that html is not escaped inside a <code> tag.

But when I try this as described on http://jsfiddle.net/tovic/059x3ygs/2/

<section>
            <pre><code data-trim>
{application, elixir,
[{description, "elixir"},
<mark class="highlight-block">{vsn, "1.1.0-20150912"}</mark>
 {modules, [
        elixir
  ]},
      </code></pre>
    </section>

It briefly flashes in yellow, but then I get the <mark> tag printed literally into the slide, not the line highlighted like I wanted.

Based on https://github.com/hakimel/reveal.js/blob/master/plugin/highlight/highlight.js#L14 it looks like you should be able to add a data-noescape attribute to avoid the html inside the code tag getting escaped.

<pre><code data-noescape data-trim>

I opened https://github.com/hakimel/reveal.js/issues/1352 to add data-noescape and <mark> to the README.

I also noticed this plugin listed on the wiki that might be useful (I haven't tried it):
Focus on specific lines of code blocks - https://github.com/d10/reveal-code-focus

Closing this for now as #1352 has already been merged, and there鈥檚 already a plugin for that (maintained by me!).

(The repo for my plugin is now at https://github.com/demoneaux/reveal-code-focus/.)

Was this page helpful?
0 / 5 - 0 ratings