Customize {{#markdown}} behavior in Meteor

Question

I love Markdown. The concept is one of the most elegant and useful I've come across in my few years as a programmer. So I was excited to see Meteor implement a Showdown package and let me use it with the {{#markdown}} block helper.

However, when I started using it, my least favorite gotcha of markdown suddenly appeared: Indented Code Blocks.

Writing this:

<template name="home">
    {{#markdown}}
        Hello!!! Welcome to *My Site*!!
    {{/markdown}}
</template>

Results in this:

My Hello!!! Welcome to *My Site*!!

Formatted as CODE!!!!

I hate indented code blocks. They completely screw with attempts to actually use Markdown in a programming environment. Code is wildly indented, and for good reasons. It keeps things organized and makes behavior clear. So the fact that Markdown specifications have for years missed this is flabbergasting to me. Github's fenced code blocks are an infinitely more intelligent way to do this, since it doesn't require repetitive punching of the tab or space key, making it easier to edit, and it's clearer what's happening in the text.

Anyway, </rant>.

I want to customize the markdown being used by meteor. How?? I've looked through Atmosphere and searched markdown, and found nothing applicable. Also, I'm not sure how to use a Showdown extension in the meteor environment.

Any solutions welcome!! All I really want is a markdown implementation that doesn't have indented code blocks. They're stupid.

Answer 1

Why not implement your very own markdown helper:

// this is based on showdown package in spark branch
Handlebars.registerHelper('markdown', function (options) {
  return UI.block(function () {
    var self = this;
    return function () {
      var renderer = new marked.Renderer();
      var text = UI.toRawText(self.__content, self /* parentComponent */);
      return HTML.Raw(marked(trimIndentation(text), { renderer: renderer }));
    };
  });
});

where trimIndentation can look more or less like this:

function trimIndentation(text) {
  var regexp = null,
      result = "";
  return text.split('\n').map(function (line) {
    var match = (regexp || /(\s*)(\s*[^\s]+.*)/).exec(line);
    if (match) {
      !regexp && (regexp = new RegExp("(\\s{" + match[1].length + "})(.*)"));
      return match[2];
    }
    return line;
  }).join('\n');
}

In the above example I used the syntax of the new templating engine as well as I used the marked library instead of good old showdown (or should I say pagedown?), but you can of course do the same thing with a setup of your own choice.