Feature: Mermaid and other markdown extras

TODO.md

@@ -5,4 +5,5 @@
   - screenshot
 
 ## later
-# cache assets
+- mermaid styles
+- cache assets

examples/index.md

@@ -59,3 +59,14 @@ class Main(easycli.Root):
 
         self._parser.print_help()
 ```
+
+
+## Mermaid
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```

yhttp/markdown/markdown.py

@@ -1,10 +1,17 @@
 import markdown2
 
 
+# https://github.com/trentm/python-markdown2/wiki/Extras
 extras = [
     'header-ids',
     'tables',
     'fenced-code-blocks',
+    'cuddled-lists',
+    'footnotes',
+    'nofollow',
+    'pyshell',
+    'smarty-pants',
+    'mermaid',
 ]
 
 

yhttp/markdown/templates/master.mako

@@ -111,5 +111,22 @@
 
 
 <script type="text/javascript" src="/static/index.js"></script>
+<script type="module" defer>
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+  mermaid. Initialize({
+    securityLevel: 'loose',
+    startOnLoad: true
+  });
+  let observer = new MutationObserver(mutations => {
+    for(let mutation of mutations) {
+      mutation.target.style.visibility = "visible";
+    }
+  });
+  document.querySelectorAll("pre.mermaid-pre div.mermaid").forEach(item => {
+    observer.observe(item, { 
+      attributes: true, 
+      attributeFilter: ['data-processed'] });
+  });
+</script>
 </body>
 </html>