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，加上就可以（代码高亮样式都是给hljsclass加上的背景色），这算是一种解决方法，但是不优雅