CommonMark (Markdown) with Syntax Hightlight

20190812+7.

by Anov Siradj

HTML

<details style="overflow-x: auto;" open>
   <summary>(sourcecode)</summary>
   <pre id="sourcecode"><code class="language-js"></code></pre>
</details>

<script type='text/cm'>`type=cm` <https://commonmark.org/></script>
<script type='text/cmmk'>`type=cmmk` <https://github.com/commonmark/commonmark.js/></script>
<script type='text/commonmark'>`type=commonmark` <https://daringfireball.net/projects/markdown/></script>

<script type="text/md"><https://en.wikipedia.org/wiki/Markdown#Example></script>

<script type="text/mkdn">
```sh
rm -rf /
```
</script>

<script type="text/markdown">
Heading
=======

## Sub-heading

Paragraphs are separated
by a blank line.

Two spaces at the end of a line  
produces a line break.

Text attributes _italic_, 
**bold**, `monospace`.

Horizontal rule:

---

Bullet list:

  * apples
  * oranges
  * pears

Numbered list:

  1. lather
  2. rinse
  3. repeat

An [example](http://example.com)

![Image](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg "icon")

> Markdown uses email-style > characters for blockquoting.

Inline <abbr title="Hypertext Markup Language">HTML</abbr> is supported.
</script>

<!--// commonmarkjs //-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.29.0/commonmark.min.js"></script>

<!--// highlightjs //-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/default.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/a11y-dark.min.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js" async></script>

<!--// prismjs //-->
<link xhref="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.min.css" rel="stylesheet" type="text/css"/>
<link xhref="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism-okaidia.min.css" rel="stylesheet" type="text/css"/>
<link...

JavaScript

(function(unknown) {
   var defs = {
      'result-adjacent': 'afterend',
      'result-wrapper': 'div', /* tagname, element, function. */
      mode: 'HtmlRenderer',
      parser: {
         smart: true,
      },
      renderer: {
         surcepos: false,
         safe: false,
      },
   };

   function cm5(input_element, parent_element) {
      this.opts = {};
      for (var stg in defs) this.opts[stg] = defs[stg];

      this.parent_element = parent_element || document.body;
      this.input_element = ((typeof input_element === 'string') ? this.parent_element.querySelector(input_element) : input_element) || null;
      if (this.output_element === unknown) this.output_element = null;

      this.reader = new commonmark.Parser(this.opts.parser);
      this.writer = new commonmark[this.opts.mode](this.opts.renderer);
   }

   cm5.prototype.doit = function() {
      this.data_0 = this.input_element.innerHTML;
      this.data_1 = this.writer.render(this.reader.parse(this.data_0));

      if (typeof this.opts['result-wrapper'] === 'string') {
         this.output_element = document.createElement(this.opts['result-wrapper']);
      } else if (this.opts['result-wrapper'] instanceof Element) {
			this.output_element = this.opts['result-wrapper'];
		} else if (this.opts['result-wrapper'] instanceof Function) {
			this.output_element = this.opts['result-wrapper'](this);
		} else {
			throw this.opts['result-wrapper'];
		}

      if (this.output_element) this.output_element.innerHTML = this.data_1;
      this.input_element.insertAdjacentElement(this.opts['result-adjacent'], this.output_element);
   };

   window.CommonMark5 = cm5;
   window.CommonMark5.defs = defs;
})();

Array.from(document.body.children).forEach((elem,i) => {
   if (/^text\/[cm].*$/.test(elem.type) === false) return;
   if (i < 3) {
      var cm5 = new CommonMark5(`script[type='${elem.type}']`);
      cm5.doit();
   } else {
      (new CommonMark5(elem)).doit();
   }
});

var
sourcecode =...