Skip to content
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
Closed

Highlight specified line(s) in source code #1133

szpak opened this issue Feb 15, 2015 · 6 comments

Comments

@szpak
Copy link

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
Copy link

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
Copy link
Author

szpak commented Feb 15, 2015

Good idea. Reported as #740.

@wsmoak
Copy link
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
Copy link
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
Copy link
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
Copy link
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 as completed Mar 4, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants