⚙️ Separate markdown config in another file, create custom config.js file

markdown.config.js

@@ -0,0 +1,51 @@
+import { escapeSvelte } from 'mdsvex';
+import { createHighlighter, makeSingletonHighlighter } from 'shiki';
+
+// Markdown Plugins
+import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+
+// Highlighter
+const getHighlighter = makeSingletonHighlighter(createHighlighter);
+
+/** @type {import('mdsvex').MdsvexOptions} */
+const mdsvexOptions = {
+  remarkPlugins: [[remarkGfm]],
+  rehypePlugins: [
+    [rehypeSlug],
+    [
+      rehypeAutolinkHeadings,
+      {
+        behavior: 'wrap',
+        properties: {
+          className: [
+            `before:content-['#'] before:absolute before:-ml-[1em] before:text-neutral-100/0 hover:before:text-neutral-200/50 pl-[1em] -ml-[1em]`
+          ]
+        }
+      }
+    ]
+  ],
+  extensions: ['.md'],
+  highlight: {
+    highlighter: async (code, lang = 'text') => {
+      const highlighter = await getHighlighter({
+        themes: ['github-light', 'github-dark'],
+        langs: ['javascript', 'typescript', 'bash', 'json']
+      });
+      await highlighter.loadLanguage('javascript', 'typescript', 'bash');
+      const html = escapeSvelte(
+        highlighter.codeToHtml(code, {
+          lang,
+          themes: {
+            light: 'github-light',
+            dark: 'github-dark'
+          }
+        })
+      );
+      return `{@html \`${html}\` }`;
+    }
+  }
+};
+
+export { mdsvexOptions };

svelte.config.js

@@ -4,55 +4,10 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import adapter from '@sveltejs/adapter-node';
 
 // 📦 Extensions:
-import { mdsvex, escapeSvelte } from 'mdsvex';
+import { mdsvex } from 'mdsvex';
-import { createHighlighter, makeSingletonHighlighter } from 'shiki';
 
-// 🎨 Markdown Plugins:
+// 📄 Markdown Config:
-import remarkGfm from 'remark-gfm';
+import { mdsvexOptions } from './markdown.config.js';
-import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypeSlug from 'rehype-slug';
-
-// 📄 Markdown config:
-const getHighlighter = makeSingletonHighlighter(createHighlighter);
-
-/** @type {import('mdsvex').MdsvexOptions} */
-const mdsvexOptions = {
-  remarkPlugins: [[remarkGfm]],
-  rehypePlugins: [
-    [rehypeSlug],
-    [
-      rehypeAutolinkHeadings,
-      {
-        behavior: 'wrap',
-        properties: {
-          className: [
-            `before:content-['#'] before:absolute before:-ml-[1em] before:text-neutral-100/0 hover:before:text-neutral-200/50 pl-[1em] -ml-[1em]`
-          ]
-        }
-      }
-    ]
-  ],
-  extensions: ['.md'],
-  highlight: {
-    highlighter: async (code, lang = 'text') => {
-      const highlighter = await getHighlighter({
-        themes: ['github-light', 'github-dark'],
-        langs: ['javascript', 'typescript', 'bash', 'json']
-      });
-      await highlighter.loadLanguage('javascript', 'typescript', 'bash');
-      const html = escapeSvelte(
-        highlighter.codeToHtml(code, {
-          lang,
-          themes: {
-            light: 'github-light',
-            dark: 'github-dark'
-          }
-        })
-      );
-      return `{@html \`${html}\` }`;
-    }
-  }
-};
 
 // 🧡 Svelte config:
 /** @type {import('@sveltejs/kit').Config} */