Public-Mirrors
/
markdown-it
mirror of https://github.com/markdown-it/markdown-it.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Demo cleanup

pull/14/head
Vitaly Puzrin 10 years ago
parent
07cab424e7
commit
ff4c7b7262
7 changed files with 79 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .eslintignore
  2. 6
      demo/.eslintrc
  3. 11
      demo/assets/index.css
  4. 71
      demo/assets/index.js
  5. 18
      demo/data.yml
  6. 14
      demo/index.html
  7. 45
      demo/index.jade

1
.eslintignore
View File

@ -1,4 +1,3 @@
benchmark/implementations/ benchmark/implementations/
demo/
dist/ dist/
node_modules/ node_modules/

6
demo/.eslintrc
View File

@ -0,0 +1,6 @@
env:
node: false
browser: true
globals:
$: false

11
demo/assets/index.css
View File

@ -3,7 +3,7 @@ body {
overflow: hidden; overflow: hidden;
} }
.source, .result, .result-text { .source, .result, .result-src {
width: 100%; width: 100%;
height: 350px; height: 350px;
} }
@ -13,25 +13,26 @@ body {
overflow: auto; overflow: auto;
} }
.result-text { .result-src {
display: none; display: none;
} }
.result-text-data { .result-src-content {
white-space: pre; white-space: pre;
} }
.result-as-text .result-text { .result-as-text .result-src {
display: block; display: block;
} }
.result-as-text .result { .result-as-text .result {
display: none; display: none;
} }
.mode { .result-mode, .source-clear {
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 0; top: 0;
padding: 0 10px; padding: 0 10px;
border-radius: 0 4px;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
background-color: #666; background-color: #666;

71
demo/assets/index.js
View File

@ -1,32 +1,51 @@
$(function() { (function () {
// highlight snippets 'use strict';
$('pre.code-sample code').each(function(i, block) {
hljs.highlightBlock(block); var mdHtml, mdSrc;
});
}); var options = {
html: true,
xhtml: true,
breaks: false,
langprefix: 'language-'
};
var md = new window.Remarkable({ function mdInit() {
html: true, mdHtml = new window.Remarkable(options);
xhtml: true, mdSrc = new window.Remarkable(options);
breaks: false,
langprefix: 'language-'
});
md.renderer.rules.table_open = function () { // Beautify output of parser for html content
return '<table class="table table-striped">\n'; mdHtml.renderer.rules.table_open = function () {
} return '<table class="table table-striped">\n';
};
}
function updateResult() {
var source = $('.source').val();
$('.result').html(mdHtml.render(source));
$('.result-src-content').text(mdSrc.render(source));
}
function updateResult() {
var result = md.render($('#demo1 .source').val());
$('#demo1 .result').html(result);
$('#demo1 .result-text-data').text(result);
}
$('#demo1 .source').on('keyup paste cut mouseup', updateResult); $(function() {
$('#demo1 .mode').on('click', function (event) { // highlight snippet
$('#demo1').toggleClass('result-as-text'); $('pre.code-sample code').each(function(i, block) {
event.preventDefault(); window.hljs.highlightBlock(block);
}); });
updateResult(); mdInit();
$('.source').on('keyup paste cut mouseup', updateResult);
$('.source-clear').on('click', function (event) {
$('.source').val('');
updateResult();
event.preventDefault();
});
$('.result-mode').on('click', function (event) {
$('body').toggleClass('result-as-text');
event.preventDefault();
});
updateResult();
});
})();

18
demo/data.yml
View File

@ -1,9 +1,6 @@
self: self:
demo1: demo:
title: Simple markdown
description: |
That's a sample of typical `remarkable` use. You can play with content
code: | code: |
var Remarkable = require('remarkable'); var Remarkable = require('remarkable');
@ -89,16 +86,3 @@ self:
[Basic link](https://github.com/jonschlinkert/remarkable) [Basic link](https://github.com/jonschlinkert/remarkable)
[Link with title](https://github.com/jonschlinkert/remarkable "Awesome markdown parser") [Link with title](https://github.com/jonschlinkert/remarkable "Awesome markdown parser")
demo2:
title: Code highlight
# Advanced demos
demo3:
title: Typograph
demo4:
title: Block macros
demo5:
title: Custom tag (lexer plugin)

14
demo/index.html
View File

@ -8,12 +8,13 @@
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
<script src="../dist/remarkable.js"></script> <script src="../dist/remarkable.js"></script>
<link rel="stylesheet" href="./assets/index.css"> <link rel="stylesheet" href="./assets/index.css">
<script src="./assets/index.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>remarkable demo</h1> <h1>remarkable demo</h1>
<p><a data-toggle="collapse" href="#code-sample-demo1">Show code</a></p> <p><a data-toggle="collapse" href="#code-sample">Show code sample</a></p>
<pre id="code-sample-demo1" class="collapse code-sample"><code class="js">var Remarkable = require('remarkable'); <pre id="code-sample" class="collapse code-sample"><code class="js">var Remarkable = require('remarkable');
var md = new Remarkable({ var md = new Remarkable({
html: true, html: true,
@ -25,8 +26,8 @@ var md = new Remarkable({
console.log(md.parse('# Remarkable rulezz!')); console.log(md.parse('# Remarkable rulezz!'));
// =&gt; &lt;h1&gt;Remarkable rulezz!&lt;/h1&gt; // =&gt; &lt;h1&gt;Remarkable rulezz!&lt;/h1&gt;
</code></pre> </code></pre>
<div id="demo1" class="row"> <div class="row">
<div class="col-xs-6"> <div class="col-xs-6"><a href="#" class="source-clear">clear</a>
<textarea class="source"># h1 Heading <textarea class="source"># h1 Heading
## h2 Heading ## h2 Heading
### h3 Heading ### h3 Heading
@ -101,13 +102,12 @@ console.log(text);
[Link with title](https://github.com/jonschlinkert/remarkable &quot;Awesome markdown parser&quot;) [Link with title](https://github.com/jonschlinkert/remarkable &quot;Awesome markdown parser&quot;)
</textarea> </textarea>
</div> </div>
<section class="col-xs-6"><a href="#" class="mode">html / source</a> <section class="col-xs-6"><a href="#" class="result-mode">html / source</a>
<div class="result"></div> <div class="result"></div>
<pre class="result-text"><code class="result-text-data"></code></pre> <pre class="result-src"><code class="result-src-content"></code></pre>
</section> </section>
</div> </div>
</div> </div>
<div class="gh-ribbon"><a href="https://github.com/jonschlinkert/remarkable">Fork me on GitHub</a></div> <div class="gh-ribbon"><a href="https://github.com/jonschlinkert/remarkable">Fork me on GitHub</a></div>
<script src="./assets/index.js"></script>
</body> </body>
</html> </html>

45
demo/index.jade
View File

@ -1,22 +1,3 @@
mixin sample(name)
- var s = self.self[name];
//-h3= s.title
//-if s.description
//- p= s.description
p: a(data-toggle='collapse' href='#code-sample-' + name) Show code
pre.collapse.code-sample(id='code-sample-' + name)
code.js= s.code
.row(id=name)
.col-xs-6
textarea.source= s.source
section.col-xs-6
a.mode(href='#') html / source
.result
pre.result-text
code.result-text-data
doctype html doctype html
html html
head head
@ -31,24 +12,26 @@ html
script(src='../dist/remarkable.js') script(src='../dist/remarkable.js')
link(rel='stylesheet' href='./assets/index.css') link(rel='stylesheet' href='./assets/index.css')
script(src='./assets/index.js')
body body
.container .container
- var s = self.self.demo;
h1 remarkable demo h1 remarkable demo
//-h2 Basic examples p: a(data-toggle='collapse' href='#code-sample') Show code sample
pre.collapse.code-sample(id='code-sample')
+sample('demo1') code.js= s.code
//-
+sample('demo2')
h2 Advanced examples .row
.col-xs-6
+sample('demo3') a.source-clear(href='#') clear
+sample('demo4') textarea.source= s.source
+sample('demo5') section.col-xs-6
a.result-mode(href='#') html / source
.result
pre.result-src
code.result-src-content
.gh-ribbon .gh-ribbon
a(href='https://github.com/jonschlinkert/remarkable') Fork me on GitHub a(href='https://github.com/jonschlinkert/remarkable') Fork me on GitHub
script(src='./assets/index.js')

Write Preview
Loading…
Cancel
Save