Vue解析markdown字符串，并且将其展示到页面(代码高亮+代码行号显示)

Vue解析markdown字符串，并且将其展示到页面(代码高亮+代码行号显示)，具体步骤如下：

(1) 安装依赖

// marked用于将markdown转换成html
cnpm install marked -S

// 用于代码高亮显示
cnpm install highlight.js -S

// 代码行号显示插件
cnpm install highlightjs-line-numbers.js

(2) 在main.js文件中引入highlight.js

import highlight from 'highlight.js';
Vue.use(highlight);

(3) 创建一个全局指令，用于代码高亮显示

在main.js文件中，创建一个自定义全局指令，如下所示：

//封装成一个指令
Vue.directive('highlight', (el) => {
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    highlight.highlightBlock(block)
  })
})

在v