一站式解决vue解析markdown,代码高亮,目录获取

解析文件

安装markdown的loader
cnpm i html-loader markdown-loader --save-dev

在vue.config.js文件内添加配置,添加完后需要重新启动项目

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}

现在引入就可以解析

<template>
  <div>
    <div v-html="readme"></div>
  </div>
</template>
<script>
import readme from '../../assets/java.md'
export default {
  data () {
    return {
      readme: readme
    }
  }
}
</script>

代码高亮

接下来进行代码高亮处理
安装highlight.js

npm install --save highlight.js

新建工具文件highlight.js

import Hljs from 'highlight.js'
import '../assets/style.css' // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件

const Highlight = {}
// 自定义插件
Highlight.install = function (Vue) {
// 自定义指令 v-highlight
  Vue.directive('highlight', {
    // 被绑定元素插入父节点时调用
    inserted: function (el) {
      const blocks = el.querySelectorAll('pre code')
      for (let i = 0; i < blocks.length; i++) {
        Hljs.highlightBlock(blocks[i])
      }
    },
    // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
    componentUpdated: function (el) {
      const blocks = el.querySelectorAll('pre code')
      for (let i = 0; i < blocks.length; i++) {
        Hljs.highlightBlock(blocks[i])
      }
    }
  })
}

export default Highlight

可以自己定义样式,也可以引用highlight.js的,这里我自定义的样式,上面也引入的就是自己写的,字体引入了字体

@import "./font/CascadiaCode/font.css";

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #282C34;
  font-family: CascadiaCode;
  width: 50%;
}

.hljs,
.hljs-subst {
  color: #5097DE;
}

.hljs-comment {
  color: #616a77;
}

.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
  font-weight: bold;
  color:#C578D9 ;
}


.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
  color: #97BC63;
}

.hljs-title,
.hljs-section {
  color: #E2C072;
  font-weight: bold;
}

.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #BC6060;
}

.hljs-literal {
  color: #78A960;
}

.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
  color: #397300;
}

.hljs-meta {
  color: #1f7199;
}

.hljs-meta-string {
  color: #4d99bf;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-params{
    color: #53caac;
}

然后在main.js中进行引入使用

import Highlight from './utils/highlight'
Vue.use(Highlight)

然后就可以使用了

<template>
  <div v-highlight>
    <div v-html="readme"></div>
  </div>
</template>
<script>
import readme from '../../assets/java.md'
export default {
  data () {
    return {
      readme: readme
    }
  }
}
</script>

最终效果

获取目录

我们先给内容加个id
<template>
  <div v-highlight>
    <div
      id="content"
      v-html="readme"
    ></div>
  </div>
</template>

写个方法

<script>
import readme from '../../assets/java.md'

export default {
  data () {
    return {
      readme: readme
    }
  },
  methods: {
    tete () {
      const content = document.getElementById('content').children
      var arr = [{
        content: '',
        children: []
      }]
      let h1 = 0
      let h2 = 0
      let h3 = 0
      let h4 = 0
      let h5 = 0
      for (let i = 0; i < content.length; i++) {
        var element = { content: '', children: [] }
        if (content[i].localName === 'h1') {
          element.content = content[i].innerHTML
          if (h1 === 0) {
            arr[0] = element
            h1++
          } else {
            arr.push(element)
            h1++
          }
          h2 = 0
          h3 = 0
          h4 = 0
          h5 = 0
        }
        if (content[i].localName === 'h2') {
          element.content = content[i].innerHTML
          arr[h1 - 1].children.push(element)
          h2++
          h3 = 0
          h4 = 0
          h5 = 0
        }
        if (content[i].localName === 'h3') {
          element.content = content[i].innerHTML
          arr[h1 - 1].children[h2 - 1].children.push(element)
          h3++
          h4 = 0
          h5 = 0
        }
        if (content[i].localName === 'h4') {
          element.content = content[i].innerHTML
          arr[h1 - 1].children[h2 - 1].children[h3 - 1].children.push(element)
          h4++
          h5 = 0
        }
        if (content[i].localName === 'h5') {
          element.content = content[i].innerHTML
          arr[h1 - 1].children[h2 - 1].children[h3 - 1].children[h4 - 1].children.push(element)
          h5++
        }
        if (content[i].localName === 'h5') {
          element.content = content[i].innerHTML
          arr[h1 - 1].children[h2 - 1].children[h3 - 1].children[h4 - 1].children[h5 - 1].children.push(element)
        }
      }

      console.log(arr)
    }
  },
  mounted () {
    this.tete()
  }
}
</script>

<style >
p {
  color: #4c4948;
}
</style>