·1.下載對應(yīng)插件

pnpm add markdown-it highlight.js

2使用

2.1 markdown-it的使用

<template>
  <div class="text-content markdown-body">
    <div v-highlight v-html="renderedMarkdown" />
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'
export default {
  components: {
  },
  props: {
    source: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  computed: {
    renderedMarkdown() {
      return this.md.render(this.source)
    }
  },
  created() {
    this.md = new MarkdownIt()
  }
}
</script>
<style lang="scss" scoped>
// 修改內(nèi)部樣式
.markdown-body::v-deep {
  > p:nth-last-of-type(1) {
    margin: 0 !important;
  }
  table {
    margin-top: 10px !important;
  }
  ul {
    li::before {
      content: '\2022'; /* 使用 Unicode 或其他字符表示小點 */
      color: #3a7fff; /* 設(shè)置小點顏色 */
      display: inline-block; /* 使小點與文本在同一行 */
      width: 1em; /* 調(diào)整小點的寬度，以適應(yīng)需要的大小 */
      font-size: 16px;
      margin-left: -1em; /* 負(fù)的左邊距使小點與文本對齊 */
    }
  }
  ol > li::marker {
    color: #3a7fff;
  }
  pre{
    font-size: 70%;
  }
}
</style>

2.2 highlight 的使用

import '@/assets/css/markdown-css/github-markdown-light.css'
import 'highlight.js/styles/atom-one-dark.css'
import hljs from 'highlight.js'
import Vue from 'vue'
// 通過 import * as hljs from 'highlight.js' 引入
Vue.directive('highlight', function (el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightElement(block)
    block.classList.add('hljs')
  })
})