CODEWITHSUNDEEP
htmlpre
mildrenben
mildrenben

Reputation: 3757

Pre code html rendering rather than displaying text

I want to show some code for some documentation. But whenever I try, the browser actually renders it as HTML rather than as text.

How do I stop this?

<pre>
  <code class="html">
    <div class="alert-wrap g--5">
      <input type="checkbox" id="alert-check">
      <label for="alert-check">CLOSE</label>
      <div class="alert card">
        <p>Surface rules! That is all.</p>
      </div>
    </div>
  </code>
</pre>

Upvotes: 2

Views: 857

Answers (2)

Prime
Prime

Reputation: 3625

You can use online converters.

&lt;pre&gt;
  &lt;code class=&quot;html&quot;&gt;
    &lt;div class=&quot;alert-wrap g--5&quot;&gt;
      &lt;input type=&quot;checkbox&quot; id=&quot;alert-check&quot;&gt;
      &lt;label for=&quot;alert-check&quot;&gt;CLOSE&lt;/label&gt;
      &lt;div class=&quot;alert card&quot;&gt;
        &lt;p&gt;Surface rules! That is all.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/code&gt;
&lt;/pre&gt;

Online converters

http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php

Upvotes: 0

Fenton
Fenton

Reputation: 250942

You can encode your HTML to avoid it being interpreted as HTML...

<pre>
  <code class="html">
    &lt;div class="alert-wrap g--5"&gt;
      &lt;input type="checkbox" id="alert-check"&gt;
      &lt;label for="alert-check"&gt;CLOSE&lt;/label&gt;
      &lt;div class="alert card"&gt;
        &lt;p&gt;Surface rules! That is all.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code>
</pre>

Upvotes: 3

Related Questions