How to use PageDown Markdown editor?

Question

I would like to provide the user the ability to live-preview notes that are created with Markdown. However I cannot find any downloads in that project.

How can I get started with the PageDown Markdown editor?

Answer 1

The documentation for PageDown is pretty much a mess. I'm going to try to create a much more ready to go example here.

Necessary bits

JS

<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Editor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.js"></script>

You can also use the .min.js versions from CDNjs

CSS

<link rel="stylesheet" 
      href="//cdn.rawgit.com/balpha/pagedown/master/demo/browser/demo.css" />

<style>
    .wmd-button > span {
        background-image: 
          url('//cdn.rawgit.com/derobins/wmd/master/images/wmd-buttons.png');
        background-repeat: no-repeat;
        background-position: 0px 0px;
        width: 20px;
        height: 20px;
        display: inline-block;
    }
</style>

You probably don't want to rely directly on the source control files for production usage but it works in a pinch.

HTML

The PageDown editor makes several expectations about html existing on your page.

<div id="wmd-button-bar"></div>

<textarea id="wmd-input" class="wmd-input"></textarea>

<div id="wmd-preview" class="wmd-panel wmd-preview"></div>

Script

<script>
    var converter = Markdown.getSanitizingConverter();
    var editor = new Markdown.Editor(converter);
    editor.run();
</script>

This should get you up and running. For more advanced information on how to manipulate the image insertion, multiple editors, or adding your own custom plugins see the original documentation.

---

Additional notes

If you have preexisting Markdown text such as you're presenting the Editor to edit an existing page all you need to do is insert the Markdown content inside the textarea. Be aware that if you do something like this:

<textarea id="wmd-input" class="wmd-input">
    @Model.Markdown
</textarea>

The whitespace that is inside of the textarea tag will be treated as Markdown and handled as such which could result in unexpected behavior. (Literally happened to me as I'm wondering why am I getting code formatting on what should be a p tag)

Make sure you define your elements as:

<textarea id="wmd-input" class="wmd-input">
@Model.Markdown
</textarea>

Note the lack of any indentation.

H4-H6 usage.

If you expect #### H4 to be translated to <h4>H4</h4> you will need to modify the basic_tag_whitelist variable inside of Markdown.Sanitizer.js

If you want to support the Header button to have more than H1 & H2, like H1-H4 take a look at my gist: https://gist.github.com/dotnetchris/0f68c879082343295503 as best as I can tell there's no way to support this other than directly modifying the commandProto.doHeading method. In this specific gist I realign headings to start at H4, it could be easily modified to start at H6.