How to display raw HTML code (for tutorials etc) on an HTML page

Methods that don't work

• <pre>
• <code>
• <xmp>

<pre>

The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file.

This works for most code like text you want to display. For example here is javascript in a <p> paragraph tag.

let sliderValue = document.getElementById('sliderValue'); let slider = document.getElementById('slider'); slider.addEventListener('input', updatePage);

Not very readable is it?

Now here is that same code in a <pre> tag.

let sliderValue = document.getElementById('sliderValue');
let slider = document.getElementById('slider');
slider.addEventListener('input', updatePage);
	

Much better.

However, it still doesn't work for HTML. Here is an HTML snippet in a <pre> tag.

This is what you should see.

But this is what is rendered.

		
 
			
This is an h2 tag
 
			
This is a sample paragraph
 
		
 
	

<code>

The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.

To display multiple lines of code you need to wrap <code> in a <pre> tag.

However, like the <pre> tag, it still doesn't work for HTML.

Here is what I want you to see on the page.

But here is what you actually see.

This is an h2 tag

This is a sample paragraph

xmp deprecated don't use

The big red deprecated box tells us all we need to know.

How to display raw HTML code on an HTML page

Methods that do work

• Pure HTML, replace characters with alternate characters
• Use built in browser function Document.createTextNode()
• Use built in browser function textContent
• Write your own Javascript escape function
• Embed a CodePen

Pure HTML, replace characters with alternate characters

This answer from StackOverFlow has some good information. https://stackoverflow.com/questions/2820453/how-to-display-raw-html-code-on-an-html-page

The basic idea is to replace the characters that get interpreted as HTML, with alternate ASCII characters that are not HTML. To do this you need to:

1. Replace the & character with &
2. Replace the < character with <
3. Replace the > character with >
4. And if you want the HTML to look like HTML, surround your HTML snippet with <pre> and/or <code> tags.

However, if you have access to Javascript you shouldn't write your own escape function. You should use the built in browser functionality. If you just need to paste some HTML on a page for a tutorial or in a comment on a forum, I built a tool to make this easier.

Document.createTextNode()

If you are creating a webpage and want to accept and display user HTML code, you have to be careful. You can write your own escape functions, but maybe don't.

The browser knows how to escape HTML characters. You are probably not better than the browser teams. Use their functions instead.

I learned this from this Foolproof HTML escaping article.

Node.textContent

textContent is very similar to createTextNode.

You can use it to display text and it will automatically escape HTML characters.

It even mentions directing in the docs "Moreover, using textContent can prevent XSS attacks." which is related to displaying raw HTML etc.

Write your own Javascript escape function

This function is pretty simple. Not super effecient but it will do the job and is easier to understand.

function convertHTMLToDisplayText(htmlString) {
	let encodedString = htmlString.replace(/&/g, '&');
	encodedString = encodedString.replace(/</g, '&lt;');
	encodedString = encodedString.replace(/>/g, '&gt;');
	encodedString = encodedString.replace(/"/g, '&quot;');
	return encodedString
}

Don't copy the above code since I had to de-HTML it to get it to display properly. 😄 Inspect the source and copy from the javascript file.

Use a Codepen

CodePen is a great tool that can display HTML and the results in embedded elements.

Click the embed button at the bottom of a CodePen and copy and paste the resultig HTML.

Here is one of my CodePens explaining stroke-dasharray's.

See the Pen How does stroke-dasharray work? by ⚡️Joshua Dance🍍 (@joshdance-the-sans) on CodePen.

HTML converting tool akak A tool to make it easier

If you just need to take some HTML and make it text that can be pasted on a website, here is a tool to make it easier.

<div class="container"> <h2>This is an h2 tag</h2> <p>This is a sample paragraph</p> </div> click the button to convert

This is what the HTML-like string will display as on a page if you put pre tags around it.

results will appear here
	

If you found these examples helpful, click the Twitter bird and send me a message. Always looking to make new friends.