Clean up markdown heading elements

Author: simonw

render-markdown.html

@@ -201,6 +201,20 @@ <h1>Render Markdown</h1>
         Array.from(
             preview.querySelectorAll('a.heading-link')
         ).forEach(el => el.replaceWith(el.firstChild));
+        // Clean up markdown-heading elements
+        Array.from(
+            preview.querySelectorAll('div.markdown-heading')
+        ).forEach(el => {
+            const heading = el.querySelector('.heading-element');
+            if (heading) {
+                console.log(heading);
+                const id = heading.innerText.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+                const tag = heading.tagName;
+                heading.setAttribute('id', id);
+                heading.removeAttribute('class');
+                el.parentNode.replaceChild(heading, el);
+            }
+        });
         // Output it to the textarea
         output.value = preview.innerHTML.replace(
             /<h([1-6])>\n/g, '<h$1>'
@@ -243,4 +257,4 @@ <h1>Render Markdown</h1>
 </script>
 
 </body>
-</html>
+</html>