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.
318 lines
9.0 KiB
318 lines
9.0 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Remarkable demo</title>
|
|
<meta charset="UTF-8">
|
|
<script src="https://cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/lodash/2.4.1/lodash.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.css">
|
|
<script src="https://cdn.jsdelivr.net/highlight.js/8.2/highlight.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/8.2/styles/solarized_light.css">
|
|
<script src="../dist/remarkable.min.js"></script>
|
|
<link rel="stylesheet" href="./assets/index.css">
|
|
<script src="./assets/index.js"></script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-26895916-3', 'auto');
|
|
ga('require', 'displayfeatures');
|
|
ga('require', 'linkid', 'linkid.js');
|
|
ga('send', 'pageview');
|
|
|
|
</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('full', {
|
|
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
|
|
|
|
// Enable some language-neutral replacements + quotes beautification
|
|
typographer: false,
|
|
|
|
// Double + single quotes replacement pairs, when typographer enabled,
|
|
// and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
|
|
quotes: '“”‘’',
|
|
|
|
// 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.render('# 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](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
|
|
resize in browser.
|
|
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer 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_
|
|
|
|
~~Deleted text~~
|
|
|
|
Superscript: 19^th^
|
|
|
|
Subscript: H~2~O
|
|
|
|
++Inserted text++
|
|
|
|
==Marked text==
|
|
|
|
|
|
## Blockquotes
|
|
|
|
|
|
> Blockquotes can also be nested...
|
|
>> ...by using additional greater-than signs right next to each other...
|
|
> > > ...or with spaces between arrows.
|
|
|
|
|
|
## Lists
|
|
|
|
Unordered
|
|
|
|
+ Create a list by starting a line with `+`, `-`, or `*`
|
|
+ Sub-lists are made by indenting 2 spaces:
|
|
- Marker character change forces new list start:
|
|
* Ac tristique libero volutpat at
|
|
+ Facilisis in pretium nisl aliquet
|
|
- Nulla volutpat aliquam velit
|
|
+ Very easy!
|
|
|
|
Ordered
|
|
|
|
1. Lorem ipsum dolor sit amet
|
|
2. Consectetur adipiscing elit
|
|
3. Integer molestie lorem at massa
|
|
|
|
|
|
1. You can use sequential numbers...
|
|
1. ...or keep all the numbers as `1.`
|
|
|
|
Start numbering with offset:
|
|
|
|
57. foo
|
|
1. bar
|
|
|
|
|
|
## 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]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
|
|
|
|
|
## Abbreviations
|
|
|
|
This is HTML abbreviation example. It converts "HTML",
|
|
but keep intact partial entries like "xxxHTMLyyy" and so on.
|
|
|
|
*[HTML]: Hyper Text Markup Language
|
|
|
|
|
|
## Footnotes
|
|
|
|
Footnote 1 link [^1].
|
|
|
|
Footnote 2 link [^2]. One more time [^2].
|
|
|
|
Inline footnote definition ^[Text of inline footnote].
|
|
|
|
[^1]: footnote text.
|
|
[^2]: footnote **can have markup**.
|
|
|
|
and multiple paragraphs.
|
|
</textarea>
|
|
</div>
|
|
<section class="col-xs-6 full-height">
|
|
<div class="demo-control"><a href="#" data-result-as="html">html</a><a href="#" data-result-as="src">source</a><a href="#" data-result-as="debug">debug</a></div>
|
|
<div class="result-html full-height"></div>
|
|
<pre class="result-src full-height"><code class="result-src-content full-height"></code></pre>
|
|
<pre class="result-debug full-height"><code class="result-debug-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>
|