At times, you might want to display raw HTML code as plain text for instructional purposes or simply to share some code snippets with your website visitors. In this blog post, we’ll show you how to easily stop HTML from rendering and display it as plain text instead.
Use HTML Entities
The simplest way to display HTML code as plain text is by using HTML entities. These are special sequences of characters that represent the reserved HTML characters, so they don’t get processed by the browser.
Here are some common HTML entities:
For example, if you want to display the following HTML code:
You should replace the reserved characters with their corresponding HTML entities:&lt;p&gt;Hello, world!&lt;/p&gt;
Use the <pre> and <code> Elements
If you want to display larger blocks of code, you can use the <pre> and <code> elements in combination with HTML entities. The <pre> element preserves the whitespace and line breaks of the text, while the <code> element is used to style the text as code:<pre><code>&lt;p&gt;Hello, world!&lt;/p&gt;</code></pre>
Then, you can call this function with your desired HTML code:displayCode('<p>Hello, world!</p>', 'codeContainer');