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)

score 1 · Answer 1 · answered Nov 19 '19 at 14:34

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>

score 0 · Answer 2 · answered Jul 22 '20 at 20:38

<html lang="en">
<head>
<title> All assignments with dropdown</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
 

    #inputEditor{
        float:left;
        width:45%;
        height:80%;
        background-color: rgb(235, 246, 250);
        border:1px solid black;
        margin:10px;
        padding: 10px;
    }

    #preView{
        float:right;
        width:45%;
        height:80%;
        background-color: rgb(235, 246, 250);
        border:1px solid black;
        margin:10px;
        padding: 10px;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script>
    
   
    function renderTextFormat(){
        var enteredText=document.getElementById('marked').value.trim();
        document.getElementById('output').innerHTML=marked(enteredText);
    }



</script>
</head>
<body>

<div id="previewer">
    <h3>Assignment 3</h3>
    <div id="inputEditor">
        <div id="header"></div>
        # Hints </br>
        ## This is some markdown </br>
        #### Make List </br>
        - Item 1 </br>
        - Item 2 </br>
        - Item 3 </br>
        #### Make it **bold** or make it *italic* </br>
        <strong>Enter your text : </strong> <input type="text" id="marked" onkeyup="renderTextFormat()" /> &nbsp; 
    </div>
    <div id="preView">
        <div id="hints"></div>
        <div id="output"></div>
    </div>
    <script>
        document.getElementById('header').innerHTML=marked('MarkDown Input\n<hr>');
        document.getElementById('hints').innerHTML=marked('MarkDown Output\n <hr> \n # Hints \n ## This is some markdown \n #### Make List \n - Item 1 \n - Item 2 \n - Item 3 \n #### Make it **bold** or make it *italic*\n');
    </script>
</div>
</body>
</html>

How do I override marked.js ul element?

2 Answers2