Reveal.js: Syntax highlighting adds unwanted HTML code comments

Created on 1 Aug 2020  Â·  10Comments  Â·  Source: hakimel/reveal.js

Reveal code with php syntax highlight:
image

Renders like this:
image

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?

Most helpful comment

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.

All 10 comments

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.

yes very new. we need to find the ways. its all there for us.
thanks for fixing the problem in advanced, we are part of a great team.
keep up the good work

On Sun, Sep 6, 2020, 2:33 PM FrancoSpeziali notifications@github.com
wrote:

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.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/hakimel/reveal.js/issues/2744#issuecomment-687879367,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AQZRIMNDVMKRGUPPLRO7JLTSEPPZ7ANCNFSM4PRZP3ZQ
.

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

@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

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:

Screen Shot 2020-09-09 at 10 46 04

The easiest fix is to swap < out for its HTML entity &lt;. 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.

@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.

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 &lt; and > to &gt; and it works fine.

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.

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.

README.md

Was this page helpful?
0 / 5 - 0 ratings