Vitaly Puzrin
2 years ago
11 changed files with 288 additions and 300 deletions
@ -1,26 +0,0 @@ |
|||||
#!/usr/bin/env node
|
|
||||
|
|
||||
'use strict'; |
|
||||
|
|
||||
/* eslint-env es6 */ |
|
||||
|
|
||||
const shell = require('shelljs'); |
|
||||
|
|
||||
shell.rm('-rf', 'demo'); |
|
||||
shell.mkdir('demo'); |
|
||||
|
|
||||
shell.exec('support/demodata.js > support/demo_template/sample.json'); |
|
||||
|
|
||||
shell.exec('node_modules/.bin/pug support/demo_template/index.pug --pretty \ |
|
||||
--obj support/demo_template/sample.json \ |
|
||||
--out demo'); |
|
||||
|
|
||||
shell.exec('node_modules/.bin/stylus -u autoprefixer-stylus \ |
|
||||
< support/demo_template/index.styl \ |
|
||||
> demo/index.css'); |
|
||||
|
|
||||
shell.rm('-rf', 'support/demo_template/sample.json'); |
|
||||
|
|
||||
shell.exec('node_modules/.bin/rollup -c support/demo_template/rollup.config.js'); |
|
||||
|
|
||||
shell.cp('support/demo_template/README.md', 'demo/'); |
|
||||
@ -0,0 +1,28 @@ |
|||||
|
#!/usr/bin/env node
|
||||
|
|
||||
|
import shell from 'shelljs'; |
||||
|
import { readFileSync, writeFileSync } from 'fs'; |
||||
|
|
||||
|
function escape(input) { |
||||
|
return input |
||||
|
.replaceAll('&', '&') |
||||
|
.replaceAll('<', '<') |
||||
|
.replaceAll('>', '>') |
||||
|
.replaceAll('"', '"'); |
||||
|
//.replaceAll("'", ''');
|
||||
|
} |
||||
|
|
||||
|
shell.rm('-rf', 'demo'); |
||||
|
shell.mkdir('demo'); |
||||
|
|
||||
|
shell.cp('support/demo_template/README.md', 'demo/'); |
||||
|
shell.cp('support/demo_template/index.css', 'demo/'); |
||||
|
|
||||
|
// Read html template and inject escaped sample
|
||||
|
const html = readFileSync('support/demo_template/index.html', 'utf8'); |
||||
|
const sample = readFileSync('support/demo_template/sample.md', 'utf8'); |
||||
|
|
||||
|
const output = html.replace('<!--SAMPLE-->', escape(sample)); |
||||
|
writeFileSync('demo/index.html', output); |
||||
|
|
||||
|
shell.exec('node_modules/.bin/rollup -c support/demo_template/rollup.config.mjs'); |
||||
@ -0,0 +1,155 @@ |
|||||
|
html, |
||||
|
body, |
||||
|
.full-height { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
overflow-x: hidden; |
||||
|
padding-bottom: 160px; |
||||
|
background-color: #fbfbfb; |
||||
|
} |
||||
|
|
||||
|
/* hack to allign emojies to line height */ |
||||
|
.emoji { |
||||
|
height: 1.2em; |
||||
|
} |
||||
|
|
||||
|
.demo-options { |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
|
||||
|
.opt__strict .not-strict { |
||||
|
opacity: 0.3; |
||||
|
} |
||||
|
|
||||
|
.checkbox { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.source { |
||||
|
width: 100%; |
||||
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace; |
||||
|
font-size: 13px; |
||||
|
padding: 2px; |
||||
|
} |
||||
|
|
||||
|
.result-html { |
||||
|
padding: 2px 10px; |
||||
|
overflow: auto; |
||||
|
background-color: #fff; |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.result-html img { |
||||
|
max-width: 35%; |
||||
|
} |
||||
|
|
||||
|
.result-src, |
||||
|
.result-debug { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.result-src-content, |
||||
|
.result-debug-content { |
||||
|
white-space: pre; |
||||
|
} |
||||
|
|
||||
|
.result-as-html .result-html { display: block; } |
||||
|
.result-as-html .result-src, |
||||
|
.result-as-html .result-debug { display: none; } |
||||
|
|
||||
|
.result-as-src .result-src { display: block; } |
||||
|
.result-as-src .result-html, |
||||
|
.result-as-src .result-debug { display: none; } |
||||
|
|
||||
|
.result-as-debug .result-debug { display: block; } |
||||
|
.result-as-debug .result-html, |
||||
|
.result-as-debug .result-src { display: none; } |
||||
|
|
||||
|
.demo-control { |
||||
|
position: absolute; |
||||
|
right: 15px; |
||||
|
top: -17px; |
||||
|
border-radius: 6px 6px 0 0; |
||||
|
font-size: 12px; |
||||
|
background-color: #ddd; |
||||
|
} |
||||
|
.demo-control a { |
||||
|
padding: 0 20px; |
||||
|
} |
||||
|
.demo-control a:first-child { |
||||
|
padding-left: 30px; |
||||
|
} |
||||
|
.demo-control a:last-child { |
||||
|
padding-right: 30px; |
||||
|
} |
||||
|
|
||||
|
/* twbs fix */ |
||||
|
.hljs { |
||||
|
padding: 9.5px; |
||||
|
} |
||||
|
.hljs code { |
||||
|
white-space: pre; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.footnotes { |
||||
|
-moz-column-count: 2; |
||||
|
column-count: 2; |
||||
|
} |
||||
|
.footnotes-list { |
||||
|
padding-left: 2em; |
||||
|
} |
||||
|
|
||||
|
/* custom container */ |
||||
|
.warning { |
||||
|
background-color: #ff8; |
||||
|
padding: 20px; |
||||
|
border-radius: 6px; |
||||
|
} |
||||
|
|
||||
|
.gh-ribbon { |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
right: -60px; |
||||
|
top: 44px; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
/* Override default responsiveness */ |
||||
|
.form-inline .radio, |
||||
|
.form-inline .checkbox { |
||||
|
display: inline-block; |
||||
|
margin-bottom: 0; |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.form-inline .form-group { |
||||
|
display: inline-block; |
||||
|
margin-bottom: 0; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.form-inline .form-control { |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,97 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<title>markdown-it demo</title> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script> |
||||
|
<script src="https://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script> |
||||
|
<script src="https://cdn.jsdelivr.net/lodash/2.4.1/lodash.js"></script> |
||||
|
<script src="https://cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.css"> |
||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/9.1.0/styles/github.min.css"> |
||||
|
<script src="markdown-it.js"></script> |
||||
|
<script src="https://twemoji.maxcdn.com/twemoji.min.js"></script> |
||||
|
<link rel="stylesheet" href="index.css"> |
||||
|
<script src="index.js"></script> |
||||
|
<!-- Ancient IE support - load shiv & kill broken highlighter--><!--[if lt IE 9]> |
||||
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
||||
|
<script>window.hljs = null;</script> |
||||
|
<![endif]--> |
||||
|
<!-- GA counter--> |
||||
|
<script> |
||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
||||
|
|
||||
|
ga('create', 'UA-26895916-4', 'auto'); |
||||
|
ga('require', 'displayfeatures'); |
||||
|
ga('require', 'linkid', 'linkid.js'); |
||||
|
ga('send', 'pageview'); |
||||
|
|
||||
|
</script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<h1> |
||||
|
markdown-it <small>demo</small></h1> |
||||
|
<div class="form-inline demo-options"> |
||||
|
<div class="checkbox not-strict"> |
||||
|
<label class="_tip" title="enable html tags in source text"> |
||||
|
<input id="html" type="checkbox"> html |
||||
|
</label> |
||||
|
</div> |
||||
|
<div class="checkbox not-strict"> |
||||
|
<label class="_tip" title="produce xtml output (add / to single tags (<br /> instead of <br>)"> |
||||
|
<input id="xhtmlOut" type="checkbox"> xhtmlOut |
||||
|
</label> |
||||
|
</div> |
||||
|
<div class="checkbox not-strict"> |
||||
|
<label class="_tip" title="newlines in paragraphs are rendered as <br>"> |
||||
|
<input id="breaks" type="checkbox"> breaks |
||||
|
</label> |
||||
|
</div> |
||||
|
<div class="checkbox not-strict"> |
||||
|
<label class="_tip" title="autoconvert link-like texts to links"> |
||||
|
<input id="linkify" type="checkbox"> linkify |
||||
|
</label> |
||||
|
</div> |
||||
|
<div class="checkbox not-strict"> |
||||
|
<label class="_tip" title="do typographic replacements, (c) → © and so on"> |
||||
|
<input id="typographer" type="checkbox"> typographer |
||||
|
</label> |
||||
|
</div> |
||||
|
<div class="checkbox not-strict"> |
||||
|
<label class="_tip" title="enable output highlight for fenced blocks"> |
||||
|
<input id="_highlight" type="checkbox"> highlight |
||||
|
</label> |
||||
|
</div> |
||||
|
<div class="form-group not-strict"> |
||||
|
<input class="form-control _tip" id="langPrefix" type="input" placeholder="language prefix" title="css class language prefix for fenced code blocks"> |
||||
|
</div> |
||||
|
<div class="checkbox"> |
||||
|
<label class="_tip" title="force strict CommonMark mode - output will be equal to reference parser"> |
||||
|
<input id="_strict" type="checkbox"> CommonMark strict |
||||
|
</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="container full-height"> |
||||
|
<div class="row full-height"> |
||||
|
<div class="col-xs-6 full-height"> |
||||
|
<div class="demo-control"><a class="source-clear" href="#">clear</a><a id="permalink" href="./" title="Share this snippet as link"><strong>permalink</strong></a></div> |
||||
|
<textarea class="source full-height"><!--SAMPLE--></textarea> |
||||
|
</div> |
||||
|
<section class="col-xs-6 full-height"> |
||||
|
<div class="demo-control"><a href="#" data-result-as="html">html</a><a href="#" data-result-as="src">source</a><a href="#" data-result-as="debug">debug</a></div> |
||||
|
<div class="result-html full-height"></div> |
||||
|
<pre class="hljs result-src full-height"><code class="result-src-content full-height"></code></pre> |
||||
|
<pre class="hljs result-debug full-height"><code class="result-debug-content full-height"></code></pre> |
||||
|
</section> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="gh-ribbon"><a href="https://github.com/markdown-it/markdown-it" target="_blank">Fork me on GitHub</a></div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -1,105 +0,0 @@ |
|||||
doctype html |
|
||||
html |
|
||||
head |
|
||||
title markdown-it demo |
|
||||
meta(charset='UTF-8') |
|
||||
meta(http-equiv='X-UA-Compatible' content='IE=edge') |
|
||||
meta(name='viewport' content='width=device-width, initial-scale=1') |
|
||||
|
|
||||
script(src='https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js') |
|
||||
|
|
||||
script(src='https://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js') |
|
||||
script(src='https://cdn.jsdelivr.net/lodash/2.4.1/lodash.js') |
|
||||
|
|
||||
script(src='https://cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js') |
|
||||
link(rel='stylesheet' href='https://cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.css') |
|
||||
|
|
||||
link(rel='stylesheet' href='https://cdn.jsdelivr.net/highlight.js/9.1.0/styles/github.min.css') |
|
||||
|
|
||||
script(src='markdown-it.js') |
|
||||
script(src='https://twemoji.maxcdn.com/twemoji.min.js') |
|
||||
|
|
||||
link(rel='stylesheet' href='index.css') |
|
||||
script(src='index.js') |
|
||||
|
|
||||
// Ancient IE support - load shiv & kill broken highlighter |
|
||||
<!--[if lt IE 9]> |
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
|
||||
<script>window.hljs = null;</script> |
|
||||
<![endif]--> |
|
||||
|
|
||||
// GA counter |
|
||||
script. |
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
|
||||
|
|
||||
ga('create', 'UA-26895916-4', 'auto'); |
|
||||
ga('require', 'displayfeatures'); |
|
||||
ga('require', 'linkid', 'linkid.js'); |
|
||||
ga('send', 'pageview'); |
|
||||
|
|
||||
body |
|
||||
.container |
|
||||
- var s = self.self.demo; |
|
||||
h1 markdown-it |
|
||||
| |
|
||||
small demo |
|
||||
|
|
||||
.form-inline.demo-options |
|
||||
.checkbox.not-strict |
|
||||
label._tip(title='enable html tags in source text') |
|
||||
input#html(type='checkbox') |
|
||||
| html |
|
||||
.checkbox.not-strict |
|
||||
label._tip(title='produce xtml output (add / to single tags (<br /> instead of <br>)') |
|
||||
input#xhtmlOut(type='checkbox') |
|
||||
| xhtmlOut |
|
||||
.checkbox.not-strict |
|
||||
label._tip(title='newlines in paragraphs are rendered as <br>') |
|
||||
input#breaks(type='checkbox') |
|
||||
| breaks |
|
||||
.checkbox.not-strict |
|
||||
label._tip(title='autoconvert link-like texts to links') |
|
||||
input#linkify(type='checkbox') |
|
||||
| linkify |
|
||||
.checkbox.not-strict |
|
||||
label._tip(title='do typographic replacements, (c) → © and so on') |
|
||||
input#typographer(type='checkbox') |
|
||||
| typographer |
|
||||
.checkbox.not-strict |
|
||||
label._tip(title='enable output highlight for fenced blocks') |
|
||||
input#_highlight(type='checkbox') |
|
||||
| highlight |
|
||||
.form-group.not-strict |
|
||||
input#langPrefix.form-control._tip( |
|
||||
type='input' |
|
||||
placeholder='language prefix' |
|
||||
title='css class language prefix for fenced code blocks' |
|
||||
) |
|
||||
.checkbox |
|
||||
label._tip(title='force strict CommonMark mode - output will be equal to reference parser') |
|
||||
input#_strict(type='checkbox') |
|
||||
| CommonMark strict |
|
||||
|
|
||||
.container.full-height |
|
||||
.row.full-height |
|
||||
.col-xs-6.full-height |
|
||||
.demo-control |
|
||||
a.source-clear(href='#') clear |
|
||||
a#permalink(href='./' title='Share this snippet as link'): strong permalink |
|
||||
textarea.source.full-height= s.source |
|
||||
section.col-xs-6.full-height |
|
||||
.demo-control |
|
||||
a(href='#' data-result-as='html') html |
|
||||
a(href='#' data-result-as='src') source |
|
||||
a(href='#' data-result-as='debug') debug |
|
||||
.result-html.full-height |
|
||||
pre.hljs.result-src.full-height |
|
||||
code.result-src-content.full-height |
|
||||
pre.hljs.result-debug.full-height |
|
||||
code.result-debug-content.full-height |
|
||||
|
|
||||
.gh-ribbon |
|
||||
a(href='https://github.com/markdown-it/markdown-it' target='_blank') Fork me on GitHub |
|
||||
@ -1,143 +0,0 @@ |
|||||
html, body, .full-height |
|
||||
height 100% |
|
||||
|
|
||||
|
|
||||
body |
|
||||
overflow-x hidden |
|
||||
padding-bottom 160px |
|
||||
background-color #fbfbfb |
|
||||
|
|
||||
// hack to allign emojies to line height |
|
||||
.emoji |
|
||||
height: 1.2em; |
|
||||
|
|
||||
.demo-options |
|
||||
margin-bottom 30px |
|
||||
|
|
||||
.opt__strict .not-strict |
|
||||
opacity 0.3 |
|
||||
|
|
||||
.checkbox |
|
||||
margin-right 10px |
|
||||
|
|
||||
.source |
|
||||
width 100% |
|
||||
font-family Menlo, Monaco, Consolas, "Courier New", monospace |
|
||||
font-size 13px |
|
||||
padding 2px |
|
||||
|
|
||||
.result-html |
|
||||
padding 2px 10px |
|
||||
overflow auto |
|
||||
background-color #fff |
|
||||
border 1px solid #ccc |
|
||||
border-radius 4px |
|
||||
img |
|
||||
max-width 35% |
|
||||
|
|
||||
.result-src |
|
||||
.result-debug |
|
||||
display none |
|
||||
|
|
||||
.result-src-content |
|
||||
.result-debug-content |
|
||||
white-space pre |
|
||||
|
|
||||
.result-as-html |
|
||||
.result-html |
|
||||
display block |
|
||||
.result-src |
|
||||
.result-debug |
|
||||
display none |
|
||||
.result-as-src |
|
||||
.result-src |
|
||||
display block |
|
||||
.result-html |
|
||||
.result-debug |
|
||||
display none |
|
||||
.result-as-debug |
|
||||
.result-debug |
|
||||
display block |
|
||||
.result-html |
|
||||
.result-src |
|
||||
display none |
|
||||
|
|
||||
.demo-control |
|
||||
position absolute |
|
||||
right 15px |
|
||||
top -17px |
|
||||
border-radius 6px 6px 0 0 |
|
||||
font-size 12px |
|
||||
background-color #ddd |
|
||||
a |
|
||||
padding 0 20px |
|
||||
a:first-child |
|
||||
padding-left 30px |
|
||||
a:last-child |
|
||||
padding-right 30px |
|
||||
|
|
||||
// twbs fix |
|
||||
.hljs |
|
||||
padding 9.5px |
|
||||
code |
|
||||
white-space pre |
|
||||
|
|
||||
|
|
||||
.footnotes |
|
||||
-moz-column-count 2 |
|
||||
-webkit-column-count 2 |
|
||||
column-count 2 |
|
||||
|
|
||||
.footnotes-list |
|
||||
padding-left 2em |
|
||||
|
|
||||
// custom container |
|
||||
.warning |
|
||||
background-color #ff8 |
|
||||
padding 20px |
|
||||
border-radius 6px |
|
||||
|
|
||||
.gh-ribbon |
|
||||
display block |
|
||||
position absolute |
|
||||
right -60px |
|
||||
top 44px |
|
||||
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 |
|
||||
|
|
||||
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 |
|
||||
|
|
||||
//////////////////////////////////////////////////////////////////////////////// |
|
||||
// Override default responsiveness |
|
||||
// |
|
||||
.form-inline |
|
||||
.radio |
|
||||
.checkbox |
|
||||
display inline-block |
|
||||
margin-bottom 0 |
|
||||
margin-top 0 |
|
||||
|
|
||||
.form-group |
|
||||
display inline-block |
|
||||
margin-bottom 0 |
|
||||
vertical-align: middle |
|
||||
|
|
||||
.form-control |
|
||||
display inline-block |
|
||||
vertical-align middle |
|
||||
width auto |
|
||||
@ -1,17 +0,0 @@ |
|||||
#!/usr/bin/env node
|
|
||||
|
|
||||
// Build demo data for embedding into html
|
|
||||
|
|
||||
/*eslint-disable no-console*/ |
|
||||
'use strict'; |
|
||||
|
|
||||
var fs = require('fs'); |
|
||||
var path = require('path'); |
|
||||
|
|
||||
console.log(JSON.stringify({ |
|
||||
self: { |
|
||||
demo: { |
|
||||
source: fs.readFileSync(path.join(__dirname, './demo_template/sample.md'), 'utf8') |
|
||||
} |
|
||||
} |
|
||||
}, null, 2)); |
|
||||
Loading…
Reference in new issue