Vue渲染Markdown数据

零,最简单方法

今天在找基于Vue的markdown编辑器时,找到了mavonEditor模块,本来想着通过抽离抽出展示Markdown数据相关的代码,结果忙活了一阵,突然看见文档有提示怎么只展示Markdown数据
基于Vue的markdown编辑器

仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen:
“preview”

一 ,前言

由于需要,要把Markdown数据渲染在页面上。刚开始在网上找了一大圈,要么只能把md文件通过插件转换为vue组件来渲染,虽然有通过Markdown数据来渲染,但是出来的结果不太理想。在看完几篇关于vue渲染Markdown的文章后,经过一番尝试,终于弄好了。

二,实现过程

  • 需要提前安装的npm包
npm install vue-loader vue-template-compiler -D
  • 在安装vue-markdown插件
npm install --save vue-markdown
  • 然后在需要用到的地方引入刚刚安装的插件
import VueMarkdown from 'vue-markdown'
export default {
  components: {
    VueMarkdown // 注入组件
  },
  data () {
    return { 
      value: MarkdownData // value的值是要解析的markdown数据
    }
  }
}
  • 使用注入的组件
<VueMarkdown :source="value"></VueMarkdown>
  • 相关配置信息参考vue-markdown
  • 使用vue-markdown后的效果
    当前效果
  • 现在看着不是很理想,接着处理
  • 通过npm安装,需要用到的样式包
npm install github-markdown-css
  • 在main文件,引入css文件
import 'github-markdown-css/github-markdown.css'
  • 添加类名:markdown-body
<div class="markdown-body">
    <VueMarkdown :source="value"></VueMarkdown>
</div>
  • 添加样式之后的效果
    当前效果
  • 紧接着添加代码高亮效果
  • 通过npm安装需要的包
npm install highlight.js
  • 在mian文件中编写vue自定义指令
import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js'
// 如果开启了typescript 需要额外安装 npm install @types/highlight.js
// 通过 import * as hljs from 'highlight.js' 引入
Vue.directive('highlight', function (el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightBlock(block)
  })
})
// 也可以把这自定义指令封装 通过Vue.use(),来注入
  • 使用自定义指令 v-highlight
 <div class="markdown-body">
     <VueMarkdown :source="value" v-highlight></VueMarkdown>
 </div>
  • 添加代码高亮后的效果
    添加代码高亮后的效果

三,总结

记录一下,免得到时候,又搞半天。
关于Markdown数据保存至服务器和从服务器获取Markdown数据,个人觉得可以将Markdown进行编码,我使用的是Base64,使用Base64需要注意一些字符会被转换为html格式的编码(比如:’ < >)

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值