(html) non standard attribute

[xeaone]

Describe the issue
I am wondering if there is a solution for this that I am not aware of or if this is a complexity because of a kind of language mix. Everything highlights correctly except this non standard attribute. {{checked ? 'checked' : ''}} highlightjs wants to render each piece as individual atts but I need it to render as an attribute name so I can use it like a string with my framework.

Which language seems to have the issue?
html

Are you using highlight or highlightAuto?
I tried using highlight, highlightElement, and highlightAuto.

*Sample Code to Reproduce

<input type="checkbox" value="{{checked}}" {{checked ? 'checked' : ''}}>

https://jsfiddle.net/vokeio/4o5nygjd/2/

Expected behavior
I would expect this block of text to highlight as an attribute name or be ignored. Is there away to even escape or add some custom logic to handle this case.

Additional context
None

[joshgoebel]

so I can use it like a string with my framework.

I'm not sure what this means at all.

I am wondering if there is a solution for this

I think the answer is no. Our HTML/XML handles actual raw HTML or XML - it does not handle JSX or any type of tempting... visually I don't find the highlighting here all that terrible though.

Our JavaScript support does a kind of poor job with JSX, and only in the context of actual JS source - you can't just throw HTML/JSX at it...

I'll leave this open for just a bit to see if anyone else has a better idea, but think what you're seeing is about as good as it gets right now.

[xeaone]

The issue is that highlightjs tries to do highlighting on this {{checked ? 'checked' : ''}} snippet when really it should be skipped or treated like snippets is an attribute at least that's what I think.

If you see in the screenshot highlightjs breaks up the snippet of code into separate dom elements. So yes there is highlighting but I would rather have no highlighting in this situation because my framework cant render it because it is now broken up and separated by other elements.

If you use a leading symbol format like :vue as an attribute name but not if you lead with other symbols like @vue or like the original snippet I provided.

And I tried running highlightjs after framework render but I think highlightjs replaces dom nodes instead of splitting and reusing so framework will lose reference to nodes.

[joshgoebel]

when really it should be skipped or treated like snippets is an attribute at least that's what I think.

As I said HTML/XML does not support this syntax - so it is not ever going to highlight it "correctly" - it does not support templating or JSX. If I had unlimited time and our highlighter had no limits I imagine we'd render the stuff in-between the {{}} as Javascript (looks like JSX to me), so I think that we'd still break whatever edge case you're trying to use us for.

And I tried running highlightjs after framework render but I think highlightjs replaces dom nodes instead of splitting and reusing so framework will lose reference to nodes.

I think I finally understand, but this is quite a difficult problem and for sure an unsupported use/edge case. Highlight.js takes TEXT content from a code block and replaces it (wholesale) with HTML). So it will destroy custom markup inside a code block, by design.

I could point you to the old HTML merging code: #2889 which will preserve markup (sort of) but it will NOT preserve the DOM... It destroys and recreates the DOM - so it's quite likely that wouldn't work for you either.

What you might need to do (minimally) is build your own version of the HTML merge code that literally preserves the old DOM nodes from before a highlight pass... and then substitutes those same literal nodes back in after the highlighting is complete.

And then depending on your framework - that might work.