微客导航 » 文章资讯 » Vue单页面应用中实现Markdown渲染

Vue单页面应用中实现Markdown渲染

2023-07-05 15:48:07 263

之前渲染Markdown的时候,笔者使用的是mavonEditor的预览模式,使用起来比较爽,只需要引入组件即可,但是在最近的开发中,遇到了困难.

主要问题在于作为单页面应用,站内链接必须是使用router-link跳转,如果使用mavonEditor默认渲染的a标签,就会重新加载页面,用户体验较差.

动态渲染

想要实现在前端动态地根据用户内容渲染router-link,需要使用动态渲染,根据官方文档,直接修改vue.config.js即可:

//vue.config.js
module.exports={
runtimeCompiler:true
}

笔者使用的是markdown-it,配置过程如下:

npminstallmarkdown-it--save#本体
npminstallmarkdown-it-highlightjs--save#代码高亮
npminstallmarkdown-it-katex--save#latex支持

这里还另外安装了两个语法插件,如果有其他需要的话,可以在npm上搜索

highlight.js
通过cdn导入,在index.html中加入:

markdown的样式

npminstallgithub-markdown-css--save

在main.js文件中添加

import'github-markdown-css/github-markdown.css'

通过cdn导入,在index.html中加入:

首先在components目录下创建Markdown.vue文件,

然后在想使用的地方导入即可

以上就是Vue单页面应用中实现Markdown渲染的详细内容，更多关于vueMarkdown渲染的资料请关注毛票票其它相关文章！