What's the easiest way to put my make my HTML in a pre code block act as text instead?

Question

I want everything between my "code" elements to act as text, and not as HTML elements (so my h1 and p). Is there an easy way to do that? Or do I have to manually put each character(s) into their own span element? If that's the only way, is there some easy way to automate that process? I can't seem to find anything on it. Thanks in advance.

Here's the code

<pre>
     <code>
         <h1 class="title">Hello World!</h1>
         <p class="message">Welcome!</p>
     </code>
</pre>