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.
260 lines
7.7 KiB
260 lines
7.7 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Remarkable demo</title>
|
|
<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/default.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 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: false, // autoconvert url-like texts to links
|
|
typographer: false, // Enable smartypants and other sweet transforms
|
|
|
|
// Highlighter function. Should return escaped html,
|
|
// or '' if input not changed
|
|
highlight: function (/*str, , lang*/) { return ''; }
|
|
});
|
|
|
|
console.log(md.parse('# Remarkable rulezz!'));
|
|
// => <h1>Remarkable rulezz!</h1>
|
|
</code></pre>
|
|
<div class="form-inline demo-options">
|
|
<div class="checkbox">
|
|
<label title="enable html tags in source text" class="_tip">
|
|
<input id="html" type="checkbox"> html
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<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">
|
|
<label title="newlines in paragraphs are rendered as <br>" class="_tip">
|
|
<input id="breaks" type="checkbox"> breaks
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label title="autoconvert link-like texts to links" class="_tip">
|
|
<input id="linkify" type="checkbox"> linkify
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label title="do typographyc replacements, (c) -> © and so on" class="_tip">
|
|
<input id="typographer" type="checkbox"> typographer
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label title="enable output highlight for fenced blocks" class="_tip">
|
|
<input id="_highlight" type="checkbox"> highlight
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<input id="langPrefix" type="input" placeholder="language prefix" title="css class language prefix for fenced code blocks" class="form-control _tip">
|
|
</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"># 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
|
|
+ Facilisis in pretium nisl aliquet
|
|
+ Nulla volutpat aliquam velit
|
|
- Phasellus iaculis neque
|
|
- Purus sodales ultricies
|
|
- Vestibulum laoreet porttitor sem
|
|
- Ac tristique libero volutpat at
|
|
* Consectetur adipiscing elit
|
|
* Integer molestie lorem at massa
|
|
+ Faucibus porta lacus fringilla vel
|
|
+ Aenean sit amet erat nunc
|
|
+ Eget porttitor lorem
|
|
|
|
Ordered
|
|
|
|
1. Lorem ipsum dolor sit amet
|
|
2. Consectetur adipiscing elit
|
|
3. Integer molestie lorem at massa
|
|
4. Facilisis in pretium nisl aliquet
|
|
5. Nulla volutpat aliquam velit
|
|
6. Faucibus porta lacus fringilla vel
|
|
7. Aenean sit amet erat nunc
|
|
8. Eget porttitor lorem
|
|
|
|
|
|
## 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
|
|
grunt.initConfig({
|
|
assemble: {
|
|
options: {
|
|
assets: 'docs/assets',
|
|
data: 'src/data/*.{json,yml}',
|
|
helpers: 'src/custom-helpers.js',
|
|
partials: ['src/partials/**/*.{hbs,md}']
|
|
},
|
|
pages: {
|
|
options: {
|
|
layout: 'default.hbs'
|
|
},
|
|
files: {
|
|
'./': ['src/templates/pages/index.hbs']
|
|
}
|
|
}
|
|
}
|
|
};
|
|
```
|
|
|
|
## 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>
|