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加上的背景色），这算是一种解决方法，但是不优雅