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

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

Comments

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

@Nedudi

This comment has been minimized.

Copy link

Nedudi commented Feb 15, 2015

+1

@szpak

This comment has been minimized.

Copy link
Author

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.

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

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

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

Copy link

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.

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

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

Copy link

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.

Copy link
Member

isagalaev commented Mar 17, 2015

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

@TRSasasusu

This comment has been minimized.

Copy link

TRSasasusu commented Feb 24, 2019

This issue has already been closed, but please let me announce to you.
I made a plugin highlighting specific lines.
https://github.com/TRSasasusu/highlightjs-highlight-lines.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.