Highlight.js: HTML tags inside code?

[ondras]

Hi,

is it possible to include HTML tags inside the code (and have them not-escaped, so I can use them to emphasize part of the code)?

As in:

(fenced block)
var x = <em>"variable"</em>;
(/fenced block)

[tlf30]

I would also like to see this, but I feel like this needs to only be present in certain languages such as php, jsp, and other programming languages used to write web pages. For example, I do not think it needs to be present in languages such as C.

[ondras]

For example, I do not think it needs to be present in languages such as C.

Why not? If you want to see some C (pun intended), you might as well want to highlight certain constructs important for the context (say you are writing a HTML article about a kickass C algo you recently implemented...).

The only problem I see here is when you happen to be syntax-highlighting XML/HTML code itself. I am not sure what the proper solution would be.

[joshgoebel]

Related: https://github.com/highlightjs/highlight.js/issues/2126

Exactly, the problem is that it's hard to have you cake and eat it too. Should Highlight.js highlight what's inside the <code> block OR should it treat it as HTML and leave it alone?

And how would you ever deal with ambiguities in source code?

var string = "<strong>Is this strong or is it strong?</strong>"

[joshgoebel]

@ondras Did you try this? Turns out I seem to be mistaken and this actually should "just work"... you'll just have to get your CSS correct.

[joshgoebel]

Isn't this exactly what you are wanting:

https://github.com/highlightjs/highlight.js/issues/2064

[ondras]

@ondras Did you try this?

Nah, this issue is two years old and I have completely forgotten about it. Let me find some spare time to update my hljs version and try the approach mentioned above.

[joshgoebel]

Ok, let us know! :-) I did try it in a jsfiddle though, seems to work.

[ondras]

@yyyc514 I just tried: https://jsfiddle.net/my3vnj86/

Turns out it simply works when using HLJS's initHighlightingOnLoad (browser already did the parsing), but fails when using the highlight function. Unfortunately, my input data format is Markdown (not HTML), so I have to use the highlight API.

[joshgoebel]

_Your example was lacking a little then, in that it's Javascript._

Please provide more details on EXACTLY what you are doing. Is this server-side and not running in a browser at all? Is this not actually for display on the webpage?

[ondras]

Your example was lacking a little then, in that it's Javascript.

Right, my bad.

Please provide more details on EXACTLY what you are doing. Is this server-side and not running in a browser at all? Is this not actually for display on the webpage?

It is a regular client-side usage. Just the data comes from a Markdown file (fetched via XHR), is piped to hljs's highlight function and rendered into a HTML document. The linked fiddle is pretty representative.

[joshgoebel]

Given that you now know it "just works" for HTML why wouldn't you simply change your sequencing and then use the built-in support for colorizing snippets while preserving embedded HTML? highlightBlock(element) vs highlight(text).

[ondras]

Given that you now know it "just works" for HTML why wouldn't you simply change your sequencing and then use the built-in support for colorizing snippets while preserving embedded HTML? highlightBlock(element) vs highlight(text).

I will definitely try this.

My motivation here is that the current pipeline (fetch -> highlight -> parse HTML -> render) is more straightforward than the proposed solution (fetch -> parse HTML -> serialize HTML -> highlight -> parse HTML -> render) which writes the stuff to the DOM twice.

[joshgoebel]

Sure, but it's the cost of doing business. And in most cases I don't think the difference is going to matter one bit. Although I'm also not sure you're thinking about it clearly because what you were really asking us to do was take your first parse HTML -> serialize HTML -> steps and bury them inside the Highlight.js code itself.

It's likely 100x faster to let the browser parse and serialize HTML than to do it in JS.

[ondras]

It's likely 100x faster to let the browser parse HTML than to do it in JS.

No arguing on this one!

Although I'm also not sure you're thinking about it clearly because what you were really asking us to do was take your first parse HTML -> serialize HTML -> steps and bury them inside the Highlight.js code itself.

Well, not HTML necessarily. I would accept any other kind of micro-syntax that would allow me to use CSS to target hand-marked parts of the highlighted code.

[joshgoebel]

I would accept any other kind of micro-syntax that would allow me to use CSS to target hand-marked parts of the highlighted code.

Dis true, but the HTML way is already in place with well-thought standards for encoding, escaping, etc... things we don't need to be reinventing from scratch.

[ondras]

Anyway, this point of mine is apparently no longer valid.

[joshgoebel]

Glad to help. :)