One Markdown To Rule Them All
mrkdwn combines the original markdown specification created by John Gruber, the latest and greatest flavors of markdown, various other lightweight markup languages, and new syntax for semantic notation and improved machine readability. mrkdwn seeks to provide the most complete set of syntax while considering both backward compatibility and future need. While mrkdwn may stray from full backward compatability, it is with the goal of improving speed, usability, and readability.
mrkdwn's ultimate goal is to the be the one markdown to rule them all, the one markdown to bring them all and in the darkness bind them. With this in mind, mrkdwn will work to provide translation packages in all major languages. mrkdwn will also provide GUI packages for live editing, including syntax highlighting, real time output, and media management.
Try the live demo at http://mrkdwn.benvacha.com
| description | mrkdwn |
|---|---|
| escaped characters | \* |
| comments | /// comment /// ///! comment /// |
| phrase formattings | *bold* ~italic~ _underline_ **strong** ~~strike~~ ***emphasis*** ~~~mark~~~ ^superscript^ ^^subscript^^ |
| headers | Header One ========== |
| horizontal rules | --- *** |
| blockquotes | >! cite > text > text |
| details | <! summary < text < text |
| unordered lists | - item - item - item |
| ordered lists | 1. item 2. item 3. item |
| definition lists | : term :: definition :: definition |
| task lists | - [ ] item - [x] item |
| nested lists | - item - - sub item - - sub item - item - - sub item
|
| spans | [text] |
| links | [text](url title) [text](email title) [text](!anchor title) [text][reference] [reference][] |
| images |  ![alt][reference] ![reference][] |
| macros | %[alt](type args) %[alt][reference] %[reference][] |
| citations | @[reference] @reference |
| notes | &[reference] &reference |
| variables | $[reference] $reference |
| abbreviations | +[abbreviation]: expansion |
| tables | | header | header | header | | :----- | :----: | -----: | | left | center | right | |
| metas | {{{ data }}}
{{{! data }}}
|
| classes | #<class> Header #(!anchor)<class> Header |
- Escaped Characters
- Comments
- Paragraphs
- Phrase Formattings
- Headers
- Horizontal Rules
- Blockquotes
- Details
- Unordered Lists
- Ordered Lists
- Task Lists
- Definition Lists
- Nested Lists
- Links
- Automatic Links
- Images
- Macros
- Citations
- Notes
- Variables
- Abbreviations
- Inline Codes
- Block Pre Codes
- Inline Samples
- Block Pre Samples
- Tables
- Metas
- Spans
- Classes
- Any non whitespace special character can be escaped with
\to markup the ascii representation and remove its mrkdwn meaning. - Applied to escaped characters anywhere, without exception. Including pre and comments.
\*Actual asterisk surrounded text\*
*Actual asterisk surrounded text*
- Pairs of three or more
/will be removed from markup. - Pairs of three or more
/with a!will be markuped to a html comment. - Can be applied inline or block.
- Can be used inside of words.
- Pairs of n or more
/can be used to comment n or less/. - Applied anywhere, without exception. Including pre.
Hide /// the comment /// from this sentence.
///
Hide this block.
///
Put in a ///! comment ///
///!
Comment block
///
Comment out three //// /// //// slashes
Hide from this sentence.
Put in a <!-- comment -->
<!--
Comment Block
-->
Comment out three slashes
- Text preceeded and proceeded by a blank line or block syntax will be wrapped in a paragraph.
- Line returns without following whitespace will be treated as breaks within a single paragraph.
- Text within pre block syntax or comment syntax should not be markuped.
- A blank line is a line that appears to be blank. This includes lines with no characters, lines with only spaces and tabs, and the start and end of a file.
- Note: diverges from daringfireball by not allowing "hard-wrapped" text paragraphs.
The first paragraph
This is one paragraph
with a manual break inserted
<p>
The first paragraph
</p>
<p>
This one paragraph
<br />
with a manual break inserted
</p>
- Phrase formatting can be nested inside of other syntax, including other phrase formattings.
- Phrase formatting is only translated when both starting and ending syntax is found in the same line.
- Phrase formatting can contain multiple words on the same line.
- Phrase formatting can be inside of words, with the exception of underline.
- Opening phrase formatting proceeded by whitespace and closing phrase formatting preceeded by whitespace will not be translated as phrase formatting.
- Note: diverges almost completely from daringfireball.
*bold* **strong** ***emphasis***
~italic~ ~~strikethrough~~ ~~~mark~~~~
~*italic bold*~
^superscript^ ^^subscript^^
_underline_
some_file_name
some_file_ name
put a * in the **
<b>bold</em> <strong>strong</strong> <em>emphasis</em>
<i>italic</i> <strike>strikethrough</strike> <mark>mark</mark>
<i><b>italic bold</b></i>
<sup>superscript</sup> <sub>subscript</sub>
<u>underline</u>
some_file_name
some_file_ name
put a * in the **
- Lines of text with 3 or more
=alone on the proceeding line will be markuped to h1 tags. - Lines of text with 3 or more
-alone on the proceeding line will be markuped to h2 tags. - Lines of text beginning with 1 or more
#will be markuped to h tags with level indicated by the number of#. - Headers are automatically given internal anchor links based on header text, or can be manually defined.
- Headers with identical header text will be given unique numbered anchors based on header text.
- Note: diverges from daringfireball by not markuping trailing
#.
Header 1
========
Header 2
--------
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
##(!anchor) Header 2
##<class> Header 2
##(!anchor)<class> Header 2
<h1><a name="header-1">Header 1</a></h1>
<h2><a name="header-2">Header 2</a></h2>
<h1><a name="header-1">Header 1</a></h1>
<h2><a name="header-2-2">Header 2</a></h2>
<h3><a name="header-3">Header 3</a></h3>
<h4><a name="header-4">Header 4</a></h4>
<h5><a name="header-5">Header 5</a></h5>
<h6><a name="header-6">Header 6</a></h6>
<h2><a name="anchor">Header 2</a></h2>
<h2 class="class"><a name="header-2-3">Header 2</a></h2>
<h2 class="class"><a name="anchor-2">Header 2</a></h2>
- Three or more
-or*on a line, alone, will create a horizontal rule. - Note: diverges from daringfireball by not allowing
-and*to be seperated by spaces.
---
***
------------
*********
---<class>
*****<class-one class-two>
<hr />
<hr />
<hr />
<hr />
<hr class="class" />
<hr class="class-one class-two" />
- Blockquotes can be nested as needed and can contain any other syntax.
- All lines of a blockquote must begin with
>. >>can be used to signify the end of a blockquote, including nested blockquotes, to avoid translation errors.- One are more blank lines between blockquote lines will markup the lines as difference blockquotes.
- Blockquotes can be nested a max of 10 times.
- Note: diverges from daringfireball by requiring that all lines of a blockquote begin with
>.
> Paragraph one
>
>> Second paragraph
>! cite
> Block Quote
> with citation
> level one
> >! cite
> > level two
> > also level two
> back on level one
> >> level two again
> > level two, but not the same as the above line
>!<class> cite
> block quote
><class-one class-two> block quote
<blockquote>
<p>
Paragraph one
</p>
<p>
Second paragraph
</p>
</blockquote><!-- -->
<blockquote cite="cite">
<p>
Block Quote<br />
with citation
</p>
</blockquote>
<blockquote>
<p>
level one
</p>
<blockquote cite="cite">
<p>
level two<br />
also level two
</p>
</blockquote>
<p>
back on level two
</p>
<blockquote>
<p>
level two again
</p>
</blockquote><!-- -->
<blockquote>
<p>
level two, but not the same as the above live
</p>
</blockquote>
</blockquote>
<blockquote class="class" cite="cite">
<p>
block quote
</p>
</blockquote>
<blockquote class="class-one class-two">
<p>
block quote
</p>
</blockquote>
- The first line of a details must include
!and will always be used as its summary. - All lines of a details must begin with
<. <<can be used to signify the end of a details, including nested details, to avoid translation errors.- One are more blank lines between details lines will markup the lines as difference details.
- Detail blocks can be nested up to 10 times and can contain any other syntax.
<! summary
< Paragaph One
<
< Second Paragraph
<!<class-one class-two> summary
< Paragraph One
<details>
<summary>summary</summary>
<p>
Paragraph One
</p>
<p>
Second Paragraph
</p>
</details>
<details class="class-one class-two">
<p>
Paragraph One
</p>
</details>
- A
-,*, or+followed by text will be markuped to an unordered lists. - Multiple line list items will be translated into paragraphs.
- Lists should be followed by two or more blankish lines to signify the list end.
- Two or more blankish lines between list items will be markuped as two seperate lists.
--,**, or++can be used to signify the end of a list to prevent translation errors.<class>is markuped on the li and cannot be used with<<class>.<<class>is markuped on the ul and can only be used on the first list item.
- Item
- Item
- Item
* Item
* Item
With a second paragraph
* Item
+<<class-one class-two> Item
+ Item
+<class> Item
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>
<p>
Item
</p>
</li>
<li>
<p>
Item
</p>
<p>
With a second paragraph
</p>
</li>
<li>Item</li>
</ul>
<ul class="class-one class-two">
<li>Item</li>
<li>Item</li>
<li class="class">Item</li>
</ul>
- Numbering does not need to be unique or sequential.
- The first number will be used as the starting value of the list.
- Multiple line list items will be translated into paragraphs.
- Lists should be followed by two or more blankish lines to signify the list end.
- Two or more blankish lines between list items will be markuped as two seperate lists.
- A number with
..instead of.can be used to signify the end of a list to prevent translation errors. <class>is markuped on the li and cannot be used with<<class>.<<class>is markuped on the ol and can only be used on the first list item.
1. One
2. Two
3. Three
50. Fifty
34. Fifty One
34. Fifty Two
1.<<class-one class-two> One
2. Two
3.<class> Three
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
<ol start="50">
<li>Fifty</li>
<li>Fifty One</li>
<li>fifty Two</li>
</ol>
<ol class="class-one class-two">
<li>One</li>
<li>Two</li>
<li class="class">Three</li>
</ol>
- Task lists can be used with any list type and can be used with nested lists.
- Task lists use checkbox type input tags, and require CSS for correct visual display.
- [ ] Task 1
- [x] Task 2
- [ ] Task 3
- 1. [x] Sub Task 1
- 2. [x] Sub Task 2
- 3. [ ] Sub Task 3
<ul>
<li><input type="checkbox" /> Task 1</li>
<li><input type="checkbox" checked /> Task 2</li>
<li><input type="checkbox" /> Task 3
<ol>
<li><input type="checkbox" checked /> Sub Task 1</li>
<li><input type="checkbox" checked /> Sub Task 2</li>
<li><input type="checkbox" /> Sub Task 3</li>
</ol>
</li>
</ul>
:with no preceeding whitespace, will be markuped to a definition term.:with any number of preceeding whitespaces, will be markuped to a definition definition.- A term may have multiple definitions.
- Multiple line list items will be translated into paragraphs.
- Lists should be followed by two or more blankish lines to signify the list end.
- Two or more blankish lines between list items will be markuped as two seperate lists.
<class>is markuped on the dt or dd and cannot be used with<<class>.<<class>is markuped on the dl and can only be used on the first list item.
: Term One
:: Definition
: Term Two
:: Definition One
With a second paragraph.
:: Definition Two
:<<class-one class-two> Term
:: Definition
::<class> Definition
:<class> Term
:: Definition
<dl>
<dt>Term One</dt>
<dd>Definition</dd>
<dt>Term Two</dt>
<dd>
<p>
Definition One
</p>
</dd>
<dd>Definition Two</dd>
</dl>
<dl class="class-one class-two">
<dt>Term</dt>
<dd>Definition</dd>
<dd class="class">Definition</dd>
<dt class="class">Term</dt>
<dd>Definition</dd>
</dl>
- All list types may be nested in each other.
- Item
- 1. One
- 2. Two
- Item
- - Sub Item
- - 1. One
- - 2. Two
- Item
<ul>
<li>Item
<ol>
<li>One</li>
<li>Two</li>
</ol>
</li>
<li>Item
<ul>
<li>Sub Item
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
<li>
<li>Item</li>
</ul>
[linked text](url title)will be markuped to a tags.[linked text][linkReference]will be markuped to a tags.[[url]]or[[email]]will be markuped to a tags.- Must contain atleast one non-whitespace character
[[[url]]]or[[[email]]]will be parsed on_and will be markuped to a tags.- Must contain atlease one non-whitespace character
[linkReference]: url titlewill be removed from markup, but used to define a link reference.- Must be at start of new line.
- Links must be preceeded by whitespace or line start.
- Urls can be absolute or relative, and will be automatically uri encoded.
- Urls containing whitespace should be wrapped in single or double quotes.
- Emails are automatically markuped to ascii decimal encoding.
- Urls beginning with
!will define an anchor. - Urls beginning with
#will link to an anchor. - Title is optional, and linked text will be used if not explicitly defined.
- Note: diverges from daringfireball by not allowing
()to surround titles. - Note: diverges from daringfireball by not allowing multi-line references.
- Note: diverges from daringfireball by using
[[]]instead of<>for automatic links.
[text](url)
[text](url "Title")
[text](!anchor title)
[text](#anchor "long title")
[text][reference]
[reference][]
[reference]: url 'long title'
[[url]]
[[[auto_parsed_url]]]
[[!anchor]]
[[#anchor]]
[[[parsed_url#anchor]]]
[text](url title)<class>
[text][reference]<class-one class-two>
[[url]]<class>
<a href="url">text</a>
<a href="url" title="Title">text</a>
<a name="anchor" title="title">text</a>
<a href="#anchor" title="long title">text</a>
<a href="url" title="long title">text</a>
<a href="url" title="long title">text</a>
<a href="url">url</a>
<a href="auto/parsed/url">auto parsed url</a>
<a name="anchor">anchor</a>
<a href="#anchor">anchor</a>
<a href="parsed/url#anchor">parsed url anchor</a>
<a class="class" href="url" title="Title">text</a>
<a class="class-one class-two" href="url" title="long title">text</a>
<a class="class" href="url">url</a>
- Absolute urls and email addresses will be automatically markuped to a tags.
- Links must be preceeded by whitespace.
- Urls are automatically url encoded.
- Emails are automatically ascii decimal encoded.
Go to index.html
Go to http://url.com
Email [email protected]
Go to index.html
Go to <a href="http://url.com">http://url.com</a>
Email <a href="mailto:addr@email.com" title="addr@email.com">addr@email.com</a>
will be markuped to img tags.![alt text][imageReference]will be markuped to img tags.![imageReference][]will be markuped to img tags.![imageReference]: url title width heightwill be removed from markup, but will define an image.- urls can be absolute or relative.
- title, width, and height are optional.
- Usage of an undefined imageReference will be markuped to img tags with only alt text.
![alt text](url "Title" 350px 100%)
![alt text][reference]
![reference][]
![reference]: url "Title Long" width height
<class>
![alt text][reference]<class>
<img src="url" title="title" alt="alt text" />
<img src="url" title="Title" alt="alt text" width="350px" height="100%" />
<img src="url" alt="alt text" width="100%" />
<img src="url" title="Title Long" alt="alt text" width="width" height="height" />
<img src="url" class="class" alt="alt text" />
<img src="url" class="class" title="Title Long" alt="alt text" width="width" height="height" />
%[alt text](macro arg1 ...)will be markuped depending on the macro.%[alt text][macroReference]will be markuped depending on the macro.%[macroReference][]will be markuped depending on the macro.%[macroReference]: macro arg1 ...will be removed from markup, but will define a macro.- Macros can be used to embed video, other media, or custom markups.
- Usage of an undefined or invalid macroReference will be markuped to the alt text.
- The first argument must be the macro name.
- Any number and type of arguments can be included after the first argument depending on the macro.
- Macros do not support class syntax.
%[alt text](macro arg1 arg2 arg3 ...)
%[alt text][reference]
%[reference][]
%[reference]: macro arg1 arg2 arg3 arg4
varied based on macro
varied based on macro
varied based on macro
@[citationReference]will be markuped to a superscript numbered anchor linked to the citation in page.@citationReferencewill be markuped to a superscript numbered anchor linked to the citation in page.@[citationReference]: type arg1 ...will be markuped depending on type, and will define a citation.- Citation references must be placed together in the document where they should be displayed and will be translated as a list.
- Citation reference names must begin with an alphanumeric character, contain no spaces, and are case sensative.
- Citation references list is given a
citationsclass. - Citation sup tags are given a
citationclass. - Citations are automatically numbered based on list order.
- Any number and type of arguments can be included after the first argument depending on the citation type.
- If the first argument in a citation reference is a known type of citation its arguments will be used to autoformat a citation in MLA.
- If the first argument is not a known citation type, the string will be used directly.
This sentence is from something trustworthy @[refOne].
This sentence is way less trustworthy @refTwo.
Yeah for classes @[refOne]<class-one class-two>.
@[refOne]: type arg1 arg2
@[refTwo]: type arg1 arg2 arg3
@[refThree]: A preformated citation
This sentence is from something trustworthy<sup class="citation"><a href="#cite-1" title="bibliography">1</a></sup>.
This sentence is way less trustworthy<sup class="citation"><a href="#cite-2" title="bibliography">2</a></sup>.
Yeah for classes<sup class="citation class-one class-two"><a href="#cite-1" title="bibliography">1</a></sup>.
<ol class="citations">
<li><a name="cite-1">bibliography based on type</a></li>
<li><a name="cite-2">bibliography based on type</a></li>
<li><a name="cite-3">A preformatted citation</a></li>
</ol>
&[noteReference]will be markuped to a superscript numbered anchor linked to the note in page.¬eReferencewill be markuped to a superscript numbered anchor linked to the note in page.&[noteReference]: note textwill be markuped as a list, and will define a citation.- Note references must be placed together in the document where they should be displayed and will be translated as a list.
- Note reference names must begin with an alphanumeric character, contain no spaces, and are case sensative.
- Notes are automatically numbered based on list order.
- Note references list is given a
notesclass. - Note sup tags are given a
noteclass.
This sentence needs a note &[refOne].
This sentence also needs a note &refTwo.
This sentence gets a fancy note &[refTwo]<class-one>.
&[refOne]: note text
&[refTwo]: note text
This sentence needs a note<sup class="note"><a href="#note-1" title="note text">1</a></sup>.
This sentence also needs a note<sup class="note"><a href="#note-2" title="note text">2</a></sup>.
This sentence gets a fancy note<sup class="note class-one"><a href="#note-2" title="note text">2</a></sup>.
<ol class="notes">
<li><a name="note-1">note text</a></li>
<li><a name="note-2">note text</a></li>
</ol>
$[variableName]will be markuped to the variable value, or variable name if definition not found.$variableNamewill be markuped to the variable value, or left alone if definition not found.$[variableName]: variable valuewill be removed from markup, but used to define a variable.- Variable definitions can be anywhere in the markdown and will be markuped before any variable usage.
- Variable definitions are case sensative.
- Duplicate variable definitions will overwrite previous values.
Current version $[variable]
Current version $variable
$[variable]: value
Current version value
Current version value
- Defined abbreviations used in text are automatically markuped and do not need special markdown.
$[abbreviation]: fullwill be removed from markup, but used to define an abbreviation.- Abbreviation definitions can be anywhere in the markdown and will be markuped before any usage.
- Abbreviation definitions are case sensative and can contain multiple words and spaces.
- Duplicate abbreviation definitions will overwrite previous values.
The HTML specification
The Primary Standard is good
+[HTML]: Hyper Text Markup Language
+[Primary Standard]: Main Standard
The <abbr title="Hyper Text Markup Language">HTML</abbr> specification
The <abbr title="Main Standard">Primary Standard</abbr> is good
- Pairs of one or more backticks on the same line will be markuped to code tags.
- Pairs of n backticks can contain groups of less than n backticks.
- All special characters are markuped to their ascii representation.
- Must contain at least one whitespace or non backtick character.
The `<body></body>` tags
Encase `` `ticks` ``
The <code><body></body></code> tags
Encase <code> `ticks` </code>
- Pairs of three or more backticks at the start of a line and not on the same line will be markuped to pre and code tags.
- Pairs of n backticks can contain groups of less than n backticks.
- All special characters are markuped to their ascii representation.
- Text on the same line as the opening backticks will be markuped as class on the code tag.
'''
<body></body>
'''
'''' syntax
<body></body>
''''
<pre><code>
<body></body>
</code></pre>
<pre><code class="syntax">
<body></body>
</code></pre>
- Pairs of one or more backticks on the same line with a
!will be markuped to samp tags. - Pairs of n backticks can contain groups of less than n backticks.
- All special characters are markuped to their ascii representation.
- Must contain at least one whitespace or non backtick character.
The `!<body></body>` tags
Encase ``! `ticks` ``
The <samp><body></body></samp> tags
Encase <samp> `ticks` </samp>
- Pairs of three or more backticks with a
!at the start of a line and not on the same line will be markuped to pre and samp tags. - Pairs of n backticks can contain groups of less than n backticks.
- All special characters are markuped to their ascii representation.
- Text on the same line as the opening backticks will be markuped as class on the samp tag.
'''!
> Output from a bash script
'''
'''''! syntax
sample output
'''''
<pre><samp>
> Output from a bash script
</samp></pre>
<pre><samp class="syntax">
sample output
</samp></pre>
- Tables must have preceeding and proceeding
|. - The first text row will always be markuped as the head row.
- The first row with only bars, dashes, and colons will always be used to define aligns.
- Remaining text rows will be markuped as body rows.
- Aligns are applied to head and body rows.
- Column text lengths do not need to be equal between columns or rows.
- Table rows must be on the same line.
- All other inline syntax can be nested inside table syntax.
<class>is markuped on the tr and cannot be used with<<class>.<<class>is markuped on the table and can only be used on the head row.
| Header One | Header Two |<<class-one>
| ---------- | ---------- |
| Content | Content |<class>
| Left | Center | Right |
| :--- | :----: | ----: |
| Content | Content | Content |
<table class="class-one">
<thead>
<tr>
<th>Header One</th>
<th>Header Two</th>
</tr>
</thead>
<tbody>
<tr class="class">
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th align="left">Left</th>
<th align="center">Center</th>
<th align="right">Right</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Content</td>
<td align="center">Content</td>
<td align="right">Content</td>
</tr>
</tbody>
</table>
{{{ }}}will be treated as meta data (sematic data) and can be retrieved and used for machine magic.{{{ }}}will be removed from markup and not parsed.{{{! }}}will be parsed and markuped as an html comment.- Meta can be used inline or block.
- Applied anywhere, without exception.
- Meta parser
( )can be used to define an array.[ ]can be used to define a json-ish data structure.- Whitespace is used for parsing and is otherwise ignored.
{{{ pageTitle "The page title" }}}
{{{ author (
[
first: "Author",
last: "One",
role: "Contributor"
],
[
first: "Author",
last: "Two",
role: "Editor"
]
) }}}
{{{ backPage url }}}
{{{ nextPage url }}}
{{{ siblings (Sibling One, Sibling Two) }}}
{{{ isA Object url }}}
{{{ hasA Object url }}}
[text]will be markuped to a span tag.- Spans can be on multiple lines.
- Spans can be used inside any other syntax.
- Spans can be used within words.
- Spans are primarily used with class syntax.
Put a span [around this text].
something[SpannedUp]<class>.
Put a span <span>around this text</span>
something<span class="class">SpannedUp</span>.
<class>can be added to any other syntax to add a css class to its markup.- Classes can define more than one class.
#<class> Header
---<class>
-<class> Item
- Item
[linked text](url title)<classOne classTwo>
How about [some styled text]<class>!
<h1 class="class"><a name="header">Header</a></h1>
<hr class="class" />
<ul class="class">
<li>
Item
</li>
<li>
Item
</li>
</ul>
<a href="url" title="title" class="classOne classTwo">linked text</a>
How about <span class="class">some styled text</span>!
mrkdwn can be imported and used as a module in Node.JS. The module has access to all methods in mrkdwn.
var mrkdwn = require('pathtofile/mrkdwn.js'),
mrkdwnString = from_an_API_or_other_source,
markupString = mrkdwn.markup.all(mrkdwnString);
mrkdwn can be used to perform a one-time translation on a string. It is possible to only perform a subset of available markups, but the below example shows using all markups.
<head>
<script type="text/javascript" src="pathtofile/mrkdwn.js"></script>
var mrkdwnString = from_an_API_or_other_source,
markupString = mrkdwn.markup.all(mrkdwnString);
mrkdwn, when used in the browser, contains functionality to enable editing with live markup and live preview. Input from the markdown textarea is read on initiation and input change, markuped for all syntax, and output to the markup textarea and or preview element.
<textarea id="markdown"></textarea>
<textarea id="markup" disabled></textarea>
<div id="preview"></div>
// get the elements
var markdownTextarea = document.getElementById('markdown'),
markupTextarea = document.getElementById('markup'),
previewElement = document.getElementById('preview');
// start live markup and output
// will markup and ouput on init
mrkdwn.live.markup(markdownTextarea, markupTextarea, previewElement);
// markupTextarea can be omitted if not needed or used
// mrkdwn.live.markup(markdownTextarea, null, previewElement);
// previewElement can be omitted if not needed or used
// mrkdwn.live.markup(markdownTextarea, markupTextarea);
These are observed implementation state, errata, bugs, and future plans for the javascript (node) implementation of mrkdwn. All of these will be resolved as soon as possible.
- Metas are barely implemented.
- Does not do any parsing.
- Does not insert comment.
- Blank image syntax markups button for file browser in live.
- Blank link syntax markups button for file browser in live.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent