How to prevent HTML comments from being displayed

[JochenDiekenbrock]

I'm trying to add highlighting to a log output that is generated by Angular 4. Without Rainbow being involved, the HTML looks like attachment without-Rainbow.txt

The angular-created comments are not displayed.

As soon as I activate Rainbow, without any language definition being loaded, the angle bracket are escaped and the comments are displayed of course. Now the HTML looks like this: with-Rainbow.txt

How can I prevent this behaviour?

[ccampbell]

Is there a page/jsfiddle where I can see the behavior?

[JochenDiekenbrock]

Here's a Fiddle

When the data-language attribute is removed, the angle brackets are not changed.

[JochenDiekenbrock]

It's kind of obvious, but the following highlighing rule circumvents this problem: Rainbow.extend('...', { name: 'remove', pattern: /<!--[^]*?-->/gm }]); with CSS: .remove { display: none; }

[ccampbell]

Hmm. So this is actually not a bug per se, but a feature of rainbow. The thought process was that if you wanted to highlight code using rainbow then you WANT code comments to show up there. Like if I want to feature an html block on my blog then I may want to write something like this:

<!-- create the element here -->
<div class="whatever"></div>

As you can see github shows the comments too.

Is there any way that you can strip the comments before injecting them into the page? Would probably be better than creating a custom rainbow rule to remove them.

I think the relevant code is here

https://github.com/ccampbell/rainbow/blob/91e5e497406fcbe6def6b72681e61794ebc53a10/src/prism.js#L364

[JochenDiekenbrock]

I can see that it often makes sense to make the comments visible. Perhaps an option would be approriate.

It's not in the Angular documentation, but I found quite a few comments on Stackoverflow that Angular relies an the comments, so stripping them would not be an option. Additionally, stripping them would require a second processing step outside of Angular, after Angular generated the code that should be highlighed.

I ran into another problem yesterday, because the code to be highlighted is updated after the initial page load (it's fetched asynchronously from the backend) and Rainbow.color() appeared to do the highlighting only once. I did not follow up on this very long, because I got the impression that I'm trying to use Rainbow outside of it's target area. I'm now using Angular functionality to do the markup in the code, which will automatically handle asynchronous updates.

So feel free to close this issue. Thank you for your support and for providing Rainbow!