Remark: Ability to highlight selected line(s) in source code

[szpak]

It would be useful to provide a way to highlight selected line(s) in source code to pay audience attention on specific aspect(s).

[gnab]

I agree. Were you thinking like clicking to toggle highlighting on a per-basis for instance?

[szpak]

Although it could be sometimes useful to toggle highlighting with clicking on the line in the basic case I thought just about static source code and the ability to highlight selected lines in markdown code. Maybe (as an additional feature) it could be merged into a template engine to allow highlight line(s) on the next slide with minimal content duplication.

[gnab]

With the change I've added now, code lines are wrapped in <div class="remark-code-line">...</div>, and if a line has a leading *, it is trimmed and the remark-code-line-highlighted class is added as well.

Example code block snippet:

``````

function add (a, b) {
*  return a + b;
}

``````

The default styling makes the line be yellow with .5 opacity (rgba(255, 255, 0, 0.5)), and can easily be overridden by defining a background for the remark-code-line-highlighted class.

This will be included in the upcoming version 0.6.5.

[gnab]

0.6.5 has now been released.

Highlighting demo: http://jsfiddle.net/96Sws/1/

[szpak]

@gnab, your are really fast, thanks!

[xatier]

I'd like to ask a question.

Is there a way to turn this feature off temporarily?

Sometimes I really need a leading * in my code section. For example,

---

git branch demo

$ git branch
* master

---

Thank you!

[gnab]

Currently not, but I'll make it configurable.

[skyronic]

Has this feature been disabled now? The demos are not working. How do I bring it back?

[skyronic]

Ok after digging through the code a bit I found that this has to be enabled manually using

      var slideshow = remark.create({
        highlightLines: true
      });

then it works. Leaving it here for anyone else who gets stuck. Thanks!