HTML Code tags no execute [duplicate]

Question

How can I make code tags not execute as actual HTML tags and just display them on the page. It cannot be using the < and > function. For example how does this website do it inside of the code box?

How does this box not execute the code on the page? Eg. <img src="example.png" /> will not show.

How can I achieve this? A little like shortcode API for WordPress but not on WordPress?

Answer 1

Try:

 <xmp>insert code here</xmp>

Answer 2

Use HTML Special Character Codes

I know you said you want to do this without them, but there's really no elegant way to do that. Nearly all server-side languages have some way to automatically convert HTML characters over.

PHP example:

<pre>
    <span id='code-span'>    
        <?= htmlspecialchars($code); ?>
    </span>
</pre>

If you don't have any server-side languages, you could do this with Javascript (jQuery):

var myCode = "<b>This is not bold</b>";
$('span#code-span').text(myCode);

Using text instead of html will cause tags to be rendered exposed instead of being executed.