Displaying xml codes without rendering symbols

I want to be able to display the characters & l t ; as well as other xml codes, without it rendering the actual symbol, like whats happening on this table from MDN

Only problem is that every way I’ve tried it my browser still renders it as a symbol instead of the characters I want.

Here’s the code I’m using;

HTML:

<div class="code-container">
      <pre>
        <code>
          &lt;
        </code>
      </pre>
    </div>
<!-- This ends up displaying < on the page -->

CSS:

.code-container{
  max-width: 80%;
  background-color: #434546;
  margin: 25px 0 0 40px;
  min-height: 50px;
  border-radius: 5px;
  text-align: left;
  height: auto;
  vertical-align: middle;
}

pre code{
  font-family: monospace;
  font-size: 1.09rem;
}

Any help would be appreciated.

For example:

<ul>
  <li><code><strong>&amp;lt;</strong> - stands for "&lt;"</code></li>
  <li><code><strong>&amp;gt;</strong> - stands for "&gt;"</code></li>
  <li><code><strong>&amp;amp;</strong> - stands for "&amp;"</code></li>
</ul>

Use analogy for other characters.