Skip to main content

Markdown examples

Left Center Right Column 4 Column 5 Column 6 Column 7 Column 8
1 1 1 1 1 1 1 1
222 222 222 222 222 222 222 222
33333 33333 33333 33333 33333 33333 33333 33333

PHP Markdown Lib 1.8.0
by Michel Fortin

Hard breaks

Spans

Strikethrough ~~ ~~ ~~This was mistaken text~~ ~~This was mistaken text~~

  • Bold ** ** or__ __ **This is bold text** This is bold text
  • Italic * * or _ _ *This text is italicized* This text is italicized
  • Bold and italic *** *** or ___ ___ or any combination of the above This text is extremely important

Document elements

Link reference

  • Basic link [Assemble](http://assemble.io) Assemble
  • Link with a title [Upstage](https://github.com/upstage/ "Visit Upstage!") Upstage

Line break

Just add two spaces at the end of line you want to introduce a line break.

Link definition

The link definition can be put anywhere in the document. It does not appear in the output. A link definition looks like this:

Visit us at [linkid]
[linkid]: http://www.example.com/ "Optional Title"`

Visit us at linkid

Alternative

This is a guide on [Markdown][1].

[1]: http://en.wikipedia.org/wiki/Markdown        "Markdown link"

This is a guide on Markdown.

Description list (formerly Definition list)

dog
: 4 legged friend

cat
Felis silvestris catus
: feline daemon

bird
: hungry flying fellow

animals
: description 1
: description 2

lizard
: happy fellow
dog
4 legged friend
cat
Felis silvestris catus
feline daemon
bird
hungry flying fellow
animals
description 1
description 2
lizard
happy fellow

Description list with nested block quote

topic 1
topic 2
: description

    > with nested markup

topic 3
: description
topic 1
topic 2

description

with nested markup

topic 3
description

Another limitation is that you can't use block level elements within the <dt> element. It's like header elements (e.g. <h1>) in that way. (hat tip Paul O'Brien)

source: Utilizing the Underused (But Semantically Awesome) Definition List

Abbreviation definition (extra)

The IT department is in need of an HTML developer with an MBA degree.

The IT department is in need of an HTML developer with an MBA degree.

*[IT]: Information technology
*[HTML]: Hyper Text Markup Language
*[MBA]: Master of Business Administration

Footnote definition (extra)

Sample Footnote1 referenced again1

Sample Footnote[^id]
referenced again[^id]
[^id]: url "optional title"

Block elements

Quote block

1x

1x

2x

3x

>1x
> 
>1x
>>2x
>>>3x

Headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

Code block

// Some comments
  line 1 of code
  line 2 of code
  line 3 of code
~~~~
// Some comments
  line 1 of code
  line 2 of code
  line 3 of code
~~~~

or

```
// Some comments
  line 1 of code
  line 2 of code
  line 3 of code
```

Horizontal rule

  • ___ three consecutive underscores
  • --- three consecutive dashes
  • *** three consecutive asterisks

Renders to:




Table

Left Center Right
1 1 1
222 222 222
33333 33333 33333
| Left  | Center | Right |
|: ---- |: ---- :| ---- :|
| 1     |   1    |     1 |
| 222   |  222   |   222 |
| 33333 | 33333  | 33333 |

Extra wide table

Left Center Right Column 4 Column 5 Column 6 Column 7 Column 8
1 1 1 1 1 1 1 1
222 222 222 222 222 222 222 222
33333 33333 33333 33333 33333 33333 33333 33333

Table of Contents

Chapter 1

Content for chapter one.

Chapter 2

Content for chapter one.

Chapter 3

Content for chapter one.


### Table of Contents * [Chapter 1](#chapter-1) * [Chapter 2](#chapter-2) * [Chapter 3](#chapter-3) #### Chapter 1 <a id="chapter-1"></a> Content for chapter one. #### Chapter 2 <a id="chapter-2"></a> Content for chapter two. #### Chapter 3 <a id="chapter-3"></a> Content for chapter three.

Inline code

This is an example of inline code inside the sentence.

This is an example of `inline code` inside the sentence. 

Lists

Unordered

A list of items in which the order of the items does not explicitly matter.

You may use any of the following symbols to denote bullets for each list item:

* valid bullet
- valid bullet
+ valid bullet
  • valid bullet
  • valid bullet
  • valid bullet

Ordered

1. First
2. Second
3. Third
4. Fourth
  1. First
  2. Second
  3. Third
  4. Fourth

TIP: If you just use 1. for each number, Markdown will automatically number each item. For example:

1. First
1. Second
1. Third
1. Fourth
  1. First
  2. Second
  3. Third
  4. Fourth

Enhanced order lists

100. First list item
101. Second list item

<!-- break -->

1. First
2. Second
  1. First list item
  2. Second list item
  1. First
  2. Second

TIP: Use an HTML comment <!-- break --> to split adjacent lists.

Nesteded order lists

  • First
    • second
      • third
    • second
  • First

Ignoring markdown formatting

Let's rename *our-new-project* to *our-old-project*.

Let's rename \*our-new-project\* to \*our-old-project\*.

optional space text [space] text

Subscript/Superscript

x<sup>2</sup> and H<sub>2</sub>O

Renders to:

x2 H2O

custom classes, ids

Added optional class and id attributes to images and links using the same syntax as for headers:

[link](url){#id .class}  
![img](url){#id .class}

It work too for reference-style links and images. In this case you need to put those attributes at the reference definition:

[link][linkref] or [linkref]  
![img][linkref]
[linkref]: url "optional title" {#id .class}

Headers can now have a class attribute. You can add a class inside the extra attribute block which can optionally be put after a header:

### Header ###  {#id .class1 .class2}

Spaces between components in the brace is optional.

Fenced code blocks can also have a class and an id attribute. If you only need to apply a class (typically to indicate the language of a code snippet), you can write it like this:

~~~ html
<b>bold</b>
~~~

or like this:

~~~ .html
<b>bold</b>
~~~

There is a new configuration option MARKDOWN_CODE_CLASS_PREFIX you can use if you need to append a prefix to the class name.

You might also opt to use an extra attribute block just like for headers:

~~~ {.html #id .codeclass}
<b>bold</b>
~~~

  1. url "optional title" ↩︎ ↩︎