v-md-editor示例

pnpm create farm@latest #選擇vue3
cd project
pnpm i @kangc/v-md-editor@next

修改index.ts:

import { createApp } from 'vue';
// import './style.css';
import App from './App.vue';

import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs 核心程式碼
import hljs from 'highlight.js/lib/core';
// 按需引入語言包
import json from 'highlight.js/lib/languages/json';
hljs.registerLanguage('json', json);

VueMarkdownEditor.use(githubTheme, {
    Hljs: hljs,
});

createApp(App).use(VueMarkdownEditor).mount('#app');

建立Mark.vue元件：

<template>
    <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
import { ref } from "vue";

export default {
	setup() {
		const text = ref("# Hello");

		return {
			text,
		};
	},
};
</script>

修改App.vue:

<script setup lang="ts">
import Mark from './components/Mark.vue';
</script>

<template>
  <Mark />
</template>