Question

如果我有这样的降价：

# A Header

``` javascript
$(document).ready(function() {})
```

它会像这样渲染出来：

<h1>A Header</h1>

<pre><code class="javascript">$(document).ready(function() {})</code></pre>

问题是，我希望将这些三反斜杠代码块编译为HTML ，当它们包含在div 中时，markdown将如下所示：

# A Header

<div class="row">
<div class="span6">
``` javascript
$(document).ready(function() {})
```
</div>
</div>

这样我就可以利用markdown和twitter bootstrap，例如。

但是当我这样做时，代码块永远不会被处理。如果没有深入编写HTML解析代码，有没有办法实现？

谢谢！

Answer 1

根据Markdown spec（例如它）：

在块级HTML标记中不处理Markdown格式化语法。例如，您不能在HTML块中使用Markdown样式的*emphasis*。

Redcarpet GitHub页面上有一个feature request，但不幸的是，没有任何结论可以帮助你。

这里阻力最小的路径可能是通过Redcarpet运行它，然后通过Nokogiri运行生成的HTML，再次通过Redcarpet运行每个块级节点的内容。 E.g：

require 'redcarpet'
require 'nokogiri'

block_nodes = %w(p div blockquote ...) #¹

markdown = Redcarpet::Markdown.new Redcarpet::Render::HTML,
             :fenced_code_blocks => true

html = markdown.render text

noko_doc = Nokogiri::HTML::DocumentFragment.parse html

noko_doc.css( *block_nodes ).each do |node|
  node.content = markdown.render node.content if node.text?
end

html = noko_doc.to_html

¹https://github.com/tanoku/sundown/blob/master/html_block_names.txt

当然，如果你有多个嵌套级别（包含一个包含HTML块的Markdown块的HTML块等），你必须在你生成的任何新HTML节点上递归地执行此操作。这很容易，但显然具有性能影响，这就是为什么我说“阻力最小的路径”而不是“所有情况下的最佳解决方案。”

如何使用包装在div中的Redcarpet在markdown中渲染```代码块？

1 个答案: