38

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?

2 Answers 2

64

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.

14
  • 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.
    – tim
    Commented Apr 3, 2015 at 12:28
  • @tim probably copy paste error, i'll remove that new Commented Apr 7, 2015 at 16:25
  • 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.
    – Mahahari
    Commented Oct 30, 2015 at 5:20
  • 1
    @Mahahari 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 Commented Oct 30, 2015 at 16:00
  • 2
    Here is an example based on @ChrisMarisic's response: jsfiddle.net/hansvonn/4qkoth4f
    – Hans Vonn
    Commented Sep 1, 2017 at 10:32
9

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>

5
  • 3
    This was super useful. I used it to create a minimal JSFiddle demo. Commented Jan 31, 2018 at 21:02
  • There is some problem with the code block.
    – PSKP
    Commented Jun 1, 2021 at 14:58
  • @PSKP what is the problem?
    – mac
    Commented Jun 1, 2021 at 21:49
  • ``` code block with code language not working. the language name is added in the code.
    – PSKP
    Commented Jun 2, 2021 at 4:00
  • 1
    @PSKP 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.
    – mac
    Commented Jun 2, 2021 at 17:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.