Syntax highlighting adds unwanted HTML code comments

[greg-witczak]

Reveal code with php syntax highlight:

Renders like this:

Generated HTML code:

<pre><code class="php hljs">&lt;!--?php
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myFunc</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">echo</span> <span class="hljs-string">'test'</span>;
}
$name = <span class="hljs-string">'myFunc'</span>;
$name();&lt;/code--&gt;</code></pre>

I can't see any errors/warnings during build process.

This bug seems to be similar to #2741 and #2732 - reveal is adding something strange, trying to make code better. Is there a way to disable it?

[FrancoSpeziali]

I'm having a similar issue, when displaying React code. Seems to a problem in the parsing somewhere. Problem does not happen in older versions of reveal.js, so this is new for sure.

[greg-witczak]

@FrancoSpeziali do you know the older version that is working fine? I'm considering downgrade to fix it.

[FrancoSpeziali]

@greg-witczak I haven't tried all the versions, but I checked out tag 3.7.0 and I could not reproduce the issue there. Possibly some later versions don't have the bug, I would investigate further, but time issues...!
It's possible the bug isn't in reveal.js, but one of it's dependencies

[hakimel]

The extra characters are being inserted by the web browser because the unescaped < character in <?php hits the HTML parser, which then tries "fix" the invalid HTML. You can test this by pasting your code sample into an empty .html file and opening it the web browser, the developer tools will show a parsed HTML tree like:

The easiest fix is to swap < out for its HTML entity <. Alternatively, you can wrap the whole code sample in a <script type="text/template"> tag to tell the HTML parser to ignore it:

<pre><code class="php"><script type="text/template">
<?php

function myFunc(){
  echo 'test';
}

$name = 'myFunc';
$name();
</script></code></pre>

Multiple people have reported that this worked in prior releases. While the issues has always been there for code added via HTML, I think the change in 4.0 is that it somehow started affecting external Markdown as well. I'm leaving this issue open until that par has been debugged further, if anyone has any ideas as to what change caused this I'm all ears.

[FrancoSpeziali]

@hakimel Thanks, I figured it was something like that. I also tried swapping out the < > with HTML entities, but it's not idea for me. When I have some free time I would like to investigate further.

[bobbens]

It affects inline markdown as well. I didn't have an issue with 3.x and have it with 4.x. I've narrowed it down to the markdown plugin, but wasn't able to solve it.

Since I use a static website generator, my "solution" was to basically add a pre-processor that targets the ``` blocks and changes all the < to < and > to > and it works fine.

[hakimel]

I've fixed this in the dev branch—if you're using Markdown, please try the latest version from there and let me know if it works.

The issue was that as of 4.0 we started overriding the markdown parser's code renderer (https://github.com/hakimel/reveal.js/blob/dev/plugin/markdown/plugin.js#L429-L450) in order to support line numbers and line highlights. The built-in code renderer automatically escaped HTML entities in code, but our overridden version didn't. I've added HTML escapes to our own code renderer now too so it should continue to work just like it did pre 4.0.

[greg-witczak]

Cool, thanks for fixing that! Unfortunately, I'm not able to check the fix, since I'm using reveal-md - so I'll let you know once it gets to regular release and reveal-md gets updated.

[517G]

README.md