前端markdown解析器marked的使用与在ie中的兼容问题

最近在vue项目中遇到解析markdown格式文本的需求
首先看一下接口返回的数据类型：

是md格式的文本
渲染有很多方式，我用的是 marked 插件，也是基于markdown-it，是一款比较受欢迎的解析器

在vue中如何使用？
为了使解析后的code样式能够高亮，我们结合highlight.js实现此效果

• 首先 npm install --save-dev marked highlight.js
• 在 main.js导入，并做相关设置

import hljs from 'highlight.js'
// 下面为highlight相关样式，这一步不能少
import 'highlight.js/styles/googlecode.css'
import marked from 'marked'

// 我们利用vue自定义属性设置生效的dom部分供组件使用
Vue.directive('highlight', (el) => {
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
})
// 相关设置可以参考下方地址
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false
})
Vue.marked = marked

marked配置设置

• 组件中使用

// template:
<div class="mdclass" v-html="mdText" v-highlight></div>
// script
data () {
  // text为md格式文本
  text: ''
},
created () {
  // http.get(url) => this.text = data
},
computed: {
  // mdText为转换后的html文本
  mdText () {
  	return this.marked(this.text)
  }
}

这样就可以正常渲染了，当然解析完成的样式还可以根据需要自定义
但是完成后试着在ie中打开就出现问题了：
一直报错，缺少标识符，在网上也是查各种资料，有说代码规范问题，多了逗号，有说关键字问题
解决：因为之前项目在ie中打开没有问题，就是做了这版需求后出现的问题，我就把问题定在了marked上，最终被我找到问题了，是marked被webpack编译解析顺序的问题，有兴趣的可以参考这里，我在这里就放解决方式了：

// 把
import marked from 'marked'
//换成
import marked from 'marked/lib/marked'

项目中根据需求我对渲染的html字符串还做了很多处理，在这里就不一一展开了，感兴趣的小伙伴可以分享交流