2015-07-14 04:35:18 +08:00
![Showdown][sd-logo]
2015-01-16 05:21:33 +08:00
2015-05-29 04:44:25 +08:00
[![Build Status ](https://travis-ci.org/showdownjs/showdown.svg?branch=master )](https://travis-ci.org/showdownjs/showdown) [![npm version ](https://badge.fury.io/js/showdown.svg )](http://badge.fury.io/js/showdown) [![Bower version ](https://badge.fury.io/bo/showdown.svg )](http://badge.fury.io/bo/showdown) [![Join the chat at https://gitter.im/showdownjs/showdown ](https://badges.gitter.im/Join%20Chat.svg )](https://gitter.im/showdownjs/showdown?utm_source=badge& utm_medium=badge& utm_campaign=pr-badge& utm_content=badge)
2015-05-27 23:31:04 +08:00
------
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
Showdown is a Javascript Markdown to HTML converter, based on the original works by John Gruber. Showdown can be used client side (in the browser) or server side (with NodeJs).
2015-01-16 05:21:33 +08:00
2015-07-14 10:34:37 +08:00
## Live DEMO
Check a live Demo here http://showdownjs.github.io/demo/
2015-01-16 05:21:33 +08:00
2015-08-23 10:31:55 +08:00
## Who uses Showdown (or a fork)
- [GoogleCloudPlatform ](https://github.com/GoogleCloudPlatform )
- [Ghost ](https://ghost.org/ )
- [Meteor ](https://www.meteor.com/ )
- [Stackexchange ](http://stackexchange.com/ ) - forked as [PageDown ](https://code.google.com/p/pagedown/ )
- [docular ](https://github.com/Vertafore/docular )
- [and some others... ](https://www.npmjs.com/browse/depended/showdown )
2015-05-14 09:47:13 +08:00
## Installation
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
### Download tarball
2015-01-16 05:21:33 +08:00
2015-07-14 04:35:18 +08:00
You can download the latest release tarball directly from [releases][releases]
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
### Bower
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
bower install showdown
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
### npm (server-side)
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
npm install showdown
2015-01-16 05:21:33 +08:00
2015-05-29 04:44:25 +08:00
### CDN
2015-07-14 04:35:18 +08:00
You can also use one of several CDNs available:
* github CDN
https://cdn.rawgit.com/showdownjs/showdown/< version tag > /dist/showdown.min.js
* cdnjs
https://cdnjs.cloudflare.com/ajax/libs/showdown/< version tag > /showdown.min.js
2015-05-29 04:44:25 +08:00
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
## Browser Compatibility
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
Showdown has been tested successfully with:
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
* Firefox 1.5 and 2.0
2015-07-03 20:57:05 +08:00
* Chrome 12.0
2015-05-14 09:47:13 +08:00
* Internet Explorer 6 and 7
* Safari 2.0.4
* Opera 8.54 and 9.10
* Netscape 8.1.2
* Konqueror 3.5.4
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
In theory, Showdown will work in any browser that supports ECMA 262 3rd Edition (JavaScript 1.5). The converter itself might even work in things that aren't web browsers, like Acrobat. No promises.
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
## Node compatibility
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
Showdown has been tested with node 0.8 and 0.10. However, it should work with previous versions, such as node 0.6.
2015-01-16 05:21:33 +08:00
2015-05-27 23:31:04 +08:00
## Legacy version
2015-07-14 04:35:18 +08:00
If you're looking for showdown v< 1.0.0 , you can find it in the [ * * legacy branch * * ] [ legacy-branch ] .
2015-05-27 23:31:04 +08:00
2015-07-07 17:47:38 +08:00
## Changelog
2015-07-14 04:35:18 +08:00
You can check the full [changelog][changelog]
2015-07-07 17:47:38 +08:00
## Extended documentation
2015-07-14 04:35:18 +08:00
Check our [wiki pages][wiki] for examples and a more in-depth documentation.
2015-07-07 17:47:38 +08:00
2015-05-27 23:31:04 +08:00
2015-05-14 09:47:13 +08:00
## Quick Example
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
### Node
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
```js
var showdown = require('showdown'),
converter = new showdown.Converter(),
text = '#hello, markdown!',
html = converter.makeHtml(text);
```
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
### Browser
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
```js
var converter = new showdown.Converter(),
text = '#hello, markdown!',
html = converter.makeHtml(text);
```
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
### Output
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
Both examples should output...
2015-07-07 17:47:38 +08:00
< h1 id = "hellomarkdown" > hello, markdown!< / h1 >
2015-01-16 05:21:33 +08:00
2015-05-27 09:20:29 +08:00
## Options
You can change some of showdown's default behavior through options.
### Setting options
Options can be set:
#### Globally
Setting a "global" option affects all instances of showdown
```js
showdown.setOption('optionKey', 'value');
```
#### Locally
Setting a "local" option only affects the specified Converter object.
Local options can be set:
* **through the constructor**
```js
2015-07-15 14:15:54 +08:00
var converter = new showdown.Converter({optionKey: 'value'});
2015-05-27 09:20:29 +08:00
```
* **through the setOption() method**
```js
var converter = new showdown.Converter();
2015-07-07 17:48:39 +08:00
converter.setOption('optionKey', 'value');
2015-05-27 09:20:29 +08:00
```
### Getting an option
Showdown provides 2 methods (both local and global) to retrieve previous set options.
#### getOption()
```js
// Global
var myOption = showdown.getOption('optionKey');
//Local
2015-05-27 23:39:54 +08:00
var myOption = converter.getOption('optionKey');
2015-05-27 09:20:29 +08:00
```
#### getOptions()
```js
// Global
var showdownGlobalOptions = showdown.getOptions();
//Local
2015-07-09 18:03:38 +08:00
var thisConverterSpecificOptions = converter.getOptions();
2015-05-27 09:20:29 +08:00
```
2015-06-18 08:22:42 +08:00
### Retrieve the default options
You can get showdown's default options with:
```js
var defaultOptions = showdown.getDefaultOptions();
```
2015-05-27 09:20:29 +08:00
### Valid Options
2015-06-17 09:19:44 +08:00
* **omitExtraWLInCodeBlocks**: (boolean) [default false] Omit the trailing newline in a code block. Ex:
2015-05-27 09:20:29 +08:00
This:
```html
< code > < pre > var foo = 'bar';
< / pre > < / code >
```
Becomes this:
```html
< code > < pre > var foo = 'bar';< / pre > < / code >
```
2015-06-17 09:19:44 +08:00
* **noHeaderId**: (boolean) [default false] Disable the automatic generation of header ids. Setting to true overrides **prefixHeaderId**
2015-05-27 09:20:29 +08:00
2015-06-17 09:19:44 +08:00
* **prefixHeaderId**: (string/boolean) [default false] Add a prefix to the generated header ids. Passing a string will prefix that string to the header id. Setting to `true` will add a generic 'section' prefix.
2015-06-17 08:22:05 +08:00
2015-06-17 09:19:44 +08:00
* **parseImgDimensions**: (boolean) [default false] Enable support for setting image dimensions from within markdown syntax.
2015-07-17 03:55:55 +08:00
Examples:
2015-06-17 08:22:05 +08:00
```
2015-07-17 03:55:55 +08:00
![foo ](foo.jpg =100x80 ) simple, assumes units are in px
![bar ](bar.jpg =100x* ) sets the height to "auto"
2015-07-22 04:01:47 +08:00
![baz ](baz.jpg =80%x5em ) Image with width of 80% and height of 5em
2015-06-17 08:22:05 +08:00
```
2015-06-17 09:19:44 +08:00
* **headerLevelStart**: (integer) [default 1] Set the header starting level. For instance, setting this to 3 means that
2015-05-27 09:20:29 +08:00
2015-07-15 18:15:39 +08:00
```md
# foo
```
will be parsed as
```html
< h3 > foo< / h3 >
```
* **simplifiedAutoLink**: (boolean) [default false] Turning this on will enable GFM autolink style. This means that
```md
some text www.google.com
```
will be parsed as
````
< p > some text < a href = "www.google.com" > www.google.com< / a >
```
2015-07-14 04:35:18 +08:00
2015-07-15 18:15:39 +08:00
* **literalMidWordUnderscores**: (boolean) [default false] Turning this on will stop showdown from interpreting underscores in the middle of words as `<em>` and `<strong>` and instead treat them as literal underscores.
Example:
2015-07-14 04:35:18 +08:00
```md
some text with__underscores__in middle
```
will be parsed as
```html
< p > some text with__underscores__in middle< / p >
```
* **strikethrough**: (boolean) [default false] Enable support for strikethrough syntax.
`~~strikethrough~~` as `<del>strikethrough</del>`
* **tables**: (boolean) [default false] Enable support for tables syntax. Example:
```md
2015-07-21 20:42:15 +08:00
| h1 | h2 | h3 |
2015-07-14 04:35:18 +08:00
|:------|:-------:|--------:|
| 100 | [a][1] | ![b][2] |
2015-07-21 20:42:15 +08:00
| *foo* | **bar** | ~~baz~~ |
2015-07-14 04:35:18 +08:00
```
See the wiki for more info
* **tablesHeaderId**: (boolean) [default false] If enabled adds an id property to table headers tags.
* **ghCodeBlocks**: (boolean) [default true] Enable support for GFM code block style.
* **tasklists**:(boolean) [default false] Enable support for GFM takslists. Example:
```md
- [x] This task is done
- [ ] This is still pending
```
2015-07-15 04:47:02 +08:00
* **smoothLivePreview**: (boolean) [default false] Prevents weird effects in live previews due to incomplete input
2016-06-07 08:23:52 +08:00
* **smartIndentationFix**: (boolean) [default false] Tries to smartly fix indentation problems related to es6 template strings in the midst of indented code.
2015-07-14 04:35:18 +08:00
## CLI Tool
Showdown also comes bundled with a Command Line Interface tool. You can check the [CLI wiki page][cli-wiki] for more info
2015-05-16 07:09:24 +08:00
## Integration with AngularJS
ShowdownJS project also provides seamlessly integration with AngularJS via a "plugin".
Please visit https://github.com/showdownjs/ngShowdown for more information.
2015-06-23 17:13:22 +08:00
## Integration with TypeScript
2015-07-14 04:35:18 +08:00
If you're using TypeScript you maybe want to use the types from [DefinitelyTyped][definitely-typed]
2015-06-23 17:13:22 +08:00
2016-03-20 12:32:57 +08:00
## Integration with SystemJS/JSPM
2016-03-21 00:48:42 +08:00
Integration with SystemJS can be obtained via the third party ["system-md" plugin ](https://github.com/guybedford/system-md ).
2016-03-20 12:32:57 +08:00
2015-05-30 05:20:50 +08:00
## XSS vulnerability
2015-05-30 07:13:47 +08:00
Showdown doesn't sanitize the input. This is by design since markdown relies on it to allow certain features to be correctly parsed into HTML.
This, however, means XSS injection is quite possible.
2015-05-30 05:20:50 +08:00
2015-07-14 04:35:18 +08:00
Please refer to the wiki article [Markdown's XSS Vulnerability (and how to mitigate it)][xss-wiki]
2015-05-30 07:13:47 +08:00
for more information.
2015-01-16 05:21:33 +08:00
## Extensions
2015-07-14 04:35:18 +08:00
Showdown allows additional functionality to be loaded via extensions. (you can find a list of known showdown extensions [here][ext-wiki])
2015-01-16 05:21:33 +08:00
### Client-side Extension Usage
```js
2015-05-14 09:47:13 +08:00
< script src = "showdown.js" / >
< script src = "twitter-extension.js" / >
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
var converter = new showdown.Converter({ extensions: 'twitter' });
2015-01-16 05:21:33 +08:00
```
### Server-side Extension Usage
```js
2015-05-14 09:47:13 +08:00
var showdown = require('showdown'),
myExtension = require('myExtension'),
converter = new showdown.Converter({ extensions: ['myExtension'] });
2015-01-16 05:21:33 +08:00
```
2015-05-14 09:47:13 +08:00
## Tests
2015-06-23 16:16:16 +08:00
A suite of tests is available which require node.js. Once node is installed, run the following command from the project root to install the dependencies:
2015-05-14 09:47:13 +08:00
2015-06-23 16:16:16 +08:00
npm install
2015-05-14 09:47:13 +08:00
Once installed the tests can be run from the project root using:
npm test
New test cases can easily be added. Create a markdown file (ending in `.md` ) which contains the markdown to test. Create a `.html` file of the exact same name. It will automatically be tested when the tests are executed with `mocha` .
## Contributing
2015-01-16 05:21:33 +08:00
2015-05-16 07:09:24 +08:00
If you wish to contribute please read the following quick guide.
### Want a Feature?
You can request a new feature by submitting an issue. If you would like to implement a new feature feel free to issue a
Pull Request.
### Pull requests (PRs)
PRs are awesome. However, before you submit your pull request consider the following guidelines:
- Search GitHub for an open or closed Pull Request that relates to your submission. You don't want to duplicate effort.
- When issuing PRs that change code, make your changes in a new git branch based on master:
```bash
git checkout -b my-fix-branch master
```
- Documentation (i.e: README.md) changes can be made directly against master.
- Run the full test suite before submitting and make sure all tests pass (obviously =P).
2015-07-14 04:35:18 +08:00
- Try to follow our [**coding style rules**][coding-rules].
2015-05-16 07:09:24 +08:00
Breaking them prevents the PR to pass the tests.
- Refrain from fixing multiple issues in the same pull request. It's preferable to open multiple small PRs instead of one
hard to review big one.
- If the PR introduces a new feature or fixes an issue, please add the appropriate test case.
- We use commit notes to generate the changelog. It's extremely helpful if your commit messages adhere to the
2015-07-14 04:35:18 +08:00
[**AngularJS Git Commit Guidelines**][ng-commit-guide].
2015-05-16 07:09:24 +08:00
- If we suggest changes then:
- Make the required updates.
- Re-run the Angular test suite to ensure tests are still passing.
- Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
```bash
git rebase master -i
git push origin my-fix-branch -f
```
- After your pull request is merged, you can safely delete your branch.
If you have time to contribute to this project, we feel obliged that you get credit for it.
These rules enable us to review your PR faster and will give you appropriate credit in your GitHub profile.
We thank you in advance for your contribution!
### Joining the team
We're looking for members to help maintaining Showdown.
Please see [this issue ](https://github.com/showdownjs/showdown/issues/114 ) to express interest or comment on this note.
2015-01-16 05:21:33 +08:00
2015-05-14 09:47:13 +08:00
## Credits
2015-05-16 07:09:24 +08:00
Full credit list at https://github.com/showdownjs/showdown/blob/master/CREDITS.md
2015-05-16 07:29:22 +08:00
2015-05-16 07:33:32 +08:00
Showdown is powered by:< br / >
[![webstorm ](https://www.jetbrains.com/webstorm/documentation/docs/logo_webstorm.png )](https://www.jetbrains.com/webstorm/)
2015-07-14 04:35:18 +08:00
[sd-logo]: https://raw.githubusercontent.com/showdownjs/logo/master/dist/logo.readme.png
[legacy-branch]: https://github.com/showdownjs/showdown/tree/legacy
[releases]: https://github.com/showdownjs/showdown/releases
[changelog]: https://github.com/showdownjs/showdown/blob/master/CHANGELOG.md
[wiki]: https://github.com/showdownjs/showdown/wiki
[cli-wiki]: https://github.com/showdownjs/showdown/wiki/CLI-tool
[definitely-typed]: https://github.com/borisyankov/DefinitelyTyped/tree/master/showdown
[xss-wiki]: https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)
[ext-wiki]: https://github.com/showdownjs/showdown/wiki/extensions
[coding-rules]: https://github.com/showdownjs/code-style/blob/master/README.md
[ng-commit-guide]: https://github.com/showdownjs/code-style/blob/master/README.md#commit-message-convention