feat: add theme

src/components/MarkdownUi.vue

@@ -67,6 +67,7 @@ import { COMPONENT_CONTAINER_ID_INJECTION_KEY, MODE_INJECTION_KEY, EDITABLE_INJE
 import { v4 as uuidv4 } from 'uuid'
 import type { MarkdownMode, InlineFormat, MarkdownTemplate, TextAreaInputEvent } from '../types'
 import formatHtml from 'html-format'
+import { KUI_FONT_FAMILY_TEXT, KUI_FONT_FAMILY_CODE } from '@kong/design-tokens'
 // markdown-it
 import MarkdownIt from 'markdown-it'
 import abbreviation from 'markdown-it-abbr'
@@ -113,6 +114,12 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /** The theme used when the component initializes, one of 'light' or 'dark'. Defaults to 'light' */
+  theme: {
+    type: String as PropType<'light' | 'dark'>,
+    default: 'light',
+    validator: (theme: string):boolean => ['light', 'dark'].includes(theme),
+  },
 })
 
 const emit = defineEmits<{
@@ -225,7 +232,7 @@ const saveChanges = async (): Promise<void> => {
 }
 
 onBeforeMount(async () => {
-  const { MarkdownItShikiji } = composables.useShikiji()
+  const { MarkdownItShikiji } = composables.useShikiji({ theme: props.theme })
 
   md.value = MarkdownIt({
     html: false, // Keep disabled to prevent XSS
@@ -319,6 +326,9 @@ onMounted(async () => {
     MermaidJs?.initialize({
       startOnLoad: false,
       securityLevel: 'strict',
+      fontFamily: KUI_FONT_FAMILY_TEXT,
+      altFontFamily: KUI_FONT_FAMILY_CODE,
+      theme: props.theme === 'light' ? 'default' : 'dark',
     })
   }
 })

src/composables/useShikiji.ts

@@ -2,7 +2,7 @@ import { fromHighlighter } from 'markdown-it-shikiji'
 import { getHighlighterCore } from 'shikiji/core'
 import { getWasmInlined } from 'shikiji/wasm'
 
-export default function useShikiji() {
+export default function useShikiji({ theme }: { theme: 'light' | 'dark' }) {
   const MarkdownItShikiji = async () => {
     // TODO: Remove `any` type
     const highlighter: any = await getHighlighterCore({
@@ -189,10 +189,7 @@ export default function useShikiji() {
     })
 
     return fromHighlighter(highlighter, {
-      themes: {
-        light: 'github-light',
-        dark: 'github-dark',
-      },
+      theme: theme === 'light' ? 'github-light' : 'github-dark',
     })
   }