vue中使用marked和highlight.js代码能高亮但是没有背景

Question

如图以下是代码。import Loading from '~/components/Loading.vue';import marked from "marked";import hljs from "highlight.js";// import 'highlight.js/styles/googlecode.css';import 'highlight.js/styles/atom-one-dark.css';marked.setOptions({  renderer: new marked.Renderer(),  highlight: function(code) {    return hljs.highlightAuto(code).value;  },  pedantic: false,  gfm: true,  tables: true,  breaks: false,  sanitize: false,  smartLists: true,  smartypants: false,  xhtml: false  });article.content = marked(article.content);<div v-html="article.content" ></div>

Answer 1

因为pre标签缺失hljs这个class，加上就好了

将拿到的markdown内容，用marked转成html字符串后，replace替换<pre>标签为<pre class="hljs">

marked(拿到的markdown内容).replace(/<pre>/g, "<pre class='hljs'>")

Answer 2

具体原因是pre标签没有hljs这个class，加上就可以（代码高亮样式都是给hljsclass加上的背景色），这算是一种解决方法，但是不优雅