vue插入高亮格式化的html代码样式丢失不生效

使用highlightJs格式化代码字符串后，得到了包含高亮样式的html代码。通过v-html显示到页面时，发现class被v-html指令过滤，导致样式失效

原因分析

出现这个问题，可能是2个原因：

1. vue为了防范v-html带来的xss安全隐患，对传入的html代码进行了二次处理
2. vue在处理v-html的样式，对css进行了类似scoped处理，导致样式丢失

具体原因后面再分析确认，今天先解决问题。

解决方案

解决问题的思路，是希望vue能像原生dom一样，直接插入html代码到指定区域。
这里我们用到了vue的domProps，使用render函数定义组件时，domProps能直接将变量输出到dom节点的属性上。

// 实现v-html指令  
// 假定路径：@/components/HtmlView.js
export default {
  props: {
    text: String
  },
  render(h) {
    return h('div', {
      class: 'md',
      domProps: {
        innerHTML: this.text
      }
    })
  }
}

在vue组件中，

1. 通过component的方式引入HtmlView组件

import HtmlView from '@/components/HtmlView'

export default {
  components: {
    HtmlView,
  }
}

2. 将高亮后的html代码传入组件

<HtmlView :text="hljsStr" />

经过上面的处理，页面即可看到高亮后的代码正常展示。对高亮代码中的class进行全局定义即可