安裝markde.js 與代碼高亮插件 highlight.js

npm install marked
npm install highlight.js

用法

<template>
  <div v-html="markdownString" class="md"></div>
</template>

<script>
//引入marked解析模塊 與 代碼高亮插件 以及對應的樣式文件
import marked from 'marked'
import hljs from 'highlight.js'
import '../../assets/css/yeh-md-theme.css'
import '../../assets/css/ocean.min.css'

//基本配置與代碼高亮配置
marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code) {
        return hljs.highlightAuto(code).value;
    }
});

let markdownString = '```js\n console.log("hello"); \n```';
markdownString = marked(markdownString)
</script>

頁面渲染效果

console.log("hello");