Make all tables in markdown responsives to fix issue #295

astro.config.mjs

@@ -11,7 +11,7 @@ import compress from 'astro-compress';
 import icon from 'astro-icon';
 import tasks from './src/utils/tasks';
 
-import { readingTimeRemarkPlugin } from './src/utils/frontmatter.mjs';
+import { readingTimeRemarkPlugin, responsiveTablesRehypePlugin } from './src/utils/frontmatter.mjs';
 
 import { ANALYTICS, SITE } from './src/utils/config.ts';
 
@@ -76,6 +76,7 @@ export default defineConfig({
 
   markdown: {
     remarkPlugins: [readingTimeRemarkPlugin],
+    rehypePlugins: [responsiveTablesRehypePlugin],
   },
 
   vite: {

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++;
+      }
+    }
+  };
+}