Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed
https://markdown-it.github.io/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
8.0 KiB
269 lines
8.0 KiB
<!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>
|