Reveal.js: Code style changes the code

Created on 28 Dec 2015  路  5Comments  路  Source: hakimel/reveal.js

When I have

<pre><code>
<div>
     <MainTasks />
 </div>
</code></pre>

the result becomes 

<div>
    <maintasks>
 </maintasks></div>
question
Source
picture AnnotatedJS

Most helpful comment

The solution to this problem is to escape < and > in the code blocks.

<pre><code>
<head>
    <title>NextStep App</title>
</head>
</code></pre>

is incorrect because the tags inside the <code> block will be interpreted as HTML by the browser. After escaping, the block looks like the following and renders as expected in the presentation

<pre><code>
&lt;head&gt;
    &lt;title&gt;NextStep App&lt;/title&gt;
&lt;/head&gt;
</code></pre>
picture etimberg on 21 Jan 2017
👍2

All 5 comments

Another example:

<head>
    <title>NextStep App</title>
</head>

becomes

<title>NextStep App</title>
AnnotatedJS picture AnnotatedJS on 28 Dec 2015

Hi @AnnotatedJS, I鈥檓 not too sure exactly what you鈥檙e referring to. Could you provide some additional details?

bnjmnt4n picture bnjmnt4n on 4 Mar 2016

Whatever is being used to do the code boxes in reveal it changes the code. I'm writing some slides for a React class and it consistently changes Uppercase component names into lower case. It also likes to add & switch Tags around. So If you tried to do a component that was one line like

it might change it to:

I would say this isn't a question but a bug. @AnnotatedJS did you find a solution? I had a lot of trouble with the markdown working but if it works for you markdown has a code highlighter normally which might work better.

aintnorest picture aintnorest on 19 May 2016

If your problem has to do with JSX upgrading the version of Highlight.js that is used in reveal will fix the problem.

aintnorest picture aintnorest on 19 May 2016

The solution to this problem is to escape < and > in the code blocks.

<pre><code>
<head>
    <title>NextStep App</title>
</head>
</code></pre>

is incorrect because the tags inside the <code> block will be interpreted as HTML by the browser. After escaping, the block looks like the following and renders as expected in the presentation

<pre><code>
&lt;head&gt;
    &lt;title&gt;NextStep App&lt;/title&gt;
&lt;/head&gt;
</code></pre>
etimberg picture etimberg on 21 Jan 2017
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nedbat picture nedbat  路  3Comments
gre picture gre  路  5Comments
togakangaroo picture togakangaroo  路  4Comments
ablakey picture ablakey  路  3Comments
OscarDeDios picture OscarDeDios  路  3Comments