Vitaly Puzrin
6 months 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