无法创建html包装器,如何防止Markdown将生成的HTML包装在<p>元素中？</p>

话虽如此，我所知道的最简单的解决方案是清理markdown，将其作为后处理步骤通过白名单运行。

简单地剥离

代码可能是不够的，因为意外添加#字符并最终使用流浪h1-6代码或内联{{1}相对容易

元素中不允许使用的元素。

只要您处于浏览器上下文或使用类似的DOM API，白名单在JS中就非常简单。

此示例获取

的输出并生成文档片段。然后根据片段中的节点phrasing content(它们是marked个元素可能包含的唯一节点)对片段中的节点进行过滤。在过滤之后，然后返回结果节点，以便它们可以在DOM中使用。

const phrasingContent = [

'#text', 'a', 'abbr', 'area', 'audio', 'b', 'bdi', 'bdo', 'br', 'button',

'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed',

'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'map', 'mark',

'math', 'meter', 'noscript', 'object', 'output', 'picture', 'progress', 'q',

'ruby', 's', 'samp', 'script', 'select', 'small', 'span', 'strong', 'sub',

'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', 'video', 'wbr'

]

function sanitize(text) {

const t = document.createElement('template')

t.innerHTML = text

whitelist(t.content, phrasingContent)

return t.content

}

function whitelist(parent, names) {

for (const node of parent.childNodes) {

whitelist(node, names)

if (!names.includes(node.nodeName.toLowerCase())) {

unwrap(node)

}

}

}

function unwrap(node) {

const parent = node.parentNode

while (node.firstChild) {

parent.insertBefore(node.firstChild, node)

}

parent.removeChild(node)

}

function empty(node) {

while (node.firstChild) {

node.removeChild(node.firstChild)

}

}

const form = document.querySelector('form')

const input = document.querySelector('textarea')

const output = document.querySelector('output')

form.addEventListener('submit', e => {

e.preventDefault()

empty(output)

output.appendChild(sanitize(marked(input.value)))

}, false)

当然，所有这些都假设一个浏览器环境，并且可以在通过

*foo*

Test

text text

库处理输入后处理白名单。