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?
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?
On
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>
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
You can also use the
.min.jsversions from CDNjsCSS
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.
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:
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:
Note the lack of any indentation.
H4-H6 usage.
If you expect
#### H4to be translated to<h4>H4</h4>you will need to modify thebasic_tag_whitelistvariable inside of Markdown.Sanitizer.jsIf 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.doHeadingmethod. In this specific gist I realign headings to start at H4, it could be easily modified to start at H6.