个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue单页面应用中实现Markdown渲染由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

动态渲染

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

?
1
2
3
4
// vue.config.js
module.exports = {
  runtimeCompiler: true
}

渲染 Markdown

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

安装

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

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

静态文件导入

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

?
1
2
< 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 的样式 。

安装

?
1
npm install github-markdown-css --save

导入

在 main.js 文件中添加 。

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

katex

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

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

使用

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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渲染的资料请关注我其它相关文章！ 。

原文链接：https://www.cnblogs.com/youxam/p/vue-markdown-render.html 。

最后此篇关于Vue单页面应用中实现Markdown渲染的文章就讲到这里了,如果你想了解更多关于Vue单页面应用中实现Markdown渲染的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

28 4 0
文章推荐： 如何在 Vue 中使用 JSX
文章推荐： c++11 atomic的使用详解
文章推荐： vue仿携程轮播图效果(滑动轮播,下方高度自适应)
文章推荐： 详解ES6实现类的私有变量的几种写法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com