1  <script setup lang="ts">
 2  import { MdPreview, config } from 'md-editor-v3'
 3  import { useI18n } from 'vue-i18n'
 4  const { locale } = useI18n()
 5  
 6  import 'md-editor-v3/lib/style.css'
 7  
 8  import katex from 'katex'
 9  import 'katex/dist/katex.min.css'
10  
11  import mermaid from 'mermaid'
12  
13  import highlight from 'highlight.js'
14  import 'highlight.js/styles/atom-one-dark.css'
15  
16  import * as prettier from 'prettier'
17  import parserMarkdown from 'prettier/plugins/markdown'
18  
19  config({
20    editorExtensions: {
21      prettier: {
22        prettierInstance: prettier,
23        parserMarkdownInstance: parserMarkdown
24      },
25      highlight: {
26        instance: highlight
27      },
28      katex: {
29        instance: katex
30      },
31      mermaid: {
32        instance: mermaid
33      }
34    }
35  })
36  
37  interface Props {
38    modelValue: string
39    codeFoldable?: boolean
40    autoFoldThreshold?: number
41  }
42  
43  withDefaults(defineProps<Props>(), {
44    codeFoldable: true,
45    language: 'en-US',
46    autoFoldThreshold: Infinity
47  })
48  </script>
49  
50  <template>
51    <md-preview
52      :model-value="modelValue"
53      :code-foldable="codeFoldable"
54      :language="locale === 'zh' ? 'zh-CN' : 'en-US'"
55      :auto-fold-threshold="autoFoldThreshold"
56      no-echarts
57    />
58  </template>
59  
60  <style>
61  .md-editor-preview {
62    word-break: keep-all;
63    font-family: 'Inter';
64  }
65  </style>