在Nuxt上使用markdown-it覆盖完全包装

时间:2018-08-20 10:33:26

标签: vue.js nuxt.js highlightjs markdown-it

我正在尝试在Nuxt项目中将Markdown-It与Highlight.js一起使用。问题是<pre>元素没有被高亮显示,从而为其中的正确主题的<code>元素创建了一个对比鲜明的光容器。这样会创建一个丑陋的样式,当水平滚动时会显得特别刺眼。

Markdown-帐户为此和allows full wrapper override (if you need assign class to <pre>)

var hljs = require('highlight.js'); // https://highlightjs.org/

// Actual default values
var md = require('markdown-it')({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
               hljs.highlight(lang, str, true).value +
               '</code></pre>';
      } catch (__) {}
    }

    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
});

您如何将其集成到Nuxt项目中?

0 个答案:

没有答案