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


Posted in Vue.js onFebruary 14, 2021

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

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

动态渲染

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

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

渲染 Markdown

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

安装

npm install markdown-it --save # 本体
npm install markdown-it-highlightjs --save # 代码高亮
npm install markdown-it-katex --save # latex 支持

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

静态文件导入

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

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.5.0/build/styles/default.min.css" rel="external nofollow" >
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.5.0/build/highlight.min.js"></script>

github-markdown-css

markdown 的样式

安装

npm install github-markdown-css --save

导入

在 main.js 文件中添加

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

katex

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css" rel="external nofollow" >

使用

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

<template>
 <components :is="html" class="markdown-body"></components>
</template>

<script>
import MarkdownIt from 'markdown-it'
import hljs from 'markdown-it-highlightjs'
import latex from 'markdown-it-katex'
export default {
 name: 'Markdown',
 props: {
  content: String
 },
 data: () => ({
  md: null
 }),
 computed: {
  // 使用 computed 才能在动态绑定时动态更新
  html: function () {
   let res = this.md.render(this.content)
   // 使用正则表达式将站内链接替换为 router-link 标签
   res = res.replace(/<a href="(?!http:\/\/|https:\/\/)(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<router-link to="$1">$2</router-link>')
   // 使用正则表达式将站外链接在新窗口中打开
   res = res.replace(/<a href="(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<a href="$1" rel="external nofollow" target="_blank">$2</a>')
   return {
    template: '<div>' + res + '</div>'
   }
  }
 },
 created () {
  this.md = new MarkdownIt()
  this.md.use(hljs).use(latex)
 }
}
</script>

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

<template>
  <div>
    <Markdown :content="content"/>
  </div>
</template>

<script>
import Markdown from '@/components/Markdown.vue'
export default {
 name: 'Home',
 components: {
  Markdown
 },
 data: () => ({
  content: ''
 }),
 created () {
  this.content = '# 测试'
 }
}
</script>

以上就是Vue单页面应用中实现Markdown渲染的详细内容,更多关于vue Markdown渲染的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue实现购物车的小练习
Dec 21 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 #Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
详解Vue的七种传值方式
Feb 08 #Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
vue如何使用rem适配
Feb 06 #Vue.js
如何管理Vue中的缓存页面
Feb 06 #Vue.js
You might like
新版PHP极大的增强功能和性能
2006/10/09 PHP
dojo 之基础篇
2007/03/24 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
python3排序的实例方法
2020/10/20 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
报关专员求职信范文
2014/02/22 职场文书
交通处罚决定书
2015/06/24 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技