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

[Question] Is there a way to "highlight" just certain lines? #2253

Closed
kud opened this issue Nov 3, 2019 · 5 comments

Comments

@kud
Copy link

@kud kud commented Nov 3, 2019

Hey.

I would like to know if it's possible to highlight just some lines. For sure I still want the colours on the whole code, but I also would like a highlight on certain part of code.

Some of highlighters in markdown use this trick (remove the \ here, it's just to display it well):

\```javascript{2-5}
{...}
\```

to highlight the lines from 2th to 5th.

It could be great to have it here.

You've got an example here: https://opensource.appbase.io/reactive-manual/getting-started/reactivebase.html

Screen Shot 2019-11-03 at 12 35 05

Thanks!

@yyyc514

This comment has been minimized.

Copy link
Collaborator

@yyyc514 yyyc514 commented Nov 3, 2019

That's a neat trick for Markdown. Our philosophy has always been a bit more on the minimalist side. See: https://highlightjs.readthedocs.io/en/latest/line-numbers.html

That said if you wanted to work on your own plugin on top of Highlight.js to provide this functionality, that'd be a spiffy idea. We've been talking about such things lately and making that easier to do:

#2225

This type of plug-in likely be some sort of post-render plug-in... but to get started you'd just WRAP us... so your function would be like:

function highlightBlockWithLines(block,"L5,L30-34") {
   hljs.highlightBlock(block);
  // your code goes here and takes the generated code applies your custom
  // modifications then updates the DOM accordingly
}

Then if we later added a hook for a plugin then your plugin would just hook that and would also look the same except your code would move into a callback inside your plug-in rather than wrapping us.

@kud

This comment has been minimized.

Copy link
Author

@kud kud commented Nov 4, 2019

Thank you :) The thing is I'm using https://github.com/weswigham/metalsmith-metallic so I've got to go deeper to understand how to deal with this feature.

Thank you!

@yyyc514

This comment has been minimized.

Copy link
Collaborator

@yyyc514 yyyc514 commented Nov 5, 2019

I’m not 100% sure when I the pipeline you use that. Do you run it before the MD to HTML conversion? Looks super simple though. It’s only 90 lines of code. If you added a plugin to Highlight.js to support this you’d simply have to modify this metallic thingy to pass thru the line numbering info from your raw markdown - as the format the plugin inside Highlight.js expected.

Still my thoughts about how to get started without a plugin would apply just the same. Just now you have one library to wrap and one to hack.

@yyyc514

This comment has been minimized.

Copy link
Collaborator

@yyyc514 yyyc514 commented Nov 12, 2019

Ref: #858

@yyyc514

This comment has been minimized.

Copy link
Collaborator

@yyyc514 yyyc514 commented Nov 12, 2019

See also: #1561

You can also do your line-based markup FIRST... and then call highlightBlock (this works if you're using the browser because the DOM auto-merge stuff will preserve your HTML and then auto-merge it after highlighting...

Closing as asked and answered.

@yyyc514 yyyc514 closed this Nov 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.