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: added options support

pull/14/head
Vitaly Puzrin 10 years ago
parent
0b4e1350f7
commit
4f773d09d2
6 changed files with 144 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      demo/.eslintrc
  2. 2
      demo/assets/index.css
  3. 87
      demo/assets/index.js
  4. 6
      demo/assets/index.styl
  5. 29
      demo/index.html
  6. 30
      demo/index.jade

1
demo/.eslintrc
View File

@ -4,3 +4,4 @@ env:
globals:
$: false
_: false

2
demo/assets/index.css
View File

@ -1 +1 @@
body{margin-bottom:20px;overflow:hidden}.source,.result,.result-src{width:100%;height:350px}.result{padding-right:20px;overflow:auto;}.result img{max-width:100%}.result-src{display:none}.result-src-content{white-space:pre}.result-as-text .result-src{display:block}.result-as-text .result{display:none}.demo-control{position:absolute;right:15px;top:0;padding:0 10px;border-radius:0 4px;font-size:12px;background-color:#666;color:#fff !important;opacity:.6;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}.demo-control:hover{opacity:1}.demo-control a{margin:0 20px;color:#fff !important}.hljs{background:none;padding:0}.gh-ribbon{display:block;position:absolute;right:-60px;top:44px;-webkit-transform:rotate(45deg);-ms-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{text-decoration:none !important;border:1px solid #ccc;color:#fff;display:block;font-size:13px;font-weight:700;outline:medium none;padding:4px 50px 2px;text-align:center}
body{margin-bottom:20px;overflow:hidden}.demo-options{margin-bottom:10px}.checkbox{margin-right:10px}.source,.result,.result-src{width:100%;height:350px}.result{padding-right:20px;overflow:auto;}.result img{max-width:100%}.result-src{display:none}.result-src-content{white-space:pre}.result-as-text .result-src{display:block}.result-as-text .result{display:none}.demo-control{position:absolute;right:15px;top:0;padding:0 10px;border-radius:0 4px;font-size:12px;background-color:#666;color:#fff !important;opacity:.6;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}.demo-control:hover{opacity:1}.demo-control a{margin:0 20px;color:#fff !important}.hljs{background:none;padding:0}.gh-ribbon{display:block;position:absolute;right:-60px;top:44px;-webkit-transform:rotate(45deg);-ms-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{text-decoration:none !important;border:1px solid #ccc;color:#fff;display:block;font-size:13px;font-weight:700;outline:medium none;padding:4px 50px 2px;text-align:center}

87
demo/assets/index.js
View File

@ -3,16 +3,20 @@
var mdHtml, mdSrc, permalink;
var options = {
var defaults = {
html: true,
xhtml: true,
breaks: false,
langprefix: 'language-'
langprefix: 'language-',
// options below are for demo only
_highlight: false,
_src: false
};
function mdInit() {
mdHtml = new window.Remarkable(options);
mdSrc = new window.Remarkable(options);
mdHtml = new window.Remarkable(defaults);
mdSrc = new window.Remarkable(defaults);
// Beautify output of parser for html content
mdHtml.renderer.rules.table_open = function () {
@ -26,11 +30,17 @@
$('.result-src-content').text(mdSrc.render(source));
try {
if (source) {
permalink.href = '#md=' + encodeURIComponent(source);
// serialize state - source and options
permalink.href = '#md=' + encodeURIComponent(JSON.stringify({
defaults: _.omit(defaults, 'highlight'),
source: source
}));
} else {
permalink.href = '';
}
} catch (__) {}
} catch (__) {
permalink.href = '';
}
}
@ -42,21 +52,82 @@
// Restore content if opened by permalink
if (location.hash && location.hash.toString().slice(0,4) === '#md=') {
$('.source').val(decodeURIComponent(location.hash.slice(4)));
try {
var cfg = JSON.parse(decodeURIComponent(location.hash.slice(4)));
if (_.isString(cfg.source)) {
$('.source').val(cfg.source);
}
var opts = _.isObject(cfg.defaults) ? cfg.defaults : {};
// copy config to defaults, but only if key exists
// and value has the same type
_.forOwn(opts, function (val, key) {
if (!defaults.hasOwnProperty(key)) { return; }
if ((_.isBoolean(defaults[key]) && _.isBoolean(val)) ||
(_.isString(defaults[key]) && _.isString(val))) {
defaults[key] = val;
}
});
} catch (__) {}
}
mdInit();
// Activate tooltips
$('._tip').tooltip({ container: 'body' });
// Set default option values and option listeners
_.forOwn(defaults, function (val, key) {
if (key === 'highlight') { return; }
var el = document.getElementById(key);
if (!el) { return; }
var $el = $(el);
if (_.isBoolean(val)) {
$el.prop('checked', val);
$el.on('change', function () {
defaults[key] = Boolean($el.prop('checked'));
mdInit();
updateResult();
});
} else {
$(el).val(val);
$el.on('change update keyup', function () {
defaults[key] = String($(el).val());
mdInit();
updateResult();
});
}
});
// Set display mode for result
if (defaults._src) {
$('body').addClass('result-as-text');
}
mdInit();
permalink = document.getElementById('permalink');
// Setup listeners
$('.source').on('keyup paste cut mouseup', updateResult);
$('.source-clear').on('click', function (event) {
$('.source').val('');
updateResult();
event.preventDefault();
});
$('.result-mode').on('click', function (event) {
defaults._src = !defaults._src;
$('body').toggleClass('result-as-text');
// only to update permalink
updateResult();
event.preventDefault();
});

6
demo/assets/index.styl
View File

@ -2,6 +2,12 @@ body
margin-bottom 20px
overflow hidden
.demo-options
margin-bottom 10px
.checkbox
margin-right 10px
.source, .result, .result-src
width 100%
height 350px

29
demo/index.html
View File

@ -1,7 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>Remarkable demo</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.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>
@ -12,7 +14,7 @@
</head>
<body>
<div class="container">
<h1>remarkable demo</h1>
<h1>Remarkable demo</h1>
<p><a data-toggle="collapse" href="#code-sample">Show code sample</a></p>
<pre id="code-sample" class="collapse code-sample"><code class="js">var Remarkable = require('remarkable');
@ -26,6 +28,31 @@ var md = new Remarkable({
console.log(md.parse('# Remarkable rulezz!'));
// =&gt; &lt;h1&gt;Remarkable rulezz!&lt;/h1&gt;
</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="add / to single tags (&lt;br /&gt; instead of &lt;br&gt;" class="_tip">
<input id="xhtml" type="checkbox"> xhtml
</label>
</div>
<div class="checkbox">
<label title="newlines in paragraphs are rendered as &lt;br&gt;" class="_tip">
<input id="breaks" type="checkbox"> breaks
</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 class="row">
<div class="col-xs-6">
<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>

30
demo/index.jade
View File

@ -1,8 +1,12 @@
doctype html
html
head
title Remarkable demo
script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')
script(src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
script(src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js')
link(rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css')
@ -17,12 +21,36 @@ html
body
.container
- var s = self.self.demo;
h1 remarkable demo
h1 Remarkable demo
p: a(data-toggle='collapse' href='#code-sample') Show code sample
pre.collapse.code-sample(id='code-sample')
code.js= s.code
.form-inline.demo-options
.checkbox
label._tip(title='enable html tags in source text')
input#html(type='checkbox')
| html
.checkbox
label._tip(title='add / to single tags (<br /> instead of <br>')
input#xhtml(type='checkbox')
| xhtml
.checkbox
label._tip(title='newlines in paragraphs are rendered as <br>')
input#breaks(type='checkbox')
| breaks
.checkbox
label._tip(title='enable output highlight for fenced blocks')
input#_highlight(type='checkbox')
| highlight
.form-group
input#langprefix.form-control._tip(
type='input'
placeholder='language prefix'
title='css class language prefix for fenced code blocks'
)
.row
.col-xs-6
.demo-control

Write Preview
Loading…
Cancel
Save