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

<!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!'));
// =&gt; &lt;h1&gt;Remarkable rulezz!&lt;/h1&gt;
</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
&gt; Quoted text
&gt;&gt; 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 &quot;Awesome markdown parser&quot;)
</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>