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

https://img1.mukewang.com/5cb3e5c6000177d306820346.jpg

如图

以下是代码。


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>


慕尼黑8549860
浏览 3587回答 2
2回答

大魔王加菲月

因为pre标签缺失hljs这个class,加上就好了将拿到的markdown内容,用marked转成html字符串后,replace替换<pre>标签为<pre class="hljs">marked(拿到的markdown内容).replace(/<pre>/g, "<pre class='hljs'>")

qq_遁去的一_1

具体原因是pre标签没有hljs这个class,加上就可以(代码高亮样式都是给hljsclass加上的背景色),这算是一种解决方法,但是不优雅
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript