Question

If I have markdown like this:

# A Header

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

It will render out like this:

<h1>A Header</h1>

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

The issue is, I want to have those triple-backslash code blocks compile to HTML when they are wrapped in a div, so the markdown would look like this:

# A Header

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

This way I can take advantage of both markdown and twitter bootstrap, for example.

But when I do that, the code block is never processed. Is there any way to accomplish without getting too deep into writing HTML parsing code?

Thanks!

Answer 1

Per the Markdown spec (such as it is):

Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

There’s a feature request on the Redcarpet GitHub page but unfortunately there’s no conclusion that will help you.

Probably the path of least resistance here would be to run it through Redcarpet, then run the resulting HTML through Nokogiri, running the contents of each of its block-level nodes through Redcarpet again. 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

Of course if, if you have more than one level of nesting (an HTML block containing a Markdown block containing an HTML block and so on) you’ll have to do this recursively on any new HTML nodes you generate. This would be easy but obviously has performance implications, which is why I said “path of least resistance” and not “best solution in all cases.”