Welcome to a tutorial on how to display HTML code as text. Want to add an HTML code snippet to your website? But the <TAGS> automatically gets parsed as a part of the webpage?
To display HTML code as text, simply replace < with <, and > with >. For example:
<strong> Hello World! </strong><p> Goodbye World! </p>
There are many online HTML entity converters that you can use to do this automatically.
That covers the quick basics, but read on if you need more tips and examples!
ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
[web_stories_embed url=”https://code-boxx.com/web-stories/display-html-code-as-text/” title=”Display HTML Code As Text” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
DISPLAY HTML AS TEXT
All right, let us now get into the examples to display HTML code as text on a webpage.
EXAMPLE 1) INLINE HTML CODE
<style>
code {
padding: 3px;
border: 1px solid #dfe22b;
background: #fffb89;
}
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
</style>
<p>
The <code><strong></code> tag is not to be used to bold text.
It actually has a semantic meaning of "strong emphasis".
</p><strong> tag is not to be used to bold text.It actually has a semantic meaning of “strong emphasis”.
As in the introduction, all we have to do is to replace < with < and > with >.
< >are called “HTML entities”. In particular,<represents “lesser than” and>for “greater than”.- There are a ton of other “HTML entity characters”, such as
&for ampersand. I will leave a link below to a more complete list. - Lastly, wrapping your HTML code in
<code>is optional. Well, it is easier to add cosmetics this way, and it also gives a “this is computer code” semantic hint to search engines.
EXAMPLE 2) HTML CODE SNIPPET
<style>
pre {
color: #fff;
background: #384669;
}
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
</style>
<pre><code><ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul></code></pre><ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>If you want to display a snippet, just wrap it in a pair of <pre><code>. That is, <pre> preformatted text will retain all the spaces and line breaks… So you don’t have to do crazy manual <br> and .
Reminder – It is a pain to manually change all the tags to HTML entities. Just do a search for “online HTML entity encode“, and there are plenty of free tools online.
EXTRA BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
EXTRA) CODE HIGHLIGHTERS
If you want “pretty code snippets”, there are quite a few Javascript libraries out there that you can use.
LINKS & REFERENCES
- HTML Entity – MDN
- HTML Symbols – Toptal
INFOGRAPHIC CHEAT SHEET
THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!