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.extend 登录注册模态框的实现
Dec 29 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue特效之翻牌动画
Apr 20 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python反转序列的方法实例分析
2018/03/21 Python
python实现顺序表的简单代码
2018/09/28 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python必须了解的35个关键词
2020/07/16 Python
python图片合成的示例
2020/11/09 Python
Python爬取梨视频的示例
2021/01/29 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
面包店的创业计划书范文
2014/01/16 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书