?marked是對markdown進行解析的插件，它可以把markdown語法解析成html語法，從而實現頁面效果，而highlight.js是對解析出的代碼實現高亮效果

效果：

安裝：避免踩我走的坑，安裝盡量按照這個版本安裝

npm install marked@0 --save

npm install highlight.js@9 --save

?

代碼：index.vue

<template><div class="detail"><div class="markdown-body"><div class="article_message hljs renderNav" v-html="code"></div></div></div>
</template><script>
import marked from "marked"; // 引入marked
import hljs from "highlight.js"; // 引入 highlight.js
import "highlight.js/styles/monokai-sublime.css"; // 引入高亮樣式 這里我用的是sublime樣式export default {name: "Detail",data() {return {code: "```javascript\nfunction(){\n\tconsole.log(123) //注釋\n}\njavascript\nfunction(){\n\tconsole.log(123) //注釋\n}\njavascript\nfunction(){\n\tconsole.log(123) //注釋\n}\njavascript\nfunction(){\n\tconsole.log(123) //注釋\n}\n```", // 要解析的markdown語法的內容};},mounted() {var rendererMD = new marked.Renderer();marked.setOptions({renderer: rendererMD,highlight: function (code, language) {const validLanguage = hljs.getLanguage(language)? language: "plaintext";return hljs.highlight(validLanguage, code).value;},pedantic: false,gfm: true,tables: true,breaks: false,sanitize: false,smartLists: true,smartypants: false,xhtml: false,});this.code = marked(this.code); // 將markdown內容解析},
};
</script>