Vitaly Puzrin
10 years ago
12 changed files with 32 additions and 575 deletions
@ -1,5 +1,5 @@ |
|||
coverage/ |
|||
demo/sample.js |
|||
demo-web/ |
|||
demo/ |
|||
dist/ |
|||
node_modules |
|||
support/demo_template/sample.js |
|||
|
|||
@ -1,3 +1,4 @@ |
|||
node_modules/ |
|||
coverage/ |
|||
demo/ |
|||
*.log |
|||
|
|||
@ -1,145 +0,0 @@ |
|||
html, |
|||
body, |
|||
.full-height { |
|||
height: 100%; |
|||
} |
|||
body { |
|||
overflow-x: hidden; |
|||
padding-bottom: 180px; |
|||
background-color: #fbfbfb; |
|||
} |
|||
.demo-options { |
|||
margin-bottom: 10px; |
|||
} |
|||
.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; |
|||
background-color: #fff; |
|||
} |
|||
.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: 40px; |
|||
top: 0; |
|||
border-radius: 0 0 6px 6px; |
|||
font-size: 12px; |
|||
background-color: #666; |
|||
color: #fff !important; |
|||
opacity: 0.6; |
|||
-webkit-transition: opacity 0.5s ease-in-out; |
|||
transition: opacity 0.5s ease-in-out; |
|||
} |
|||
.demo-control:hover { |
|||
opacity: 1; |
|||
} |
|||
.demo-control a { |
|||
padding: 0 20px; |
|||
color: #fff !important; |
|||
} |
|||
.demo-control a:first-child { |
|||
padding-left: 30px; |
|||
} |
|||
.demo-control a:last-child { |
|||
padding-right: 30px; |
|||
} |
|||
.hljs { |
|||
background: none; |
|||
padding: 0; |
|||
} |
|||
.footnotes { |
|||
-moz-column-count: 2; |
|||
-webkit-column-count: 2; |
|||
column-count: 2; |
|||
} |
|||
.footnotes-list { |
|||
padding-left: 2em; |
|||
} |
|||
.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; |
|||
} |
|||
.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; |
|||
} |
|||
@ -1,356 +0,0 @@ |
|||
<!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"> |
|||
<script src="https://cdn.jsdelivr.net/highlight.js/8.4.0/highlight.min.js"></script> |
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/8.4.0/styles/solarized_light.min.css"> |
|||
<script src="../dist/markdown-it.js"></script> |
|||
<link rel="stylesheet" href="./assets/index.css"> |
|||
<script src="./assets/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-3', '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> |
|||
<p><a data-toggle="collapse" href="#code-sample">code sample</a></p> |
|||
<pre id="code-sample" class="collapse code-sample"><code class="js">var hljs = require('highlight.js') // https://highlightjs.org/ |
|||
|
|||
var md = require('markdown-it')('full', { |
|||
html: false, // Enable HTML tags in source |
|||
xhtmlOut: false, // Use '/' to close single tags (<br />) |
|||
breaks: false, // Convert '\n' in paragraphs into <br> |
|||
langPrefix: 'language-', // CSS language prefix for fenced blocks |
|||
linkify: true, // autoconvert URL-like texts to links |
|||
|
|||
// Enable some language-neutral replacements + quotes beautification |
|||
typographer: false, |
|||
|
|||
// Double + single quotes replacement pairs, when typographer enabled, |
|||
// and smartquotes on. Set doubles to '«»' for Russian, '„“' for German. |
|||
quotes: '“”‘’', |
|||
|
|||
// Highlighter function. Should return escaped HTML, |
|||
// or '' if input not changed |
|||
highlight: function (str, lang) { |
|||
if (lang && hljs.getLanguage(lang)) { |
|||
try { |
|||
return hljs.highlight(lang, str).value; |
|||
} catch (__) {} |
|||
} |
|||
|
|||
try { |
|||
return hljs.highlightAuto(str).value; |
|||
} catch (__) {} |
|||
|
|||
return ''; // use external default escaping |
|||
} |
|||
}); |
|||
|
|||
console.log(md.render('# markdown-it rulezz!')); |
|||
// => <h1>markdown-it rulezz!</h1> |
|||
</code></pre> |
|||
<div class="form-inline demo-options"> |
|||
<div class="checkbox not-strict"> |
|||
<label title="enable html tags in source text" class="_tip"> |
|||
<input id="html" type="checkbox"> html |
|||
</label> |
|||
</div> |
|||
<div class="checkbox not-strict"> |
|||
<label title="produce xtml output (add / to single tags (<br /> instead of <br>)" class="_tip"> |
|||
<input id="xhtmlOut" type="checkbox"> xhtmlOut |
|||
</label> |
|||
</div> |
|||
<div class="checkbox not-strict"> |
|||
<label title="newlines in paragraphs are rendered as <br>" class="_tip"> |
|||
<input id="breaks" type="checkbox"> breaks |
|||
</label> |
|||
</div> |
|||
<div class="checkbox not-strict"> |
|||
<label title="autoconvert link-like texts to links" class="_tip"> |
|||
<input id="linkify" type="checkbox"> linkify |
|||
</label> |
|||
</div> |
|||
<div class="checkbox not-strict"> |
|||
<label title="do typographyc replacements, (c) -> © and so on" class="_tip"> |
|||
<input id="typographer" type="checkbox"> typographer |
|||
</label> |
|||
</div> |
|||
<div class="checkbox not-strict"> |
|||
<label title="enable output highlight for fenced blocks" class="_tip"> |
|||
<input id="_highlight" type="checkbox"> highlight |
|||
</label> |
|||
</div> |
|||
<div class="form-group not-strict"> |
|||
<input id="langPrefix" type="input" placeholder="language prefix" title="css class language prefix for fenced code blocks" class="form-control _tip"> |
|||
</div> |
|||
<div class="checkbox"> |
|||
<label title="force strict CommonMark mode - output will be equal to reference parser" class="_tip"> |
|||
<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 href="#" class="source-clear">clear</a><a id="permalink" href="./" title="Share this snippet as link"><strong>permalink</strong></a></div> |
|||
<textarea class="source full-height">--- |
|||
__Advertisement :)__ |
|||
|
|||
- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image |
|||
resize in browser. |
|||
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly |
|||
i18n with plurals support and easy syntax. |
|||
|
|||
You will like those projects! |
|||
|
|||
--- |
|||
|
|||
# h1 Heading |
|||
## h2 Heading |
|||
### h3 Heading |
|||
#### h4 Heading |
|||
##### h5 Heading |
|||
###### h6 Heading |
|||
|
|||
|
|||
## Horizontal Rules |
|||
|
|||
___ |
|||
|
|||
--- |
|||
|
|||
*** |
|||
|
|||
|
|||
## Typographic replacements |
|||
|
|||
Enable typographer option to see result. |
|||
|
|||
(c) (C) (r) (R) (tm) (TM) (p) (P) +- |
|||
|
|||
test.. test... test..... test?..... test!.... |
|||
|
|||
!!!!!! ???? ,, |
|||
|
|||
markdown-it -- awesome |
|||
|
|||
"Smartypants, double quotes" |
|||
|
|||
'Smartypants, single quotes' |
|||
|
|||
|
|||
## Emphasis |
|||
|
|||
**This is bold text** |
|||
|
|||
__This is bold text__ |
|||
|
|||
*This is italic text* |
|||
|
|||
_This is italic text_ |
|||
|
|||
~~Deleted text~~ |
|||
|
|||
Superscript: 19^th^ |
|||
|
|||
Subscript: H~2~O |
|||
|
|||
++Inserted text++ |
|||
|
|||
==Marked text== |
|||
|
|||
|
|||
## Blockquotes |
|||
|
|||
|
|||
> Blockquotes can also be nested... |
|||
>> ...by using additional greater-than signs right next to each other... |
|||
> > > ...or with spaces between arrows. |
|||
|
|||
|
|||
## Lists |
|||
|
|||
Unordered |
|||
|
|||
+ Create a list by starting a line with `+`, `-`, or `*` |
|||
+ Sub-lists are made by indenting 2 spaces: |
|||
- Marker character change forces new list start: |
|||
* Ac tristique libero volutpat at |
|||
+ Facilisis in pretium nisl aliquet |
|||
- Nulla volutpat aliquam velit |
|||
+ Very easy! |
|||
|
|||
Ordered |
|||
|
|||
1. Lorem ipsum dolor sit amet |
|||
2. Consectetur adipiscing elit |
|||
3. Integer molestie lorem at massa |
|||
|
|||
|
|||
1. You can use sequential numbers... |
|||
1. ...or keep all the numbers as `1.` |
|||
|
|||
Start numbering with offset: |
|||
|
|||
57. foo |
|||
1. bar |
|||
|
|||
|
|||
## Code |
|||
|
|||
Inline `code` |
|||
|
|||
Indented code |
|||
|
|||
// Some comments |
|||
line 1 of code |
|||
line 2 of code |
|||
line 3 of code |
|||
|
|||
|
|||
Block code "fences" |
|||
|
|||
``` |
|||
Sample text here... |
|||
``` |
|||
|
|||
Syntax highlighting |
|||
|
|||
``` js |
|||
var foo = function (bar) { |
|||
return bar++; |
|||
}; |
|||
|
|||
console.log(foo(5)); |
|||
``` |
|||
|
|||
## Tables |
|||
|
|||
| Option | Description | |
|||
| ------ | ----------- | |
|||
| data | path to data files to supply the data that will be passed into templates. | |
|||
| engine | engine to be used for processing templates. Handlebars is the default. | |
|||
| ext | extension to be used for dest files. | |
|||
|
|||
Right aligned columns |
|||
|
|||
| Option | Description | |
|||
| ------:| -----------:| |
|||
| data | path to data files to supply the data that will be passed into templates. | |
|||
| engine | engine to be used for processing templates. Handlebars is the default. | |
|||
| ext | extension to be used for dest files. | |
|||
|
|||
|
|||
## Links |
|||
|
|||
[link text](http://dev.nodeca.com) |
|||
|
|||
[link with title](http://nodeca.github.io/pica/demo/ "title text!") |
|||
|
|||
Autoconverted link https://github.com/nodeca/pica (enable linkify to see) |
|||
|
|||
|
|||
## Images |
|||
|
|||
 |
|||
 |
|||
|
|||
Like links, Images also have a footnote style syntax |
|||
|
|||
![Alt text][id] |
|||
|
|||
With a reference later in the document defining the URL location: |
|||
|
|||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" |
|||
|
|||
|
|||
## Footnotes |
|||
|
|||
Footnote 1 link[^first]. |
|||
|
|||
Footnote 2 link[^second]. |
|||
|
|||
Inline footnote^[Text of inline footnote] definition. |
|||
|
|||
Duplicated footnote reference[^second]. |
|||
|
|||
[^first]: Footnote **can have markup** |
|||
|
|||
and multiple paragraphs. |
|||
|
|||
[^second]: Footnote text. |
|||
|
|||
|
|||
## Definition lists |
|||
|
|||
Term 1 |
|||
|
|||
: Definition 1 |
|||
with lazy continuation. |
|||
|
|||
Term 2 with *inline markup* |
|||
|
|||
: Definition 2 |
|||
|
|||
{ some code, part of Definition 2 } |
|||
|
|||
Third paragraph of definition 2. |
|||
|
|||
_Compact style:_ |
|||
|
|||
Term 1 |
|||
~ Definition 1 |
|||
|
|||
Term 2 |
|||
~ Definition 2a |
|||
~ Definition 2b |
|||
|
|||
|
|||
## Abbreviations |
|||
|
|||
This is HTML abbreviation example. |
|||
|
|||
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. |
|||
|
|||
*[HTML]: Hyper Text Markup Language |
|||
</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="result-src full-height"><code class="result-src-content full-height"></code></pre> |
|||
<pre class="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,35 +0,0 @@ |
|||
var hljs = require('highlight.js') // https://highlightjs.org/
|
|||
|
|||
var md = require('markdown-it')('full', { |
|||
html: false, // Enable HTML tags in source
|
|||
xhtmlOut: false, // Use '/' to close single tags (<br />)
|
|||
breaks: false, // Convert '\n' in paragraphs into <br>
|
|||
langPrefix: 'language-', // CSS language prefix for fenced blocks
|
|||
linkify: true, // autoconvert URL-like texts to links
|
|||
|
|||
// Enable some language-neutral replacements + quotes beautification
|
|||
typographer: false, |
|||
|
|||
// Double + single quotes replacement pairs, when typographer enabled,
|
|||
// and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
|
|||
quotes: '“”‘’', |
|||
|
|||
// Highlighter function. Should return escaped HTML,
|
|||
// or '' if input not changed
|
|||
highlight: function (str, lang) { |
|||
if (lang && hljs.getLanguage(lang)) { |
|||
try { |
|||
return hljs.highlight(lang, str).value; |
|||
} catch (__) {} |
|||
} |
|||
|
|||
try { |
|||
return hljs.highlightAuto(str).value; |
|||
} catch (__) {} |
|||
|
|||
return ''; // use external default escaping
|
|||
} |
|||
}); |
|||
|
|||
console.log(md.render('# markdown-it rulezz!')); |
|||
// => <h1>markdown-it rulezz!</h1>
|
|||
Loading…
Reference in new issue