Question

更新：赏金是针对使用“已标记”库的解决方案。

此Markdown代码：

*foo*

将生成此HTML代码：

<p><em>foo</em></p>

现场演示： https://jsbin.com/luganot/edit?js,console

但是，我已经将生成的HTML代码注入到内联上下文中，如下所示：

<p> text [inject generated HTML here] text </p>

所以我不希望<p>元素包围生成的HTML代码。我只想将*分隔符转换为<em>元素，依此类推。

有没有办法告诉Markdown转换器不生成<p>包装器？目前，我正在对生成的HTML字符串执行.slice(3,-4)，这会删除<p>和</p>标记，但这显然不是我的解决方案。喜欢保持长期。

Answer 1

您可以跳过block-lexing部分并使用inlineLexer。

html = marked.inlineLexer(markdown, [], options);

//example
marked.inlineLexer('*foo*', []) // will output '<em>foo</em>'

Answer 2

使用jQuery会是一个选择吗？这将适用于：

var $text = $(new Showdown.converter().makeHtml( '*foo*' ) );
console.log( $text.html() );

Answer 3

当我找到这个SO线程时，我也在寻找解决方案。我在这里找不到任何好的解决方案，所以我写了自己的。

var markdown = new Showdown.converter().makeHtml( '*foo*' );
console.log(markdown.replace(/^<p>|<\/p>$/g, ''));

Answer 4

如果您遵循commonmark standard，则没有正式的方法可以从标记中删除不需要的元素，否则会产生降价。 In 2014 I asked about the possibility of an inline mode，但这并没有真正产生太多活动，我从来没有跟进它以使其成为现实。

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

简单地剥离<p>代码可能是不够的，因为意外添加#字符并最终使用流浪h1-6代码或内联{{1}相对容易<div>元素中不允许使用的元素。

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

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

<p>

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)

当然，所有这些都假设一个浏览器环境，并且可以在通过<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> <form> <p> <textarea name="input" cols="30" rows="10">*foo*</textarea> </p> <button type="submit">Test</button> </form> <p> text <output></output> text </p>库处理输入后处理白名单。

如何防止Markdown将生成的HTML包装在<p>元素中？</p>

4 个答案: