Highlight.js

HTML

<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>

<body>
 <pre><code class="language-html">&lt;p>Bla bla &lt;strong>word in bold&lt;/strong>&lt;/p></code></pre>
</body>

</html>

Escape code (Option #1)

1. Search < and Replace for <
2. Search > and Replace for >
Explanation here

Escape code (Option #2)

1. Make the code a PHP Variable
2. Call the code with htmlspecialchar()
Example:

<?php $code = "<ul><li>option 1</li><li>option 2</li></ul>"; ?>
<pre><code class="language-html">
<?=htmlspecialchars($code)?>
</code></pre>

Highlight.js Features

Supported Features
Change Theme - see themes

Highlight.js Copy Plugin

Plugin to copy-paste

Add below code in HEAD tag, right after highlight.js

<link rel="stylesheet" href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"/>
<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>

And this JS after textarea

hljs.addPlugin(new CopyButtonPlugin());