How do I override marked.js ul element?

Question

I'm using marked.js through nunjucks-markdown to render markdown in a node/express app.

The markdown content is being rendered fine, however, I want to set default classes on the ul element.

By default it comes through as:

 <ul>

but I'd like to globally override it so it's rendered as:

<ul class='toolkit-list'>

In my app.js file i've tried:

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)

Answer 1

This might need further adjustment but should get you started:

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 }));

Produced output:

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