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

Updated demo files

pull/14/head
Vitaly Puzrin 10 years ago
parent
bad3649d0f
commit
3ec7c4a01a
6 changed files with 116 additions and 79 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. 64
      demo/assets/index.css
  2. 30
      demo/assets/index.js
  3. 9
      demo/data.yml
  4. 66
      demo/index.html
  5. 19
      demo/index.jade
  6. 3
      package.json

64
demo/assets/index.css
View File

@ -1,14 +1,74 @@
.source, .result { body {
margin-bottom: 20px;
overflow: hidden;
}
.source, .result, .result-text {
width: 100%; width: 100%;
height: 350px; height: 350px;
} }
.result { .result {
border: 1px solid #ccc; padding-right: 20px;
overflow: auto; overflow: auto;
} }
.result-text {
display: none;
}
.result-text-data {
white-space: pre;
}
.result-as-text .result-text {
display: block;
}
.result-as-text .result {
display: none;
}
.mode {
position: absolute;
right: 15px;
top: 0;
padding: 0 10px;
font-weight: bold;
font-size: 12px;
background-color: #666;
color: #fff !important;
}
.hljs { .hljs {
background: none; background: none;
padding: 0 padding: 0
} }
.gh-ribbon {
display: block;
position: absolute;
right: -60px;
top: 44px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
width: 230px;
z-index: 10000;
white-space: nowrap
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #686868;
box-shadow: 0 0 2px rgba(102, 102, 102, 0.4);
padding: 1px 0;
}
.gh-ribbon a, .gh-ribbon a:hover {
text-decoration: none;
}
.gh-ribbon a {
border: 1px solid #ccc;
color: #fff;
display: block;
font-size: 13px;
font-weight: 700;
outline: medium none;
padding: 4px 50px 2px;
text-align: center;
}

30
demo/assets/index.js
View File

@ -1,8 +1,32 @@
hljs.initHighlightingOnLoad();
$(function() { $(function() {
// highlight snippets // highlight snippets
$('pre code').each(function(i, block) { $('pre.code-sample code').each(function(i, block) {
hljs.highlightBlock(block); hljs.highlightBlock(block);
}); });
}); });
var md = new window.Remarkable({
html: true,
xhtml: true,
breaks: false,
langprefix: 'language-'
});
md.renderer.rules.table_open = function () {
return '<table class="table table-striped">\n';
}
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);
$('#demo1 .mode').on('click', function (event) {
$('#demo1').toggleClass('result-as-text');
event.preventDefault();
});
updateResult();

9
demo/data.yml
View File

@ -8,13 +8,10 @@ self:
var Remarkable = require('remarkable'); var Remarkable = require('remarkable');
var md = new Remarkable({ var md = new Remarkable({
gfm: true, html: true,
tables: true, xhtml: true,
breaks: false, breaks: false,
pedantic: false, langprefix: 'language-'
sanitize: true,
smartLists: true,
smartypants: false
}); });
console.log(md.parse('# Remarkable rulezz!')); console.log(md.parse('# Remarkable rulezz!'));

66
demo/index.html
View File

@ -8,26 +8,18 @@
<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>
<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> <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'); <pre id="code-sample-demo1" class="collapse code-sample"><code class="js">var Remarkable = require('remarkable');
var md = new Remarkable({ var md = new Remarkable({
gfm: true, html: true,
tables: true, xhtml: true,
breaks: false, breaks: false,
pedantic: false, langprefix: 'language-'
sanitize: true,
smartLists: true,
smartypants: false
}); });
console.log(md.parse('# Remarkable rulezz!')); console.log(md.parse('# Remarkable rulezz!'));
@ -109,55 +101,13 @@ 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"> <section class="col-xs-6"><a href="#" class="mode">html / source</a>
<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> <div class="result"></div>
<pre class="result-text"><code class="result-text-data"></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>
<script src="./assets/index.js"></script>
</body> </body>
</html> </html>

19
demo/index.jade
View File

@ -1,18 +1,21 @@
mixin sample(name) mixin sample(name)
- var s = self.self[name]; - var s = self.self[name];
h3= s.title //-h3= s.title
if s.description //-if s.description
p= s.description //- p= s.description
p: a(data-toggle='collapse' href='#code-sample-' + name) Show code p: a(data-toggle='collapse' href='#code-sample-' + name) Show code
pre.collapse(id='code-sample-' + name) pre.collapse.code-sample(id='code-sample-' + name)
code.js= s.code code.js= s.code
.row(id=name) .row(id=name)
.col-xs-6 .col-xs-6
textarea.source= s.source textarea.source= s.source
section.col-xs-6 section.col-xs-6
a.mode(href='#') html / source
.result .result
pre.result-text
code.result-text-data
doctype html doctype html
html html
@ -28,15 +31,15 @@ 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
h1 remarkable demo h1 remarkable demo
h2 Basic examples //-h2 Basic examples
+sample('demo1') +sample('demo1')
//-
+sample('demo2') +sample('demo2')
h2 Advanced examples h2 Advanced examples
@ -45,5 +48,7 @@ html
+sample('demo4') +sample('demo4')
+sample('demo5') +sample('demo5')
.gh-ribbon
a(href='https://github.com/jonschlinkert/remarkable') Fork me on GitHub
script(src='./assets/index.js')

3
package.json
View File

@ -27,7 +27,8 @@
"eslint": "0.8.0", "eslint": "0.8.0",
"eslint-plugin-nodeca": "^1.0.0", "eslint-plugin-nodeca": "^1.0.0",
"jade": "1.6.0", "jade": "1.6.0",
"js-yaml": "3.2.2",
"mocha": "*", "mocha": "*",
"uglifyjs": "*" "uglify-js": "*"
} }
} }

Write Preview
Loading…
Cancel
Save