//

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

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: H~2~O

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

evens = [1, 2, 3, 4, 5].collect do |item|
  item * 2
end
$(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

  • [ ] a bigger project
  • [x] first subtask
  • [x] follow up subtask
  • [ ] final subtask
  • [ ] a separate task

Task List Syntax

Abbreviation

Markup is based on php markdown extra definition, but without multiline support:

The HTML specification
is maintained by the W3C.

Footnote

Here is a footnote reference,1 and another.2

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

Mathematical formula `$y = x^2##

Inline math: $\dfrac{ \tfrac{1}{2}[1-(\tfrac{1}{2})^n] }{ 1-\tfrac{1}{2} } = s_n$.

Math block:

\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@

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)
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

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

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

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

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:

Fork me on GitHub

Charts

Documentation for charts

Line Chart

{
  "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

{
  "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

{
  "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

{
  "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

{"title":{"text":"堆叠区域图"},"tooltip":{"trigger":"axis","axisPointer":{"type":"cross","label":{"backgroundColor":"#6a7985"}}},"legend":{"data":["邮件营销","联盟广告","视频广告","直接访问","搜索引擎"]},"toolbox":{"feature":{"saveAsImage":{}}},"grid":{"left":"3%","right":"4%","bottom":"3%","containLabel":true},"xAxis":[{"type":"category","boundaryGap":false,"data":["周一","周二","周三","周四","周五","周六","周日"]}],"yAxis":[{"type":"value"}],"series":[{"name":"邮件营销","type":"line","stack":"总量","areaStyle":{},"data":[120,132,101,134,90,230,210]},{"name":"联盟广告","type":"line","stack":"总量","areaStyle":{},"data":[220,182,191,234,290,330,310]},{"name":"视频广告","type":"line","stack":"总量","areaStyle":{},"data":[150,232,201,154,190,330,410]},{"name":"直接访问","type":"line","stack":"总量","areaStyle":{"normal":{}},"data":[320,332,301,334,390,330,320]},{"name":"搜索引擎","type":"line","stack":"总量","label":{"normal":{"show":true,"position":"top"}},"areaStyle":{"normal":{}},"data":[820,932,901,934,1290,1330,1320]}]}


Documentation for Pie Chart

Doughnut Chart

{
  "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

{
    "title": {
        "text": "ECharts 入门示例"
    },
    "tooltip": {},
    "legend": {
        "data": [
            "销量"
        ]
    },
    "xAxis": {
        "data": [
            "衬衫",
            "羊毛衫",
            "雪纺衫",
            "裤子",
            "高跟鞋",
            "袜子"
        ]
    },
    "yAxis": {},
    "series": [
        {
            "name": "销量",
            "type": "bar",
            "data": [
                5,
                20,
                36,
                10,
                10,
                20
            ]
        }
    ]
}


Documentation for Bubble Chart


  1. Here is the footnote. 

  2. Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they