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 with different background specified line(s) in source code #740

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

Comments

Projects
None yet
5 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/, but I think it would be good to have it in highlight.js itself.

@Nedudi

This comment has been minimized.

Show comment
Hide comment
@Nedudi

Nedudi commented Feb 15, 2015

+1

@szpak

This comment has been minimized.

Show comment
Hide comment
@szpak

szpak Feb 15, 2015

As a bonus it would be great to have an ability to highlight only a part of given line.

szpak commented Feb 15, 2015

As a bonus it would be great to have an ability to highlight only a part of given line.

@isagalaev

This comment has been minimized.

Show comment
Hide comment
@isagalaev

isagalaev Feb 16, 2015

Member

It is already possible without any changes to highlight.js: just use normal HTML markup to highlight whatever you need in your code.

Member

isagalaev commented Feb 16, 2015

It is already possible without any changes to highlight.js: just use normal HTML markup to highlight whatever you need in your code.

@isagalaev

This comment has been minimized.

Show comment
Hide comment
@isagalaev

isagalaev Feb 16, 2015

Member

btw, @Nedudi, most engineers would automatically demote an issue to the very end of their priority queue after receiving useless "+1" on it. Kindly please don't do that anymore anywhere.

Member

isagalaev commented Feb 16, 2015

btw, @Nedudi, most engineers would automatically demote an issue to the very end of their priority queue after receiving useless "+1" on it. Kindly please don't do that anymore anywhere.

@isagalaev

This comment has been minimized.

Show comment
Hide comment
@isagalaev

isagalaev Feb 19, 2015

Member

So, to summarize. I don't want to introduce any custom syntax within highlight.js to adorn source code for a few reasons:

  • Inventing a new syntax compatible with various markup languages out there is mighty hard, and it will be a source of bugs and surprises for users who don't expect parts of their source code to be treated in a special way.
  • Implementation of such a syntax will add a whole new dimension of complexity to highlight.js.

Since highlight.js already can work with custom HTML markup, such a syntax is best left to the specialized markup processor that produces it.

Member

isagalaev commented Feb 19, 2015

So, to summarize. I don't want to introduce any custom syntax within highlight.js to adorn source code for a few reasons:

  • Inventing a new syntax compatible with various markup languages out there is mighty hard, and it will be a source of bugs and surprises for users who don't expect parts of their source code to be treated in a special way.
  • Implementation of such a syntax will add a whole new dimension of complexity to highlight.js.

Since highlight.js already can work with custom HTML markup, such a syntax is best left to the specialized markup processor that produces it.

@isagalaev isagalaev closed this Feb 19, 2015

@devurandom

This comment has been minimized.

Show comment
Hide comment
@devurandom

devurandom Mar 17, 2015

@isagalaev Could you please give an example of how to do this? From your answer I assume there are some HTML/CSS elements, which I can place external to the <code> element, that influence the visual style. But how…?

I would assume/suggest some .highlightLines(123,456) API, but I cannot find any such thing.

devurandom commented Mar 17, 2015

@isagalaev Could you please give an example of how to do this? From your answer I assume there are some HTML/CSS elements, which I can place external to the <code> element, that influence the visual style. But how…?

I would assume/suggest some .highlightLines(123,456) API, but I cannot find any such thing.

@tovic

This comment has been minimized.

Show comment
Hide comment
@tovic

tovic Mar 17, 2015

Contributor

Something like this → http://jsfiddle.net/tovic/059x3ygs/2
Another hack (line numbers) → http://jsfiddle.net/tovic/059x3ygs/3

Contributor

tovic commented Mar 17, 2015

Something like this → http://jsfiddle.net/tovic/059x3ygs/2
Another hack (line numbers) → http://jsfiddle.net/tovic/059x3ygs/3

@isagalaev

This comment has been minimized.

Show comment
Hide comment
@isagalaev

isagalaev Mar 17, 2015

Member

@devurandom by "external" I mean external to the library, so there's no API for this. I mean that one can insert arbitrary markup inside the <code> element (or invent an extension to markdown that would do that) so it would look like:

<pre><code><span class="odd">...</span>
<span class="even">...</span>
</code></pre>

And then you can call hljs.highlightBlock on this <code> element and highlight.js would keep those spans merging them with its own markup.

Member

isagalaev commented Mar 17, 2015

@devurandom by "external" I mean external to the library, so there's no API for this. I mean that one can insert arbitrary markup inside the <code> element (or invent an extension to markdown that would do that) so it would look like:

<pre><code><span class="odd">...</span>
<span class="even">...</span>
</code></pre>

And then you can call hljs.highlightBlock on this <code> element and highlight.js would keep those spans merging them with its own markup.

@devurandom

This comment has been minimized.

Show comment
Hide comment
@devurandom

devurandom Mar 17, 2015

Oh, I did not know that <code> blocks do not escape HTML tags inside. I assumed they would be printed literally.

devurandom commented Mar 17, 2015

Oh, I did not know that <code> blocks do not escape HTML tags inside. I assumed they would be printed literally.

@isagalaev

This comment has been minimized.

Show comment
Hide comment
@isagalaev

isagalaev Mar 17, 2015

Member

It's probably the most wide-spread misconception about the <code> tag in HTML :-).

Member

isagalaev commented Mar 17, 2015

It's probably the most wide-spread misconception about the <code> tag in HTML :-).

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