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.
163 lines
4.4 KiB
163 lines
4.4 KiB
10 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
|
||
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="http://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>
|
||
|
|
<h2>Basic examples</h2>
|
||
|
|
<h3>Simple markdown</h3>
|
||
|
|
<p>That's a sample of typical `remarkable` use. You can play with content
|
||
|
|
</p>
|
||
|
|
<p><a data-toggle="collapse" href="#code-sample-demo1">Show code</a></p>
|
||
|
|
<pre id="code-sample-demo1" class="collapse"><code class="js">var Remarkable = require('remarkable');
|
||
|
|
|
||
|
|
var md = new Remarkable({
|
||
|
|
gfm: true,
|
||
|
|
tables: true,
|
||
|
|
breaks: false,
|
||
|
|
pedantic: false,
|
||
|
|
sanitize: true,
|
||
|
|
smartLists: true,
|
||
|
|
smartypants: false
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log(md.parse('# Remarkable rulezz!'));
|
||
|
|
// => <h1>Remarkable rulezz!</h1>
|
||
|
|
</code></pre>
|
||
|
|
<div id="demo1" class="row">
|
||
|
|
<div class="col-xs-6">
|
||
|
|
<textarea class="source"># h1 Heading
|
||
|
|
## h2 Heading
|
||
|
|
### h3 Heading
|
||
|
|
#### h4 Heading
|
||
|
|
##### h5 Heading
|
||
|
|
###### h6 Heading
|
||
|
|
|
||
|
|
Alt h1 Heading
|
||
|
|
==============
|
||
|
|
|
||
|
|
Alt h2 Heading
|
||
|
|
--------------
|
||
|
|
|
||
|
|
## Horizontal Rules
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
___
|
||
|
|
|
||
|
|
|
||
|
|
***
|
||
|
|
|
||
|
|
## Text
|
||
|
|
|
||
|
|
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||
|
|
|
||
|
|
## Emphasis
|
||
|
|
|
||
|
|
__bold text__
|
||
|
|
|
||
|
|
_italicized text_
|
||
|
|
|
||
|
|
~~strike through text~~
|
||
|
|
|
||
|
|
## Blockquotes
|
||
|
|
|
||
|
|
> Quoted text
|
||
|
|
>> Quotes can be nested
|
||
|
|
|
||
|
|
## Lists
|
||
|
|
|
||
|
|
Unordered:
|
||
|
|
|
||
|
|
* valid bullet
|
||
|
|
- valid bullet
|
||
|
|
+ valid bullet
|
||
|
|
- Phasellus iaculis neque
|
||
|
|
- Purus sodales ultricies
|
||
|
|
|
||
|
|
Ordered:
|
||
|
|
|
||
|
|
1. Lorem ipsum dolor sit amet
|
||
|
|
2. Consectetur adipiscing elit
|
||
|
|
3. Integer molestie lorem at massa
|
||
|
|
|
||
|
|
## Code
|
||
|
|
|
||
|
|
This is `example of inline code`.
|
||
|
|
|
||
|
|
Code block (with language name for highlighter)
|
||
|
|
|
||
|
|
``` javascript
|
||
|
|
var text = 'Remarkable is awesome!';
|
||
|
|
|
||
|
|
console.log(text);
|
||
|
|
```
|
||
|
|
|
||
|
|
## links
|
||
|
|
|
||
|
|
[Basic link](https://github.com/jonschlinkert/remarkable)
|
||
|
|
|
||
|
|
[Link with title](https://github.com/jonschlinkert/remarkable "Awesome markdown parser")
|
||
|
|
</textarea>
|
||
|
|
</div>
|
||
|
|
<section class="col-xs-6">
|
||
|
|
<div class="result"></div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<h3>Code highlight</h3>
|
||
|
|
<p><a data-toggle="collapse" href="#code-sample-demo2">Show code</a></p>
|
||
|
|
<pre id="code-sample-demo2" class="collapse"><code class="js"></code></pre>
|
||
|
|
<div id="demo2" class="row">
|
||
|
|
<div class="col-xs-6">
|
||
|
|
<textarea class="source"></textarea>
|
||
|
|
</div>
|
||
|
|
<section class="col-xs-6">
|
||
|
|
<div class="result"></div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<h2>Advanced examples</h2>
|
||
|
|
<h3>Typograph</h3>
|
||
|
|
<p><a data-toggle="collapse" href="#code-sample-demo3">Show code</a></p>
|
||
|
|
<pre id="code-sample-demo3" class="collapse"><code class="js"></code></pre>
|
||
|
|
<div id="demo3" class="row">
|
||
|
|
<div class="col-xs-6">
|
||
|
|
<textarea class="source"></textarea>
|
||
|
|
</div>
|
||
|
|
<section class="col-xs-6">
|
||
|
|
<div class="result"></div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<h3>Block macros</h3>
|
||
|
|
<p><a data-toggle="collapse" href="#code-sample-demo4">Show code</a></p>
|
||
|
|
<pre id="code-sample-demo4" class="collapse"><code class="js"></code></pre>
|
||
|
|
<div id="demo4" class="row">
|
||
|
|
<div class="col-xs-6">
|
||
|
|
<textarea class="source"></textarea>
|
||
|
|
</div>
|
||
|
|
<section class="col-xs-6">
|
||
|
|
<div class="result"></div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<h3>Custom tag (lexer plugin)</h3>
|
||
|
|
<p><a data-toggle="collapse" href="#code-sample-demo5">Show code</a></p>
|
||
|
|
<pre id="code-sample-demo5" class="collapse"><code class="js"></code></pre>
|
||
|
|
<div id="demo5" class="row">
|
||
|
|
<div class="col-xs-6">
|
||
|
|
<textarea class="source"></textarea>
|
||
|
|
</div>
|
||
|
|
<section class="col-xs-6">
|
||
|
|
<div class="result"></div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|