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?

Dacoit

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.

Prepositive

thanks, this is really helpful. I don't know if something changed since your post, but I need to replace new Markdown.getSanitizingConverter with Markdown.getSanitizingConverter for it to work. – Splore

@Splore probably copy paste error, i'll remove that new – Prepositive

Hi , Can you please explain the below one. 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. – Pahang

All i need to do is display the existing content in markdown editor. – Pahang

@Pahang you need just need to make sure you don't add whitespace infront of your existing markdown text. I'm pointing out if you tab/indent the model data you will have in fact changed your markdown and it will be messed up. However you get the markdown text into the text area just make sure you don't have any leading whitespace – Prepositive

@ChrisMarisic: Chris, it is still confusing when to use space for @Model.Markdown and when not. Can you revisit your answer and add some expected output examples? – Castera

@ChrisMarisic thanks a lot man. One thing though, I didn't see the official messy documentation you referred to in your answer. Could you please post the link if it's no trouble. Thank you in advance. – Federate

How can I upload a photo when I click the image icon instead of providing a link to an already existing link? – Federate

@Federate that's way out of scope of this question, you need to build the image uploader / persistence / integration with pagedown. – Prepositive

@ChrisMarisic I have pretty much down everything required for uploading via ajax and persisting on the server side which returns something like img?fileId=imageName Now what I want is the preview to show the link not as <img src="http://localhost:8080/appName/img?fileId=imageName"/> but use a link like `<img src="img?fileId=imageName"/>'. What part of the 3 JS libraries given should I look at to modify. Where is the image loading done in JS? Must the link have http, https, ftp... etc for it to be loaded via js? – Federate

@Federate i don't really have any idea offhand. I suspect the url is actually coming back from your tooling. A separate thought if you're sure that pagedown itself is changing the url to a fully qualified url have you tried /img?.... that might prevent pagedown from trying to infer the url (note the leading /) – Prepositive

Here is an example based on @ChrisMarisic's response: jsfiddle.net/hansvonn/4qkoth4f – Ravelin

@ChrisMarisic is there any by which if user types <span>Text</span> in textarea then I can automatically parse it to Text immediately rather that on preview screen. – Beore

@Dalvik probably somewhat straight forward, but you'll need to edit the source i'm sure. – Prepositive

Answer 2

I have created two editors. the first one the input is sanitized and in the second one is not sanitized.

.pagedown { width: 400px; }
.wmd-button, .wmd-spacer { display: none; }
.wmd-input { width: 400px; height: 100px; }
.wmd-preview { margin-bottom: 40px; background-color: #eef;}

<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>
<div class="pagedown">
    <div id="wmd-button-bar-first" class="wmd-button-bar"></div>
        <textarea id="wmd-input-first" class="wmd-input">
**first editor**

the *input* is sanitized:

<marquee>PageDown!</marquee>
        </textarea>
        <div id="wmd-preview-first" class="wmd-preview"></div>
     </div>

     <div class="pagedown">
     <div id="wmd-button-bar-second" class="wmd-button-bar"></div>
     <textarea id="wmd-input-second" class="wmd-input">
**second editor**

the *input* is NOT sanitized:

<marquee>PageDown!</marquee>
</textarea>
      <div id="wmd-preview-second" class="wmd-preview"></div>
      </div>

<script type="text/javascript">
    var converter1 = Markdown.getSanitizingConverter();
    var editor1 = new Markdown.Editor(converter1, '-first');
    editor1.run();
    
    var converter2 = new Markdown.Converter();
    var editor2 = new Markdown.Editor(converter2, '-second');
    editor2.run();
</script>

Chide

This was super useful. I used it to create a minimal JSFiddle demo. – Twila

There is some problem with the code block. – Dinerman

@Dinerman what is the problem? – Chide

``` code block with code language not working. the language name is added in the code. – Dinerman

@Dinerman three backticks is not supported in the original markdown syntax: daringfireball.net/projects/markdown/syntax. You should use 4 spaces at the beginning of the line for block code, and backtick(`) for inline code. – Chide