Vue ---markdown格式转html，语法高亮

Vue —markdown格式转html，语法高亮

此需求分为多个步骤：

• 1、将markdown文件的字符串转为html，展示在页面上
• 2、对语法要进行高亮展示
• 3、markdown的样式调整

1、将markdown文件的字符串转为html，展示在页面上

• 1、我这边的test案例是自己写的markdown的字符串进行转的，当然，也可以调后台接口拿到markdown的json字符串
• 1、安装两个插件
  github的地址（https://github.com/highlightjs/highlight.js ； https://github.com/markdown-it/markdown-it）
  cnpm i markdown-it --save
  cnpm i highlight.js --save
• 2、 使用的组件
  import MarkdownIt from ‘markdown-it’
  import hljs from ‘highlight.js’;
  import ‘highlight.js/styles/default.css’;
• 3、 使用 markdown-it 将markdown转成html需要的格式

 const md = new MarkdownIt();
 this.result = md.render('## 你好')

上面的result 就是html所需要的代码格式
放在html元素上 用v-html即刻展示出来了

<p v-html="result "></p>

2、对语法要进行高亮展示

这里用到的就是第二个插件，highlight.js

• 直接贴代码了

 const md = new MarkdownIt({
   
   
        highlight: function (str, lang)