chore: use md import plugin

dev/App.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, ref } from 'vue';
 import Header from './Header';
 import Preview from './Preview';
+import PreviewOnly from './PreviewOnly';
 
 import './style.less';
 
@@ -10,11 +11,10 @@ export default defineComponent({
   setup() {
     const theme = ref<Theme>('light');
     const previewTheme = ref<string>('default');
-    const codeCssName = ref<string>('gradient');
+    const codeCssName = ref<string>('kimbie');
 
     return () => (
       <div class={['app', theme.value === 'dark' && 'theme-dark']}>
-        {codeCssName.value}
         <Header
           theme={theme.value}
           onChange={(v: Theme) => (theme.value = v)}
@@ -31,6 +31,11 @@ export default defineComponent({
             previewTheme={previewTheme.value}
             codeCssName={codeCssName.value}
           />
+          <PreviewOnly
+            theme={theme.value}
+            previewTheme={previewTheme.value}
+            codeCssName={codeCssName.value}
+          />
         </div>
       </div>
     );

dev/Header/index.tsx

@@ -39,7 +39,7 @@ export default defineComponent({
             </button>
             <button
               class="btn btn-header"
-              onClick={() => props.onPreviewChange('github')}
+              onClick={() => props.onPreviewChange('cyanosis')}
             >
               cyanosis
             </button>

dev/Preview/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, reactive, PropType, onUnmounted, watch } from 'vue';
 import Editor from '../../MdEditor';
-import { mdText } from '../data';
+import mdText from '../data.md';
 import { Theme } from '../App';
 import axios from 'axios';
 import 'katex/dist/katex.min.css';
@@ -231,18 +231,14 @@ export default defineComponent({
             }
           ></Editor>
           <br />
-          {/* <Editor
+          <Editor
             editorId="md-prev-2"
             theme={props.theme}
             previewTheme={props.previewTheme}
-            codeCssName="kimbie"
+            codeCssName={props.codeCssName}
             modelValue={md.text2}
             onChange={(value) => (md.text2 = value)}
-          /> */}
-          <br />
-          <span class="tips-text">
-            tips：本页上方的编辑器有localstorage保存功能，可手动点击保存触发，每次操作后两秒会自己保存一次，可用于一些文档的编辑。
-          </span>
+          />
         </div>
       </div>
     );

dev/PreviewOnly/index.tsx

@@ -0,0 +1,28 @@
+import { defineComponent, PropType } from 'vue';
+import Editor from '../../MdEditor';
+import { Theme } from '../App';
+import mdText from '../data.md';
+
+export default defineComponent({
+  props: {
+    theme: String as PropType<Theme>,
+    previewTheme: String as PropType<string>,
+    codeCssName: String as PropType<string>
+  },
+  setup(props) {
+    return () => (
+      <div class="doc">
+        <div class="container">
+          <Editor
+            theme={props.theme}
+            previewTheme={props.previewTheme}
+            codeCssName={props.codeCssName}
+            modelValue={mdText}
+            previewOnly
+            showCodeRowNumber
+          />
+        </div>
+      </div>
+    );
+  }
+});

dev/data.md

@@ -0,0 +1,39 @@
+## 1. md-editor-v3
+
+Markdown 编辑器，基于 react，使用 jsx 和 typescript 语法开发，支持切换主题、prettier 美化文本等。
+
+### 1.1 基本演示
+
+**加粗**，<u>下划线</u>，_斜体_，~删除线~，上标<sup>26</sup>，下标<sub>[1]</sub>，`inline code`，[超链接](https://imbf.cc)
+
+> 引用：世界上没有绝对，只有相对
+
+## 2. 代码演示
+
+```js
+import { defineComponent, ref } from 'vue';
+import MdEditor from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+
+export default defineComponent({
+  name: 'MdEditor',
+  setup() {
+    const text = ref('');
+    return () => (
+      <MdEditor modelValue={text.value} onChange={(v: string) => (text.value = v)} />
+    );
+  }
+});
+```
+
+## 3. 文本演示
+
+依照普朗克长度这项单位，目前可观测的宇宙的直径估计值（直径约 930 亿光年，即 8.8 × 10<sup>26</sup> 米）即为 5.4 × 10<sup>61</sup>倍普朗克长度。而可观测宇宙体积则为 8.4 × 10<sup>184</sup>立方普朗克长度（普朗克体积）。
+
+## 4. 表格演示
+
+| 昵称 | 猿龄（年） | 来自      |
+| ---- | ---------- | --------- |
+| 之间 | 3          | 中国-重庆 |
+
+## 5. 占个坑@！

dev/vite-env.d.ts

@@ -5,3 +5,8 @@ declare module '*.vue' {
   const component: DefineComponent;
   export default component;
 }
+
+declare module '*.md' {
+  const Component: ComponentOptions;
+  export default Component;
+}

vite.config.ts

@@ -3,6 +3,7 @@ import { UserConfigExport, ConfigEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import nodeService from './vitePlugins/nodeService';
+import markdownImport from './vitePlugins/markdownImport';
 
 // https://segmentfault.com/a/1190000040127796
 import dts from 'vite-plugin-dts';
@@ -44,6 +45,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
       vue(),
       vueJsx(),
       mode !== 'production' && nodeService(),
+      mode !== 'production' && markdownImport(),
       mode === 'production' &&
         dts({
           include: [

vitePlugins/markdownImport.ts

@@ -0,0 +1,17 @@
+import { Plugin } from 'vite';
+
+export default (): Plugin => {
+  return {
+    name: 'vite-plugin-markdownImport',
+    enforce: 'pre',
+    transform(code, id) {
+      if (/\.md$/.test(id)) {
+        return {
+          code: `export default ${JSON.stringify(code)}`
+        };
+      } else {
+        return null;
+      }
+    }
+  };
+};