如何覆盖marked.js ul 元素？答案

【问题标题】：How do I override marked.js ul element?如何覆盖marked.js ul 元素？
【发布时间】：2019-11-18 09:32:31
【问题描述】：

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

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)

【问题讨论】：

标签： javascript markdown nunjucks javascript-marked

【解决方案1】：

这可能需要进一步调整，但应该可以帮助您入门：

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>

【讨论】：

【解决方案2】：

<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>

【讨论】：