<!DOCTYPE html>
< html >
< head >
< title > Remarkable demo< / title >
< meta charset = "UTF-8" >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" > < / script >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js" > < / script >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/solarized_light.min.css" >
< script src = "../dist/remarkable.js" > < / script >
< link rel = "stylesheet" href = "./assets/index.css" >
< script src = "./assets/index.js" > < / script >
< / head >
< body >
< div class = "container" >
< h1 > Remarkable demo< / h1 >
< p > < a data-toggle = "collapse" href = "#code-sample" > code sample< / a > < / p >
< pre id = "code-sample" class = "collapse code-sample" > < code class = "js" > var Remarkable = require('remarkable');
var hljs = require('highlight.js') // https://highlightjs.org/
var md = new Remarkable({
html: false, // Enable html tags in source
xhtmlOut: false, // Use '/' to close single tags (< br /> )
breaks: false, // Convert '\n' in paragraphs into < br>
langPrefix: 'language-', // CSS language prefix for fenced blocks
linkify: true, // autoconvert url-like texts to links
typographer: true, // Enable smartypants and other sweet transforms
// Highlighter function. Should return escaped html,
// or '' if input not changed
highlight: function (str, lang) {
if (lang & & hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (__) {}
}
try {
return hljs.highlightAuto(str).value;
} catch (__) {}
return ''; // use external default escaping
}
});
console.log(md.parse('# Remarkable rulezz!'));
// => < h1> Remarkable rulezz!< /h1>
< / code > < / pre >
< div class = "form-inline demo-options" >
< div class = "checkbox not-strict" >
< label title = "enable html tags in source text" class = "_tip" >
< input id = "html" type = "checkbox" > html
< / label >
< / div >
< div class = "checkbox not-strict" >
< label title = "produce xtml output (add / to single tags (<br /> instead of <br>)" class = "_tip" >
< input id = "xhtmlOut" type = "checkbox" > xhtmlOut
< / label >
< / div >
< div class = "checkbox not-strict" >
< label title = "newlines in paragraphs are rendered as <br>" class = "_tip" >
< input id = "breaks" type = "checkbox" > breaks
< / label >
< / div >
< div class = "checkbox not-strict" >
< label title = "autoconvert link-like texts to links" class = "_tip" >
< input id = "linkify" type = "checkbox" > linkify
< / label >
< / div >
< div class = "checkbox not-strict" >
< label title = "do typographyc replacements, (c) -> © and so on" class = "_tip" >
< input id = "typographer" type = "checkbox" > typographer
< / label >
< / div >
< div class = "checkbox not-strict" >
< label title = "enable output highlight for fenced blocks" class = "_tip" >
< input id = "_highlight" type = "checkbox" > highlight
< / label >
< / div >
< div class = "form-group not-strict" >
< input id = "langPrefix" type = "input" placeholder = "language prefix" title = "css class language prefix for fenced code blocks" class = "form-control _tip" >
< / div >
< div class = "checkbox" >
< label title = "force strict CommonMark mode - output will be equal to reference parser" class = "_tip" >
< input id = "_strict" type = "checkbox" > CommonMark strict
< / label >
< / div >
< / div >
< / div >
< div class = "container full-height" >
< div class = "row full-height" >
< div class = "col-xs-6 full-height" >
< div class = "demo-control" > < a href = "#" class = "source-clear" > clear< / a > < a id = "permalink" href = "./" title = "Share this snippet as link" > < strong > permalink< / strong > < / a > < / div >
< textarea class = "source full-height" > ---
__Advertisement :)__
- __[pica](http://nodeca.github.io/pica/demo/)__ - high quality and fast image
resize in browser.
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developpers friendly
i18n with plurals support and easy syntax.
You will like those projects!
---
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
## Horizontal Rules
___
---
***
## Typographic replacements
Enable typographer option to see result.
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
test.. test... test..... test?..... test!....
!!!!!! ???? ,,
Remarkable -- awesome
" Smartypants, double quotes"
'Smartypants, single quotes'
## Emphasis
**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
~~Strike through this text~~
## Blockquotes
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Blockquotes can also be nested:
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
> > > Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
## Lists
Unordered
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
- Phasellus iaculis neque
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
* Facilisis in pretium nisl aliquet
* Nulla volutpat aliquam velit
+ Faucibus porta lacus fringilla vel
Ordered
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
## Code
Inline `code`
Indented code
// Some comments
line 1 of code
line 2 of code
line 3 of code
Block code " fences"
```
Sample text here...
```
Syntax highlighting
``` js
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
```
## Tables
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Right aligned columns
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
## Links
[link text](http://dev.nodeca.com)
[link with title](http://nodeca.github.io/pica/demo/ " title text!" )
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
## Images
Like links, Images also have a footnote style syntax
![Alt text][id]
With a reference later in the document defining the URL location:
[id]: http://octodex.github.com/images/dojocat.jpg " The Dojocat"
< / textarea >
< / div >
< section class = "col-xs-6 full-height" >
< div class = "demo-control" > < a href = "#" class = "result-mode" > html / source< / a > < / div >
< div class = "result full-height" > < / div >
< pre class = "result-src full-height" > < code class = "result-src-content full-height" > < / code > < / pre >
< / section >
< / div >
< / div >
< div class = "gh-ribbon" > < a href = "https://github.com/jonschlinkert/remarkable" target = "_blank" > Fork me on GitHub< / a > < / div >
< / body >
< / html >
