Auto Create HTML Code Snippets

HTML

<p class="make-snippet">Here is some text with a <code>code element in it <a href=''>a link</a>.</code><p>
<p>And some more text with no code tag in it for testing. </p>

<h1 class="make-snippet">This is a H1 with the class make-snippet <sup>g</sup>.<h1>

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-okaidia.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-markup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.js"></script>

Javascript

/*
 *
 * Give an element a .make-snippet class and it's innerhtml
 * will be copied into a pre/code fragment that gets appended
 * adjacent to the element.
 *
 * If Prism.js is included, the snippets will be syntax higlighted.
 *
 * Note, this only autogenerates markup snippets.
 * 
 */

(function(){
  
  document.addEventListener('DOMContentLoaded', function(event) {

    var list = document.querySelectorAll('.make-snippet');

    [].forEach.call(list, function(el) {
      var snippet = el.innerHTML.replace(/</g,'&lt;');
          snippet = snippet.replace(/ /g,'&nbsp;');
      var code = '<pre class="language-markup"><code>'+snippet+'</pre></code>';
      el.insertAdjacentHTML('afterend',code);
    });
    
    // if your page has prism.js you get syntax highlighting
    if(window.Prism){
      Prism.highlightAll(false);
    }

  });

})();