Add support for markdown tables

Author: jochenklar

app/src/app.js

@@ -65,6 +65,17 @@ const toc = document.getElementsByClassName('toc')[0]
 const tocDropdown = document.getElementsByClassName('toc-dropdown')[0]
 tocDropdown.appendChild(toc.cloneNode(true))
 
+// add table classes
+const tables = document.getElementsByTagName('table')
+for (let table of tables) {
+  table.classList.add('table')
+  table.classList.add('table-bordered')
+  table.classList.add('table-fixed')
+
+  const thead = document.getElementsByTagName('thead')[0]
+  thead.classList.add('thead-dark')
+}
+
 document.querySelectorAll('[data-component="title"]').forEach(el => {
   createRoot(el).render(
     <Provider store={store}>

assets/app.js

@@ -157,6 +157,11 @@ caption {
     caption-side: top;
     padding-top: 0;
 }
+.caption {
+    margin-bottom: 0.75rem;
+    color: #6c757d;
+    font-size: small;
+}
 pre {
     color: white;
     background-color: #343a40;
@@ -230,6 +235,7 @@ code {
 .show-component p:last-child,
 .show-component ul:last-child,
 .show-component pre:last-child,
+.show-component table:last-child,
 .show-component [data-component="table"]:last-child table,
 .pattern-component pre:last-child {
     margin-bottom: 0;

assets/style.css

@@ -70,6 +70,7 @@ def main():
     html = markdown(md, extensions=[
         'fenced_code',
         'attr_list',
+        'tables',
         TocExtension(toc_depth='2-3', title='Table of Contents'),
         CustomBlocksExtension(generators={
             'config': config_generator,