Question for reveal.js users.

I am trying to show a HTML markup in my reveal.js presentation. Issue is it renders the html block within my Code syntax highlighting block so the markup can not be seen.

Is there a way around this?

example below

<section>
    <h2>Pretty Code</h2>
        <pre>
            <code contenteditable>

                <form id="demo-form" data-validate="parsley">
                <label for="fullname">Full Name * :</label>
                <input type="text" id="fullname" name="fullname" data-required="true" />

                <label for="email">Email * :</label>
                <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

                <label for="website">Website :</label>
                <input type="text" id="website" name="website" data-trigger="change" data-type="url" />

                <label for="message">Message (20 chars min, 200 max) :</label>
                <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
                </form> 

            </code>
        </pre>
</section>

Question for reveal.js users.

I am trying to show a HTML markup in my reveal.js presentation. Issue is it renders the html block within my Code syntax highlighting block so the markup can not be seen.

Is there a way around this?

example below

<section>
    <h2>Pretty Code</h2>
        <pre>
            <code contenteditable>

                <form id="demo-form" data-validate="parsley">
                <label for="fullname">Full Name * :</label>
                <input type="text" id="fullname" name="fullname" data-required="true" />

                <label for="email">Email * :</label>
                <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

                <label for="website">Website :</label>
                <input type="text" id="website" name="website" data-trigger="change" data-type="url" />

                <label for="message">Message (20 chars min, 200 max) :</label>
                <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
                </form> 

            </code>
        </pre>
</section>

• javascript
• html
• slideshow
• presentation
• reveal.js

1 Answer 1

Escape the html tags, and then all should look ok. Here is a tool that convert raw HTML to escaped strings: http://www.accessify./tools-and-wizards/developer-tools/quick-escape/default.php

So you have to copy the code section enclosed between the <code> html markup.