Make all tables in markdown responsives to fix issue #295

src/utils/frontmatter.mjs

@@ -9,3 +9,28 @@ export function readingTimeRemarkPlugin() {
     file.data.astro.frontmatter.readingTime = readingTime;
   };
 }
+
+export function responsiveTablesRehypePlugin() {
+  return function (tree) {
+    if (!tree.children) return;
+
+    for (let i = 0; i < tree.children.length; i++) {
+      const child = tree.children[i];
+
+      if (child.type === 'element' && child.tagName === 'table') {
+        const wrapper = {
+          type: 'element',
+          tagName: 'div',
+          properties: {
+            style: 'overflow:auto',
+          },
+          children: [child],
+        };
+
+        tree.children[i] = wrapper;
+
+        i++;
+      }
+    }
+  };
+}