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?

Chris Marisic
  • 32,487
  • 24
  • 164
  • 258

2 Answers2

63

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.

eKek0
  • 23,005
  • 25
  • 91
  • 119
Chris Marisic
  • 32,487
  • 24
  • 164
  • 258
  • 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 Apr 03 '15 at 12:28
  • @tim probably copy paste error, i'll remove that new – Chris Marisic Apr 07 '15 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: 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 Oct 30 '15 at 05:20
  • All i need to do is display the existing content in markdown editor. – Mahahari Oct 30 '15 at 05:21
  • 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 – Chris Marisic Oct 30 '15 at 16:00
  • @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? – flamenco Jul 07 '16 at 21:50
  • @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. – qualebs May 07 '17 at 10:12
  • How can I upload a photo when I click the image icon instead of providing a link to an already existing link? – qualebs May 07 '17 at 19:37
  • @qualebs that's way out of scope of this question, you need to build the image uploader / persistence / integration with pagedown. – Chris Marisic May 09 '17 at 04:57
  • @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 `` but use a link like `'. 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? – qualebs May 14 '17 at 18:29
  • @qualebs 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 `/`) – Chris Marisic May 15 '17 at 00:13
  • 1
    Here is an example based on @ChrisMarisic's response: https://jsfiddle.net/hansvonn/4qkoth4f/ – Hans Vonn Sep 01 '17 at 10:32
  • @ChrisMarisic is there any by which if user types `Text` in textarea then I can automatically parse it to Text immediately rather that on preview screen. – Rahul Mar 02 '20 at 09:40
  • @Dalvik probably somewhat straight forward, but you'll need to edit the source i'm sure. – Chris Marisic Mar 03 '20 at 21:49
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>
mac
  • 291
  • 3
  • 12
  • 3
    This was super useful. I used it to create a [minimal JSFiddle demo](https://jsfiddle.net/RichardBronosky/y0x4uc3o/). – Bruno Bronosky Jan 31 '18 at 21:02
  • There is some problem with the code block. – PSKP Jun 01 '21 at 14:58
  • @PSKP what is the problem? – mac Jun 01 '21 at 21:49
  • ``` code block with code language not working. the language name is added in the code. – PSKP Jun 02 '21 at 04:00
  • 1
    @PSKP three backticks is not supported in the original markdown syntax: https://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 Jun 02 '21 at 17:42