Markdown Plus Markdown Plus (“M+” or “mdp” for short) is a markdown editor with extra features.
Apps We currently don’t accept donations. The best way to support our development is to buy our apps.
Markdown Plus Markdown Plus is available for both OS X and Windows. You get every feature of the web version plus lots of advanced features.
Markdown Mate Markdown Mate is a markdown previewer, it’s not going to replace your favorite editor but handles everything about markdown.
::: success We provide email support to those who have purchased the apps: service@tylingsoft.com :::
Table of Contents [toc]
Note: Only h2
and h3
are shown in toc.
Mastering Markdown Markdown allows you to write using an easy-to-read, easy-to-write plain text format, which then converts to valid HTML for viewing.
Mastering Markdown Guide .
strikethrough++insert++ ==mark== Subscript: H2O You can also use inline math: $H_2O$
Superscript: 29^th^ You can also use inline math: $29^{th}$
Emoji: :panda_face: :sparkles: :camel: :boom: :pig: Emoji Cheat Sheet
Fontawesome: :fa-cab: :fa-flag: :fa-bicycle: :fa-leaf: :fa-heart: All the Font Awesome icons
print 'hello code'
evens = [1, 2, 3, 4, 5].collect do |item|
item * 2
end
1 2 3 4 5 $(document ).ready(() => { $('pre code' ).each((i, block ) => { hljs.highlightBlock(block); }); });
Code Formatting
Tables and alignment
First Header
Second Header
Content from cell 1
Content from cell 2
Content in the first column
Content in the second column
Left-Aligned
Center Aligned
Right Aligned
col 3 is
some wordy text
$1600
col 2 is
centered
$12
Table Syntax
Task list
Task List Syntax
Abbreviation Markup is based on php markdown extra definition, but without multiline support:
*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium The HTML specification is maintained by the W3C.
Here is a footnote reference,[^1] and another.[^longnote]
[^1]: Here is the footnote.
[^longnote]: Here’s one with multiple blocks.
Subsequent paragraphs are indented to show that they
belong to the previous footnote.
Here is an inline note.^[Inlines notes are easier to write, since you don’t have to pick an identifier and move down to type the note.]
Footnote Syntax
Inline math: $\dfrac{ \tfrac{1}{2}[1-(\tfrac{1}{2})^n] }{ 1-\tfrac{1}{2} } = s_n$
.
Math block:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 \oint_C x^3\, dx + 4y^2\, dy 2 = \left( \frac{\left(3-x\right) \times 2}{3-x} \right) \sum_{m=1}^\infty\sum_{n=1}^\infty\frac{m^2\,n} {3^m\left(m\,3^n+n\,3^m\right)} \phi_n(\kappa) = \frac{1}{4\pi^2\kappa^2} \int_0^\infty \frac{\sin(\kappa R)}{\kappa R} \frac{\partial}{\partial R} \left[R^2\frac{\partial D_n(R)}{\partial R}\right]\,dR
Mathematical Formula Syntax
AsciiMath Inline AsciiMath: @(1/2[1-(1/2)^n])/(1-(1/2))=s_n@
1 2 3 4 5 oint_Cx^3 dx+4y^2 dy 2=(((3-x)xx2)/(3-x)) sum_(m=1)^oosum_(n=1)^oo(m^2 n)/(3^m(m3^n+n3^m)
1 2 3 4 phi_n(kappa) = 1/(4pi^2 kappa^2) int_0^oo (sin(kappa R))/(kappa R) del/(del R) [R^2 (del D_n (R))/(del R)] del R
AsciiMath Documentation
mermaid charts Flowchart 1 2 3 4 5 6 graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car]
Flowchart Syntax
::: warning Adding many flowcharts will slow down the editor. :::
Sequence diagram 1 2 3 4 5 sequenceDiagram loop every day Alice->>John: Hello John, how are you? John-->>Alice: Great! end
Sequence Diagram Syntax
::: warning Adding many sequence diagrams will slow down the editor. :::
Gantt diagram 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h
Gantt Diagram Syntax
::: warning Adding many gantt diagrams will slow down the editor. :::
Class diagram 1 2 3 4 5 6 7 8 9 10 11 12 13 14 classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label
Class diagram is powered by mermaid .
::: warning Adding many class diagrams will slow down the editor. :::
Custom Container Markup is similar to fenced code blocks. Valid container types are success
, info
, warning
and danger
.
::: info You have new mail. :::
::: danger Staying up all night is bad for health. :::
Definition list Term 1 ~ Definition 1
Term 2 ~ Definition 2a ~ Definition 2b
Definition List Syntax
HTML If you find the markdown syntax too limited, you can try some HTML:
Charts Documentation for charts
Line Chart 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 { "type": "line", "data": { "labels": [ "January", "February", "March", "April", "May", "June", "July" ], "datasets": [ { "label": "# of bugs", "fill": false, "lineTension": 0.1, "backgroundColor": "rgba(75,192,192,0.4)", "borderColor": "rgba(75,192,192,1)", "borderCapStyle": "butt", "borderDash": [], "borderDashOffset": 0, "borderJoinStyle": "miter", "pointBorderColor": "rgba(75,192,192,1)", "pointBackgroundColor": "#fff", "pointBorderWidth": 1, "pointHoverRadius": 5, "pointHoverBackgroundColor": "rgba(75,192,192,1)", "pointHoverBorderColor": "rgba(220,220,220,1)", "pointHoverBorderWidth": 2, "pointRadius": 1, "pointHitRadius": 10, "data": [ 65, 59, 80, 81, 56, 55, 40 ], "spanGaps": false } ] }, "options": {} }
Documentation for Line Chart
Bar Chart 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 { "type": "bar", "data": { "labels": [ "Red", "Blue", "Yellow", "Green", "Purple", "Orange" ], "datasets": [ { "label": "# of Votes", "data": [ 12, 19, 3, 5, 2, 3 ], "backgroundColor": [ "rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)" ], "borderColor": [ "rgba(255,99,132,1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)" ], "borderWidth": 1 } ] }, "options": {} }
Documentation for Bar Chart
Radar Chart 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 { "type": "radar", "data": { "labels": [ "Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running" ], "datasets": [ { "label": "My First dataset", "backgroundColor": "rgba(179,181,198,0.2)", "borderColor": "rgba(179,181,198,1)", "pointBackgroundColor": "rgba(179,181,198,1)", "pointBorderColor": "#fff", "pointHoverBackgroundColor": "#fff", "pointHoverBorderColor": "rgba(179,181,198,1)", "data": [ 65, 59, 90, 81, 56, 55, 40 ] }, { "label": "My Second dataset", "backgroundColor": "rgba(255,99,132,0.2)", "borderColor": "rgba(255,99,132,1)", "pointBackgroundColor": "rgba(255,99,132,1)", "pointBorderColor": "#fff", "pointHoverBackgroundColor": "#fff", "pointHoverBorderColor": "rgba(255,99,132,1)", "data": [ 28, 48, 40, 19, 96, 27, 100 ] } ] }, "options": {} }
Documentation for Radar Chart
Polar Area Chart 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 { "type": "polarArea", "data": { "datasets": [ { "data": [ 11, 16, 7, 3, 14 ], "backgroundColor": [ "#FF6384", "#4BC0C0", "#FFCE56", "#E7E9ED", "#36A2EB" ], "label": "My dataset" } ], "labels": [ "Red", "Green", "Yellow", "Grey", "Blue" ] }, "options": {} }
Documentation for Polar Area Chart
Pie Chart 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 { "type": "pie", "data": { "labels": [ "Red", "Blue", "Yellow" ], "datasets": [ { "data": [ 300, 50, 100 ], "backgroundColor": [ "#FF6384", "#36A2EB", "#FFCE56" ], "hoverBackgroundColor": [ "#FF6384", "#36A2EB", "#FFCE56" ] } ] }, "options": {} }
Documentation for Pie Chart
Doughnut Chart 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 { "type": "doughnut", "data": { "labels": [ "Red", "Blue", "Yellow" ], "datasets": [ { "data": [ 300, 50, 100 ], "backgroundColor": [ "#FF6384", "#36A2EB", "#FFCE56" ], "hoverBackgroundColor": [ "#FF6384", "#36A2EB", "#FFCE56" ] } ] }, "options": {} }
Documentation for Doughnut Chart
Bubble Chart 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 { "type": "bubble", "data": { "datasets": [ { "label": "First Dataset", "data": [ { "x": 20, "y": 30, "r": 15 }, { "x": 40, "y": 10, "r": 10 } ], "backgroundColor": "#FF6384", "hoverBackgroundColor": "#FF6384" } ] }, "options": {} }
Documentation for Bubble Chart