14

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.

user1624005
  • 967
  • 1
  • 12
  • 18
  • I use markdown in http://superchat.meteor.com/ but with the package marked. It's the same syntax. Just take a look at the code: https://github.com/gabrielhpugliese/meteor_superchat/blob/master/client/views/chatroom.html – gabrielhpugliese Jun 10 '13 at 19:18

1 Answers1

15

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>");

Tarang
  • 75,157
  • 39
  • 215
  • 276
  • Great, this has got it working more like expected. Except I can't get it to make blockquotes. Does Showdown have everything from http://daringfireball.net/projects/markdown/syntax ? – user1624005 Jun 10 '13 at 20:18
  • @user1624005 probably not (github doesn't), no harm raising a pull request if you want it. – booyaa Jun 11 '13 at 08:04
  • 1
    You can use the markdown package named marked. It seems to have support for blockquotes. It is on atmosphere: https://atmosphere.meteor.com/package/marked – cutemachine Dec 13 '13 at 12:04