feat: custom setup for mermaid and katex, close #79, close #82

Author: antfu

docs/.vitepress/config.js

@@ -83,6 +83,14 @@ const Customizations = [
     text: 'Configure Monaco',
     link: '/custom/config-monaco',
   },
+  {
+    text: 'Configure KaTeX',
+    link: '/custom/config-katex',
+  },
+  {
+    text: 'Configure Mermaid',
+    link: '/custom/config-mermaid',
+  },
 ]
 
 const Resources = [

docs/custom/config-katex.md

@@ -0,0 +1,15 @@
+# Configure KaTeX
+
+Create `./setup/katex.ts` with the following content:
+
+```ts
+import { defineKatexSetup } from '@slidev/types'
+
+export default defineKatexSetup(() => {
+  return {
+    /* ... */
+  }
+})
+```
+
+With the setup, you can provide the custom setting for [KaTex Options](https://katex.org/docs/options.html). Refer to the type definitions and their documentation for more details.

docs/custom/config-mermaid.md

@@ -0,0 +1,15 @@
+# Configure Mermaid
+
+Create `./setup/mermaid.ts` with the following content:
+
+```ts
+import { defineMermaidSetup } from '@slidev/types'
+
+export default defineMermaidSetup(() => {
+  return {
+    theme: 'forest',
+  }
+})
+```
+
+With the setup, you can provide a custom default setting for [Mermaid](https://mermaid-js.github.io/). Refer to the type definitions and its documentation for more details.

package.json

@@ -31,7 +31,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.6.5",
     "@antfu/ni": "^0.7.0",
-    "@antfu/utils": "^0.1.5",
+    "@antfu/utils": "^0.1.6",
     "@slidev/cli": "workspace:*",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
@@ -42,9 +42,10 @@
     "@types/fs-extra": "^9.0.11",
     "@types/jest": "^26.0.23",
     "@types/js-yaml": "^4.0.1",
+    "@types/katex": "^0.11.0",
     "@types/markdown-it": "^12.0.1",
     "@types/mermaid": "^8.2.5",
-    "@types/node": "^15.0.3",
+    "@types/node": "^15.3.0",
     "@types/prettier": "^2.2.3",
     "@types/prismjs": "^1.16.5",
     "@types/prompts": "^2.4.0",
@@ -58,7 +59,9 @@
     "esno": "^0.5.0",
     "husky": "4.3.7",
     "jest": "^26.6.3",
+    "katex": "^0.13.10",
     "lint-staged": "^11.0.0",
+    "mermaid": "^8.10.1",
     "playwright-chromium": "^1.11.0",
     "pnpm": "^6.3.0",
     "rimraf": "^3.0.2",

packages/client/builtin/Mermaid.vue

@@ -16,24 +16,18 @@ pie
 import { defineProps, computed, getCurrentInstance } from 'vue'
 import { renderMermaid } from '../modules/mermaid'
 
-const props = defineProps({
-  code: {
-    default: '',
-  },
-  scale: {
-    default: 1,
-  },
-  theme: {
-    defualt: 'base',
-  },
-})
+const props = defineProps<{
+  code: string
+  scale?: number
+  theme?: string
+}>()
 
 const vm = getCurrentInstance()
-const html = computed(() => renderMermaid(props.code, Object.assign({ theme: props.theme }, vm.attrs)))
+const html = computed(() => renderMermaid(props.code || '', Object.assign({ theme: props.theme }, vm!.attrs)))
 </script>
 
 <template>
-  <Transform :scale="scale">
+  <Transform :scale="scale || 1">
     <div v-html="html"></div>
   </Transform>
 </template>

packages/client/modules/mermaid.ts

@@ -2,6 +2,8 @@
 import mermaid from 'mermaid/dist/mermaid.min'
 import { customAlphabet } from 'nanoid'
 import { decode } from 'js-base64'
+import { clearUndefined } from '@antfu/utils'
+import setupMermaid from '../setup/mermaid'
 
 mermaid.startOnLoad = false
 mermaid.initialize({ startOnLoad: false })
@@ -17,8 +19,8 @@ export function renderMermaid(encoded: string, options: any) {
 
   mermaid.initialize({
     startOnLoad: false,
-    theme: 'forest',
-    ...options,
+    ...clearUndefined(setupMermaid() || {}),
+    ...clearUndefined(options),
   })
   const code = decode(encoded)
   const id = nanoid()

packages/client/package.json

@@ -15,7 +15,7 @@
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
   "dependencies": {
-    "@antfu/utils": "^0.1.5",
+    "@antfu/utils": "^0.1.6",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
     "@vueuse/core": "^4.11.0",

packages/client/setup/mermaid.ts

@@ -0,0 +1,14 @@
+/* __imports__ */
+
+import { defineMermaidSetup, MermaidOptions } from '@slidev/types'
+
+export default defineMermaidSetup(() => {
+  // eslint-disable-next-line prefer-const
+  let injection_return: MermaidOptions = {
+    theme: 'default',
+  }
+
+  /* __injections__ */
+
+  return injection_return
+})

packages/slidev/node/plugins/markdown.ts

@@ -8,6 +8,7 @@ import { slash } from '@antfu/utils'
 import mila from 'markdown-it-link-attributes'
 // @ts-expect-error
 import Katex from 'markdown-it-katex'
+import type { KatexOptions } from 'katex'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
 import { loadSetups } from './setupNode'
 import Prism from './markdown-it-prism'
@@ -38,6 +39,8 @@ export async function createMarkdownPlugin(
     setups.push(md => md.use(Prism))
   }
 
+  const KatexOptions: KatexOptions = await loadSetups(roots, 'katex.ts', {}, {}, false)
+
   return Markdown({
     wrapperClasses: '',
     headEnabled: false,
@@ -56,7 +59,7 @@ export async function createMarkdownPlugin(
         },
       })
 
-      md.use(Katex)
+      md.use(Katex, KatexOptions)
 
       setups.forEach(i => i(md))
     },

packages/slidev/node/plugins/setupClient.ts

@@ -30,7 +30,7 @@ export function createClientSetupPlugin({ clientRoot, themeRoots, userRoot }: Re
           imports.push(`import __n${idx} from '${toAtFS(path)}'`)
           injections.push(
             `// ${path}`,
-            `__n${idx}()`,
+            `injection_return = __n${idx}()`,
           )
           asyncInjections.push(
             `// ${path}`,