how to display code snippets in html code example

Example 1: insert code snippet into html

<pre class="line-numbers">
  <code class="language-css">
    p { color: red }
  </code>
</pre>

/* The following language classes are supported:
language-markup – Use for HTML, XML, etc…
language-css
language-clike
language-javascript
language-java
language-php
language-scss
language-bash
language-python
language-sql
language-https
language-csharp
language-aspnet
language-scala
language-haskell
language-objectivec
language-latex
language-git */

Example 2: Display HTML snippets in HTML

/* 1. First search "html entities converter" in Google
and convert the code snippet in html entities form */
2. /* Paste the code inside this snippet : */
<pre>
  <code>
  
   &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;My First Heading&lt;/h1&gt;
&lt;p&gt;My first paragraph.&lt;/p&gt;
  
</code>
</pre>