Search code examples
markdowndocpad

Structuring Markdown files in DocPad

My website currently has some pages of the form:

<div class="main">
  <div class="slide">
    ( slide content )
  </div>
  <div class="examples">
    ( examples content )
  </div>
  <div class="remarks">
    ( remarks content )
  </div>
  ...
</div>

The 'examples' and 'remarks' sections are both optional and there can be multiple 'slide' sections.

I'm moving the site over to DocPad and have decided to transform all of the existing markup to Markdown format. Markdown lacks a way to structure pages, so I've attempted various techniques to reintroduce my required structure, without success.

I'm using Robotskirt/Sundown and have found that if I write the <div> inline in the .md files:

<div class="slide">
  ( slide content )
</div>

The slide content is not processed as Markdown. Supposedly, adding a markdown="1" attribute ought to make this work. But it doesn't. Perhaps Sundown doesn't understand that.

My latest attempt was to use inline replacements to pre/post process the content (unsure at which stage the replacement was made). I added the following inline replacements to docpad.config:

plugins:
  robotskirt:
    inline:
      # Slides etc.
      out = out.replace /^---\s*start (\w+)\s*---$/g, (whole, m1) ->
        hash '<div class="' + m1 + '">'
      out = out.replace /^---\s*end (\w+)\s*---$/g, (whole, m1) ->
        hash '</div>'

And added markers to the .md files:

--- start slide ---

( slide content )

--- end slide ---

This works, but because replacement occurs on 'normal text' I end up with spurious paragraphs:

<p><div class="slide"></p>

Is there any workable technique for this, or should I just bin Markdown?

Solution

  • Markdown is really just for basic blog-like text entry. You might want to think about eco templates which give you a lot more control that markdown doesn't. In eco you'd be looking at something like this:

    <div class="main">
 <% if (@something > 2): %>
  <div class="slide">
   ( slide content )
  </div>
<% end %> 
  <div class="examples">
     ( examples content )
  </div>
 <% if (@somethingElse > 2): %>
  <div class="remarks">
   ( remarks content )
  </div>
<% end %> 
  ...
</div>

    How does that sound?