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) {
          if (lang && hljs.getLanguage(lang))
          {
            try
            {
              return '<pre class="hljs"><code>' +
                hljs.highlight(lang, str, true).value +
                '</code></pre>';
            } catch (__) { }
          }
          return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
        }
      });

3、markdown的样式调整

我是直接用的网上的样式，直接拿过来
新建的了一个css的文件，把样式贴进去就可以了
给大家安利一个链接吧
https://www.zhihu.com/question/60135717/answer/225583124
我用的就是里面李笑来老师的样式，直接copy

---

最后直接给大家上我的一个组件的全部代码

<template>
  <div class="home">
    <textarea type='text'
              id=""
              cols="30"
              rows="10"
              v-model="content"></textarea>
    <p v-html="markdown"></p>
  </div>
</template>
<script>
import '../assets/markdownhere.css'
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';
export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      content: '',
    }
  },
  computed: {
    markdown () {
      const md = new MarkdownIt({
        highlight: function (str, lang) {
          if (lang && hljs.getLanguage(lang))
          {
            try
            {
              return '<pre class="hljs"><code>' +
                hljs.highlight(lang, str, true).value +
                '</code></pre>';
            } catch (__) { }
          }
          return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
        }
      });
      const result = md.render(this.content)
      return result
    }
  },
  methods: {
  },
  mounted () {
  }
}
</script>

game over~~~