Search code examples
htmlpre

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>
Solution

  • 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