Markdown Vue 组件库. markdown-it-vue 是一个丰富的 markdown Vue 组件,markdown-it-vue 使用 markdown-it 作为 Markdown 数据解析引擎,整合多种 markdown-it 插件,并内置了一些自己的功能性插件,支持 GFM TOC、GFM style、emoji 等通用特性,还支持 mermaid charts、Echarts、flowchart.js 等多种图表,支持...
import App from './App.vue' const app = createApp(App) app.mount('#app') 如果我们在markdown-it中开启html的解析,就可以获取自定义组件的源码,在其身上添加一个id并记录它的相关信息,等到文本被解析为html代码时再通过createApp创建正确的组件再将它通过id挂载到页面上对应的位置,这样我们就实现了markdown...
markdown-it-vue-light remove the mermaid chart to reduce the bundle size. https://github.com/ravenq/markdown-it-vue/issues/24 for a small bundle size, it better to import the markdown-it-vue-light. Usage <template> <div> <markdown-it-vueclass="md-body":content="content"/> </div...
vue提供了一个很有意思的api:createApp,每个项目都会用到它,负责将根节点转化为应用实例,并挂载到body上面,你能在用vite新创建的vue项目的main.js文件里找到它。 importAppfrom'./App.vue'constapp=createApp(App)app.mount('#app') 如果我们在markdown-it中开启html的解析,就可以获取自定义组件的源码,在其...
markdown-it-vue 是一个丰富的 markdown Vue 组件,markdown-it-vue 使用 markdown-it 作为 Markdown 数据解析引擎,整合多种 markdown-it 插件,并内置了一些自己的功能性插件,支持 GFM TOC、GFM style、emoji等通用特性,还支持 mermaid charts、Echarts、flowchart.js 等多种图表,支持 AsciiMath、Latex 等数学...
{html:true,// 允许存在html标签,这是必要的,因为前面处理Vue组件最后会生成html标签typographer:true,// 允许替换一些特殊字符,https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.jshighlight:(str,lang)=>highlight(str,lang,options.style),// 代码高亮,str为要高亮的...
<template> <div id="editor"> <div v-html="result"></div> {{result}} </div> </template> <script> import MarkdownIt from 'markdown-it' import hljs from 'highlight.js' import 'highlight.js/styles/agate.css' export default { name: 'editor', data() { return { md: MarkdownIt(...
{html:true,// 允许存在html标签,这是必要的,因为前面处理Vue组件最后会生成html标签typographer:true,// 允许替换一些特殊字符,https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.jshighlight:(str,lang)=>highlight(str,lang,options.style),// 代码高亮,str为要高亮的...
一、markdown-it简介 markdown-it是一款功能强大的Markdown解析器,支持丰富的Markdown语法,能够轻松将Markdown文本转换为HTML格式。它拥有丰富的插件和配置选项,让你的文档编辑更加灵活多变。 二、markdown-it安装与使用 1.安装markdown-it 你可以通过npm(Node.js包管理器)来安装markdown-it。在命令行中输入以下命...
Vue的markdown解析库有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked,代码高亮的库选用的是highlight.js。 具体实现步骤如下: 一、安装依赖库 在vue项目下打开命令窗口,并输入以下命令 npm install marked -save// marked 用于将markdown转换成htmlnpm...