How does one actually use Markdown with Meteor

Question

I'm working on a project with Meteor, and I want it to use markdown, and it was very nice to see that there is a package to do that with.

So I meteor added showdown, it worked, and now I can do something like

{{#markdown}}
    #This is a header

    this is a paragraph
{{/markdown}}

and it works just fine. But now I want to actually put something more interesting in there. First thought was to sync it up with a textarea. I tried three things. First, I tried this:

$('.preview').html('{{#markdown}}'+$('#text').val()+'{{/markdown}}');

Where .preview is a div that I want to html to show up in, and #text is the textarea where someone is typing. This doesn't work though, it just shows the {{#markdown}} and stuff.

Next, I tried to just set up the div like this:

<div class="preview">
    {{#markdown}}

    {{/markdown}}
</div>

And add to it with:

$('.preview').html('#Is this an H1?');

or

$('.preview').append('*is this italics?*');

But again, it just showed the text, not the html.

Finally, I tried hard coding stuff into the markdown section, but that just clearly didn't work. Things like

<div class="preview">
    {{#markdown}}
        <div class="previewInner">

        </div>
    {{/markdown}}
</div>

or

<div class="span6 preview">
    {{#markdown}}
        {{>innerPreview}}
    {{/markdown}}
</div>

So basically, I've tried everything I can think of and none of it does what I want. I tried I few more things, but I think you get the idea. How am I supposed to use this?

It's easy: just put your markdown inside {{#markdown}} ... {{/markdown}} tags.

Answer 1

Everything inside markdown is considered markdown so make sure you do this:

{{#markdown}}{{>innerPreview}}{{/markdown}}

Instead of

{{#markdown}}
    {{>innerPreview}}
{{/markdown}}

The jquery wouldn't work because {{markdown}} is rendered before the DOM is put in place.

Instead use a session

Template.hello.markdown_data = function() {return Session.get("markdown_data")});

Then your template

{{#markdown}}{{{markdown_data}}}{{/markdown}}

Then store your markdown document in

Session.set("markdown_data","<your markdown data>");