vue 引入md 文档并且展示

安装

npm i marked -S npm install github-markdown-css -D npm install highlight.js -D

 

引入

import marked from 'marked'
import hljs from "highlight.js"; // 引入 highlight.js 
import "highlight.js/styles/github.css"; // 引入高亮样式 // 其他元素使用 github 的样式 
import "github-markdown-css";

 

使用

<div v-html="temp"></div>  //html

mounted() {
    var rendererMD = new marked.Renderer(); // 初始化
    marked.setOptions({  //设置样式
      renderer: rendererMD,
        highlight: function(code) {
        return hljs.highlightAuto(code).value;
      },
      pedantic: false,
      gfm: true,
      tables: true,
      breaks: true,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      xhtml: false,
    });
    this.trandform();
    //样式监听
    this.$refs.markdown_id.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    trandform() {
      //转换html
      this.temp = marked("# Marked in the browser\nRendered by **marked**."); // 将markdown内容解析
    },
 }