时间戳

首页 > 解决方案 > 如何覆盖marked.js ul 元素？

javascript - 如何覆盖marked.js ul 元素？

问题描述

我通过nunjucks-markdown 使用marked.js 在节点/快速应用程序中呈现markdown。

降价内容呈现良好，但是，我想在 ul 元素上设置默认类。

默认情况下，它通过以下方式：

 <ul>

但我想全局覆盖它，所以它呈现为：

<ul class='toolkit-list'>

在我的 app.js 文件中，我尝试过：

const nunjucksMarkdown = require('nunjucks-markdown');
const marked = require('marked');

let markedRender = new marked.Renderer()
let renderListitem = markedRender.listitem.bind(markedRender)
markedRender.listitem = function(text, task) {
    var html = renderListitem(text, task)
    if (task) {       
         html = html.replace('<ul>', "<ul class='toolkit-list'>")
    }
    return html
  }
nunjucksMarkdown.register(nunjucksAppEnv, marked)

标签： javascriptmarkdownnunjucksjavascript-marked

解决方案

这可能需要进一步调整，但应该让您开始：

const marked = require('marked');

var md_list = `
- First
- Second
`;

const renderer = new marked.Renderer();

renderer.list = function(body, ordered, start) {
    var temp = "<ul class='toolkit-list'>${body}</ul>";

    return temp;
}

console.log(marked(md_list, { renderer: renderer }));

产生的输出：

<ul class='toolkit-list'>
  <li>First</li>
  <li>Second</li>
</ul>

推荐阅读