Update web demo page to use micromark renderer for converting Markdown to HTML by default, allow specifying markdown-it renderer instead.

.eslintrc.json

@@ -15,6 +15,7 @@
     "demo/markdownlint-browser.js",
     "demo/markdownlint-browser.min.js",
     "demo/micromark-browser.js",
+    "demo/micromark-html-browser.js",
     "example/typescript/type-check.js",
     "micromark/micromark.cjs",
     "micromark/micromark.dev.cjs",

.gitignore

@@ -2,6 +2,7 @@ coverage
 demo/markdown-it.min.js
 demo/markdownlint-browser.min.js
 demo/micromark-browser.js
+demo/micromark-html-browser.js
 micromark/micromark.cjs
 micromark/micromark.dev.cjs
 micromark/micromark-browser.js

demo/default.htm

@@ -35,6 +35,7 @@
   </div>
   <script src="markdown-it.min.js"></script>
   <script src="micromark-browser.js"></script>
+  <script src="micromark-html-browser.js"></script>
   <script src="markdownlint-browser.min.js"></script>
   <script src="default.js"></script>
 </body>

demo/default.js

@@ -2,9 +2,11 @@
 
 (function main() {
   // Dependencies
-  var markdownit = window.markdownit({ "html": true });
+  var markdownit = window.markdownit;
   var markdownlint = window.markdownlint.library;
   var helpers = window.markdownlint.helpers;
+  var micromark = window.micromarkBrowser;
+  var micromarkHtml = window.micromarkHtmlBrowser;
 
   // DOM elements
   var markdown = document.getElementById("markdown");
@@ -31,12 +33,42 @@
       .replace(/>/g, ">");
   }
 
+  // Renders Markdown to HTML
+  function render(markdown) {
+    const match = /^\?renderer=([a-z-]+)$/.exec(window.location.search);
+    const renderer = match ? match[1] : "micromark";
+    if (renderer === "markdown-it") {
+      return markdownit({ "html": true }).render(markdown);
+    } else if (renderer === "micromark") {
+      const parseOptions = {
+        "extensions": [
+          micromark.gfmAutolinkLiteral,
+          micromark.gfmFootnote(),
+          micromark.gfmTable
+        ]
+      };
+      const context = micromark.parse(parseOptions);
+      const chunks = micromark.preprocess()(markdown, undefined, true);
+      const events = micromark.postprocess(context.document().write(chunks));
+      const compileOptions = {
+        "allowDangerousHtml": true,
+        "htmlExtensions": [
+          micromarkHtml.gfmAutolinkLiteralHtml,
+          micromarkHtml.gfmFootnoteHtml(),
+          micromarkHtml.gfmTableHtml
+        ]
+      };
+      return micromarkHtml.compile(compileOptions)(events);
+    }
+    return `[Unsupported renderer "${renderer}"]`;
+  }
+
   // Handle input
   function onMarkdownInput() {
     // Markdown
     var content = markdown.value;
     // Markup
-    markup.innerHTML = markdownit.render(content);
+    markup.innerHTML = render(content);
     // Numbered
     var lines = content.split(newLineRe);
     var padding = lines.length.toString().replace(/\d/g, " ");

package.json

@@ -26,7 +26,7 @@
     "build-config-example": "node schema/build-config-example.js",
     "build-config-schema": "node schema/build-config-schema.js",
     "build-declaration": "tsc --allowJs --declaration --emitDeclarationOnly --module commonjs --resolveJsonModule --target es2015 lib/markdownlint.js && node scripts delete 'lib/{c,md,r}*.d.ts' 'micromark/*.d.cts' 'helpers/*.d.{cts,ts}'",
-    "build-demo": "node scripts copy node_modules/markdown-it/dist/markdown-it.min.js demo/markdown-it.min.js && node scripts copy node_modules/markdownlint-micromark/micromark-browser.js demo/micromark-browser.js && cd demo && webpack --no-stats",
+    "build-demo": "node scripts copy node_modules/markdown-it/dist/markdown-it.min.js demo/markdown-it.min.js && node scripts copy node_modules/markdownlint-micromark/micromark-browser.js demo/micromark-browser.js && node scripts copy node_modules/markdownlint-micromark/micromark-html-browser.js demo/micromark-html-browser.js && cd demo && webpack --no-stats",
     "build-docs": "node doc-build/build-rules.mjs",
     "build-example": "npm install --no-save --ignore-scripts grunt grunt-cli gulp through2",
     "build-micromark": "cd micromark && npm run build",