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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步