使用marked实现markdown语法高亮

Marked.js 是一个用 JavaScript 实现的、功能齐全的 Markdown 解析器和编译器。可以非常方便的在线编译 Markdown 代码为 HTML 并直接显示，并且支持完全的自定义各种格式。

github官网
官方文档

一、安装依赖

npm i marked

二、使用方法

<template>
  <div class="" v-html="contentHtml"></div>
  <el-button @click="handleParse">解析</el-button>
</template>
<script>
import { marked } from "marked";
import {highlightSupportLang} from '../../utils/highlightSupportLang'
// 定义语言如 const highlightSupportLang = ['js','html','xml',...]
export default {
  data() {
    return {
      contentHtml: "",
    };
  },
  methods: {
    handleParse() {
      //对marked进行配置
      marked.setOptions({
        highlight: function (code, lang) {
        //此处的highlight.js不需要额外引入,marked自带highlight.js
          const hljs = require("highlight.js");
          console.log("code=", code, "lang=", lang,'hljs.highlight',hljs.highlight);
          const result = lang&&highlightSupportLang.includes(lang)?hljs.highlight(code,{language:lang}).value:hljs.highlightAuto(code).value;
          return result;
        },
        langPrefix: "hljs language-", 
        // highlight.js css expects a top-level 'hljs' class.
      });
      marked.parse("``` js \n alert(1) \n``` ", (err, html) => {
      //注意:如果这边传的不是代码块,marked.setOptions就不会被触发
        console.log("err=", err, "html=", html);
        this.contentHtml = html;
      });
    },
  },
};
</script>

<style scoped>
@import "highlight.js/styles/dark.css";
</style>