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
7.7 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">
10 years ago
<script src="./assets/index.js"></script>
</head>
<body>
<div class="container">
<h1>Remarkable demo</h1>
10 years ago
<p><a data-toggle="collapse" href="#code-sample">code sample</a></p>
10 years ago
<pre id="code-sample" class="collapse code-sample"><code class="js">var Remarkable = require('remarkable');
var hljs = require('highlight.js') // https://highlightjs.org/
10 years ago
var md = new Remarkable({
10 years ago
html: false, // Enable html tags in source
xhtmlOut: false, // Use '/' to close single tags (&lt;br /&gt;)
breaks: false, // Convert '\n' in paragraphs into &lt;br&gt;
langPrefix: 'language-', // CSS language prefix for fenced blocks
linkify: true, // autoconvert url-like texts to links
typographer: true, // Enable smartypants and other sweet transforms
10 years ago
// Highlighter function. Should return escaped html,
// or '' if input not changed
highlight: function (str, lang) {
if (lang &amp;&amp; hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (__) {}
}
try {
return hljs.highlightAuto(str).value;
} catch (__) {}
return ''; // use external default escaping
}
});
10 years ago
console.log(md.render('# Remarkable rulezz!'));
// =&gt; &lt;h1&gt;Remarkable rulezz!&lt;/h1&gt;
</code></pre>
<div class="form-inline demo-options">
10 years ago
<div class="checkbox not-strict">
<label title="enable html tags in source text" class="_tip">
<input id="html" type="checkbox"> html
</label>
</div>
10 years ago
<div class="checkbox not-strict">
10 years ago
<label title="produce xtml output (add / to single tags (&lt;br /&gt; instead of &lt;br&gt;)" class="_tip">
<input id="xhtmlOut" type="checkbox"> xhtmlOut
</label>
</div>
10 years ago
<div class="checkbox not-strict">
<label title="newlines in paragraphs are rendered as &lt;br&gt;" class="_tip">
<input id="breaks" type="checkbox"> breaks
</label>
</div>
10 years ago
<div class="checkbox not-strict">
10 years ago
<label title="autoconvert link-like texts to links" class="_tip">
<input id="linkify" type="checkbox"> linkify
</label>
</div>
10 years ago
<div class="checkbox not-strict">
10 years ago
<label title="do typographyc replacements, (c) -&gt; © and so on" class="_tip">
<input id="typographer" type="checkbox"> typographer
</label>
</div>
10 years ago
<div class="checkbox not-strict">
<label title="enable output highlight for fenced blocks" class="_tip">
<input id="_highlight" type="checkbox"> highlight
</label>
</div>
10 years ago
<div class="form-group not-strict">
10 years ago
<input id="langPrefix" type="input" placeholder="language prefix" title="css class language prefix for fenced code blocks" class="form-control _tip">
</div>
10 years ago
<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>
10 years ago
<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.
10 years ago
You will like those projects!
---
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
## Horizontal Rules
___
---
***
10 years ago
## Typographic replacements
10 years ago
Enable typographer option to see result.
10 years ago
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
10 years ago
test.. test... test..... test?..... test!....
10 years ago
!!!!!! ???? ,,
10 years ago
Remarkable -- awesome
10 years ago
&quot;Smartypants, double quotes&quot;
'Smartypants, single quotes'
## Emphasis
10 years ago
**This is bold text**
10 years ago
__This is bold text__
10 years ago
*This is italic text*
10 years ago
_This is italic text_
~~Strike through this text~~
## Blockquotes
10 years ago
&gt; Blockquotes can also be nested...
&gt;&gt; ...by using additional greater-than signs right next to each other...
&gt; &gt; &gt; ...or with spaces between arrows.
## Lists
10 years ago
Unordered
10 years ago
+ 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!
10 years ago
Ordered
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
10 years ago
1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`
Start numbering with offset:
57. foo
1. bar
## Code
10 years ago
Inline `code`
10 years ago
Indented code
// Some comments
line 1 of code
line 2 of code
line 3 of code
10 years ago
Block code &quot;fences&quot;
```
Sample text here...
```
10 years ago
Syntax highlighting
10 years ago
``` js
10 years ago
var foo = function (bar) {
return bar++;
};
10 years ago
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. |
10 years ago
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
10 years ago
[link text](http://dev.nodeca.com)
10 years ago
[link with title](http://nodeca.github.io/pica/demo/ &quot;title text!&quot;)
10 years ago
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
## Images
![Minion](http://octodex.github.com/images/minion.png)
![Alt text](http://octodex.github.com/images/stormtroopocat.jpg &quot;The Stormtroopocat&quot;)
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 &quot;The Dojocat&quot;
</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>