preview.html

<article id="markdown-body">
  <div>%s</div>
</article>

%s
<script> hljs.initHighlightingOnLoad(); </script>
<script>
  showdown.extension('codehighlight', function() {
    function htmlunencode(text) {
      return (
        text
          .replace(/&amp;/g, '&')
          .replace(/&lt;/g, '<')
          .replace(/&gt;/g, '>')
      );
    }
    return [
      {
        type: 'output',
        filter: function (text, converter, options) {
          // use new shodown's regexp engine to conditionally parse codeblocks
          var left  = '<pre><code\\b[^>]*>',
            right = '</code></pre>',
            flags = 'g',
            replacement = function (wholeMatch, match, left, right) {
              // unescape match to prevent double escaping
              match = htmlunencode(match);
              return left + hljs.highlightAuto(match).value + right;
            };
          return showdown.helper.replaceRecursiveRegExp(text, replacement, left, right, flags);
        }
      }
    ];
  });
</script>

<script>
  function display() {
    showdown.setFlavor('%s');
    let converter = new showdown.Converter({ extensions: ['codehighlight'] });
    converter.setOption('simpleLineBreaks', false);
    converter.setOption('tables', true);

    let md = document.querySelector('#markdown-body div');
    if (!md) return;

    let text = md.innerHTML;
    let newHTML = converter.makeHtml(text);

    md.innerHTML = newHTML;
  }

  display();
</script>

%s
<style>
  body {
    background-color: %s;
  }

  #markdown-body {
    background-color: %s;
    border: 2px solid %s;
    width: 800px;
    margin: auto;
    padding: 2%% 5%%;
  }
</style>