![Showdown][sd-logo]
Showdown is a Javascript Markdown to HTML converter, based on the original works by John Gruber. It can be used client side (in the browser) or server side (with Node or io).
## Installation
### Download tarball
You can download the latest release tarball directly from [releases][releases]
### Bower
bower install showdown
### npm (server-side)
npm install showdown
### CDN
You can also use one of several CDNs available:
* rawgit CDN
https://cdn.rawgit.com/showdownjs/showdown//dist/showdown.min.js
* cdnjs
https://cdnjs.cloudflare.com/ajax/libs/showdown//showdown.min.js
[sd-logo]: https://raw.githubusercontent.com/showdownjs/logo/master/dist/logo.readme.png
[releases]: https://github.com/showdownjs/showdown/releases
[atx]: http://www.aaronsw.com/2002/atx/intro
[setext]: https://en.wikipedia.org/wiki/Setext
---------
## Syntax
This new ruleset is based on the comments of Markdown's author John Gruber in the [Markdown discussion list][md-newsletter].
## Introduction
Showdown was created by John Fraser as a direct port of the original parser written by markdown's creator, John Gruber. Although Showdown has evolved since its inception, in "vanilla mode", it tries to follow the [original markdown spec][md-spec] (henceforth refereed as vanilla) as much as possible. There are, however, a few important differences, mainly due to inconsistencies in the original spec, which we addressed following the author's advice as stated in the [markdown's "official" newsletter][md-newsletter].
Showdown also support "extra" syntax not defined in the original spec as opt-in features. This means new syntax elements are not enabled by default and require users to enable them through options.
This document provides a quick description the syntax supported and the differences in output from the original markdown.pl implementation.
## Paragraphs
Paragraphs in Showdown are just **one or more lines of consecutive text** followed by one or more blank lines.
```md
On July 2, an alien mothership entered Earth's orbit and deployed several dozen
saucer-shaped "destroyer" spacecraft, each 15 miles (24 km) wide.
On July 3, the Black Knights, a squadron of Marine Corps F/A-18 Hornets,
participated in an assault on a destroyer near the city of Los Angeles.
```
The implication of the “one or more consecutive lines of text” is that Showdown supports
“hard-wrapped” text paragraphs. This means the following examples produce the same output:
```md
A very long line of text
```
```md
A very
long line
of text
```
If you DO want to add soft line breaks (which translate to `
` in HTML) to a paragraph, you can do so by adding 3 space characters to the end of the line (` `). You can also force every line break in paragraphs to translate to `
` (as Github does) by enabling the option **`simpleLineBreaks`**. ## Headings ### Atx Style You can create a heading by adding one or more # symbols before your heading text. The number of # you use will determine the size of the heading. This is similar to [**atx style**][atx]. ```md # The largest heading (an tag)
## The second largest heading (an
this is my email
```
In the case of email addreses, Showdown will also perform a bit of randomized decimal and hex entity-encoding to help obscure your address from address-harvesting spambots.
You can disable this obfuscation setting **`encodeEmails`** option to `false`.
With the option **`simplifiedAutoLink`** enabled, Showdown will automagically turn every valid URL it finds in the text body to links for you, without the need to wrap them in `<>`.
```md
link to http://www.google.com/
this is my email somedude@mail.com
```
### Inline
You can create an inline link by wrapping link text in brackets ( `[ ]` ), and then wrapping the link in parentheses ( `( )` ).
For example, to create a hyperlink to github.com/showdownjs/showdown, with a link text that says, Get Showdown!, you'd write this in Markdown: `[Get Showdown!](https://github.com/showdownjs/showdown)`.
### Reference Style
You can also use the reference style, like this:
```md
this is a [link to google][1]
[1]: www.google.com
```
Showdown also supports implicit link references:
```md
this is a link to [google][]
[google]: www.google.com
```
## Images
Markdown uses an image syntax that is intended to resemble the syntax for links, also allowing for two styles: inline and reference.
### Inline
Inline image syntax looks like this:
```md


```
That is:
+ An exclamation mark: !;
+ followed by a set of square brackets, containing the alt attribute text for the image;
+ followed by a set of parentheses, containing the URL or path to the image, and an optional title attribute enclosed in double or single quotes.
### Reference Style
Reference-style image syntax looks like this:
```md
![Alt text][id]
```
Where “id” is the name of a defined image reference. Image references are defined using syntax identical to link references:
```md
[id]: url/to/image "Optional title attribute"
```
Implicit references are also supported in images, similar to what happens with links:
```md
![showdown logo][]
[showdown logo]: http://showdownjs.github.io/demo/img/editor.logo.white.png
```
### Image dimensions
When the option **`parseImgDimension`** is activated, you can also define the image dimensions, like this:
```md

```
or in reference style:
```md
![Alt text][id]
[id]: url/to/image =250x250
```
### Base64 encoded images
Showdown also supports Base64 encoded images, both reference and inline style.
**Since version 1.7.4**, wrapping base64 strings, which are usually extremely long lines of text, is supported.
You can add newlines arbitrarily, as long as they are added after the `,` character.
**inline style**
```md

```
**reference style**
```md
![Alt text][id]
[id]:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7l
jmRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7D
AcdvqGQAAAAYSURBVBhXYwCC/2AAZYEoOAMs8Z+BgQEAXdcR7/Q1gssAAAAASUVORK5CYII=
```
Please note that with reference style base64 image sources, regardless of "wrapping", a double newline is needed after the base64 string to separate them from a paragraph or other text block (but references can be adjacent).
**wrapped reference style**
```md
![Alt text][id]
![Alt text][id2]
[id]:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7l
jmRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7D
AcdvqGQAAAAYSURBVBhXYwCC/2AAZYEoOAMs8Z+BgQEAXdcR7/Q1gssAAAAASUVORK5CYII=
[id2]:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7l
jmRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7D
AcdvqGQAAAAYSURBVBhXYwCC/2AAZYEoOAMs8Z+BgQEAXdcR7/Q1gssAAAAASUVORK5CYII=
this text needs to be separated from the references by 2 newlines
```
## Tables
Tables aren't part of the core Markdown spec, but they are part of GFM and Showdown supports them by turning on the option `tables`.
Colons can be used to align columns.
In the new version, the outer pipes (`|`) are optional, matching GFM spec.
You also don't need to make the raw Markdown line up prettily.
You can also use other markdown syntax inside them.
```md
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| **col 3 is** | right-aligned | $1600 |
| col 2 is | *centered* | $12 |
| zebra stripes | ~~are neat~~ | $1 |
```
## Mentions
Showdown supports github mentions by enabling the option **`ghMentions`**. This will turn every `@username` into a link to their github profile.
```md
hey @tivie, check this out
```
Since version 1.6.2 you can customize the generated link in mentions with the option **`ghMentionsLink`**.
For instance, setting this option to `http://mysite.com/{u}/profile`:
```html
bar
baz
` in HTML) to a paragraph, you can do so by adding 3 space characters to the end of the line (` `). You can also force every line break in paragraphs to translate to `
` (as Github does) by enabling the option **`simpleLineBreaks`**. ## Headings ### Atx Style You can create a heading by adding one or more # symbols before your heading text. The number of # you use will determine the size of the heading. This is similar to [**atx style**][atx]. ```md # The largest heading (an
tag)
## The second largest heading (an tag)
…
###### The 6th largest heading (an tag)
```
The space between `#` and the heading text is not required but you can make that space mandatory by enabling the option **`requireSpaceBeforeHeadingText`**.
You can wrap the headings in `#`. Both leading and trailing `#` will be removed.
```md
## My Heading ##
```
If, for some reason, you need to keep a leading or trailing `#`, you can either add a space or escape it:
```md
# # My header # #
#\# My Header \# #
```
### Setext style
You can also use [**setext style**][setext] headings, although only two levels are available.
```md
This is an H1
=============
This is an H2
-------------
```
**Note:**
In live preview editors, when a paragraph is followed by a list it can cause an awkward effect.
![awkward effect][]
You can prevent this by enabling the option **`smoothPreview`**.
### Header IDs
Showdown generates bookmarks anchors in titles automatically, by adding an id property to an heading.
```md
# My cool header with ID
```
```html
My cool header with ID
```
This behavior can be modified with options:
- **`noHeaderId`** disables automatic id generation;
- **`ghCompatibleHeaderId`** generates header ids compatible with github style (spaces are replaced with dashes and a bunch of non alphanumeric chars are removed)
- **`prefixHeaderId`** adds a prefix to the generated header ids (either automatic or custom).
- **`headerLevelStart`** sets the header starting level. For instance, setting this to 3 means that `# header` will be converted to ``.
Read the [README.md][readme] for more info
## Blockquotes
You can indicate blockquotes with a >.
```md
In the words of Abraham Lincoln:
> Pardon my french
```
Blockquotes can have multiple paragraphs and can have other block elements inside.
```md
> A paragraph of text
>
> Another paragraph
>
> - A list
> - with items
```
## Bold and Italic
You can make text bold or italic.
*This text will be italic*
**This text will be bold**
Both bold and italic can use either a \* or an \_ around the text for styling. This allows you to combine both bold and italic if needed.
**Everyone _must_ attend the meeting at 5 o'clock today.**
## Strikethrough
With the option **`strikethrough`** enabled, Showdown supports strikethrough elements.
The syntax is the same as GFM, that is, by adding two tilde (`~~`) characters around
a word or groups of words.
```md
a ~~strikethrough~~ element
```
a ~~strikethrough~~ element
## Emojis
Since version 1.8.0, showdown supports github's emojis. A complete list of available emojis can be foun [here][emoji list].
```md
this is a :smile: smile emoji
```
this is a :smile: smile emoji
## Code formatting
### Inline formats
Use single backticks (`) to format text in a special monospace format. Everything within the backticks appear as-is, with no other special formatting.
```md
Here's an idea: why don't we take `SuperiorProject` and turn it into `**Reasonable**Project`.
```
```html
tag)
```
The space between `#` and the heading text is not required but you can make that space mandatory by enabling the option **`requireSpaceBeforeHeadingText`**.
You can wrap the headings in `#`. Both leading and trailing `#` will be removed.
```md
## My Heading ##
```
If, for some reason, you need to keep a leading or trailing `#`, you can either add a space or escape it:
```md
# # My header # #
#\# My Header \# #
```
### Setext style
You can also use [**setext style**][setext] headings, although only two levels are available.
```md
This is an H1
=============
This is an H2
-------------
```
**Note:**
In live preview editors, when a paragraph is followed by a list it can cause an awkward effect.
![awkward effect][]
You can prevent this by enabling the option **`smoothPreview`**.
### Header IDs
Showdown generates bookmarks anchors in titles automatically, by adding an id property to an heading.
```md
# My cool header with ID
```
```html
My cool header with ID
```
This behavior can be modified with options:
- **`noHeaderId`** disables automatic id generation;
- **`ghCompatibleHeaderId`** generates header ids compatible with github style (spaces are replaced with dashes and a bunch of non alphanumeric chars are removed)
- **`prefixHeaderId`** adds a prefix to the generated header ids (either automatic or custom).
- **`headerLevelStart`** sets the header starting level. For instance, setting this to 3 means that `# header` will be converted to ``.
Read the [README.md][readme] for more info
## Blockquotes
You can indicate blockquotes with a >.
```md
In the words of Abraham Lincoln:
> Pardon my french
```
Blockquotes can have multiple paragraphs and can have other block elements inside.
```md
> A paragraph of text
>
> Another paragraph
>
> - A list
> - with items
```
## Bold and Italic
You can make text bold or italic.
*This text will be italic*
**This text will be bold**
Both bold and italic can use either a \* or an \_ around the text for styling. This allows you to combine both bold and italic if needed.
**Everyone _must_ attend the meeting at 5 o'clock today.**
## Strikethrough
With the option **`strikethrough`** enabled, Showdown supports strikethrough elements.
The syntax is the same as GFM, that is, by adding two tilde (`~~`) characters around
a word or groups of words.
```md
a ~~strikethrough~~ element
```
a ~~strikethrough~~ element
## Emojis
Since version 1.8.0, showdown supports github's emojis. A complete list of available emojis can be foun [here][emoji list].
```md
this is a :smile: smile emoji
```
this is a :smile: smile emoji
## Code formatting
### Inline formats
Use single backticks (`) to format text in a special monospace format. Everything within the backticks appear as-is, with no other special formatting.
```md
Here's an idea: why don't we take `SuperiorProject` and turn it into `**Reasonable**Project`.
```
```html
Here's an idea: why don't we take SuperiorProject
and turn it into **Reasonable**Project
.
` tags in the HTML output. So this input: ```md * Bird * Magic * Johnson ``` Results in: ```html
Bird
Magic
Johnson
hey @tivie, check this out
``` ## Handling HTML in markdown documents Showdown, in most cases, leaves HTML tags alone, leaving them untouched in the output document. ```md some markdown **here**this is *not* **parsed**
```
```html
some markdown here