vue3中使用markdown

简介: vue3中使用markdown

vue3安装markdown

# 使用 npm
npm i @kangc/v-md-editor@next -S


在main.js中注册

import { createApp } from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});
const app = createApp(/*...*/);
app.use(VueMarkdownEditor);

在自己注册的组件内使用

<template>
  <v-md-editor v-model="article.text" height="400px"></v-md-editor>
</template>
<script setup>
import { reactive } from 'vue'
const article = reactive({
  text:''
})
</script>

下图为使用markdown成功后的截图

b6dcbd7842a84b3b941c634d5ede4db1.png

相关文章
|
7月前
|
JavaScript 前端开发
Vue3解析markdown解析并实现代码高亮显示
Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮。 Vue的markdown解析库有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked,代码高亮的库选用的是highlight.js。
392 0
Vue3解析markdown解析并实现代码高亮显示
|
JavaScript
在vue3中使用markdown编辑器
在vue3中使用markdown编辑器
在vue3中使用markdown编辑器
Vue3——v-md-editor(markDown编辑器)使用教程
v-md-editor(markDown编辑器)使用教程
591 0
|
3天前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
|
3天前
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
28 0
|
3天前
|
机器学习/深度学习 uml
Markdown编辑器用法保存自用
Markdown编辑器用法保存自用
|
3天前
|
Linux Docker 容器
Linux本地搭建StackEdit Markdown编辑器结合内网穿透实现远程访问
Linux本地搭建StackEdit Markdown编辑器结合内网穿透实现远程访问
40 0
|
3天前
|
前端开发 C++ iOS开发
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
59 1
|
3天前
|
存储 JavaScript 前端开发
使用Strve.js来搭建一款 Markdown 编辑器
今天,我们来使用Strve.js来搭建一款 Markdown 编辑器,没错!你没听错。我们需要创建了一个实时 Markdown 编辑器,用户可以在 textarea 中输入 Markdown 文本,然后实时显示转换后的 HTML。你可能会说使用 Strve.js 开发会不会写的特别复杂难懂啊,还不如用 Vue.js 呢!
|
3天前
|
API CDN
Electron Markdown编辑器实战:资源管理器实现
Electron Markdown编辑器实战:资源管理器实现