New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlight specified line(s) in source code #1133

Closed
szpak opened this Issue Feb 15, 2015 · 6 comments

Comments

Projects
None yet
4 participants
@szpak

szpak commented Feb 15, 2015

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/

@Delapouite

This comment has been minimized.

Show comment
Hide comment
@Delapouite

Delapouite Feb 15, 2015

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.

Delapouite commented Feb 15, 2015

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.

@szpak

This comment has been minimized.

Show comment
Hide comment
@szpak

szpak Feb 15, 2015

Good idea. Reported as #740.

szpak commented Feb 15, 2015

Good idea. Reported as #740.

@wsmoak

This comment has been minimized.

Show comment
Hide comment
@wsmoak

wsmoak Sep 12, 2015

Contributor

Did anyone get this working? highlightjs/highlight.js#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.

Contributor

wsmoak commented Sep 12, 2015

Did anyone get this working? highlightjs/highlight.js#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.

@wsmoak

This comment has been minimized.

Show comment
Hide comment
@wsmoak

wsmoak Sep 12, 2015

Contributor

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>
Contributor

wsmoak commented Sep 12, 2015

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>
@wsmoak

This comment has been minimized.

Show comment
Hide comment
@wsmoak

wsmoak Sep 13, 2015

Contributor

I opened #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

Contributor

wsmoak commented Sep 13, 2015

I opened #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

@bnjmnt4n

This comment has been minimized.

Show comment
Hide comment
@bnjmnt4n

bnjmnt4n Mar 4, 2016

Collaborator

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

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

Collaborator

bnjmnt4n commented Mar 4, 2016

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

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

@bnjmnt4n bnjmnt4n closed this Mar 4, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment