diff --git a/README.md b/README.md index 57f720749c..4d7914150c 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,12 @@ Marked is 3. light-weight while implementing all markdown features from the supported flavors & specifications. 4. available as a command line interface (CLI) and running in client- or server-side JavaScript projects. +## Demo + +Checkout the [demo page](https://marked.js.org/demo.html) to see marked in action ⛹️ + +Our [documentation pages](https://marked.js.org) are also rendered using marked 💯 + ## Installation **CLI:** `npm install -g marked` @@ -33,10 +39,10 @@ $ cat hello.html Marked in the browser -
+
+ - - + Marked Demo + + Fork me on GitHub + +
@@ -50,7 +55,7 @@

Demo Page for Marked

Ready to start writing? Either start changing stuff on the left or [clear everything](?blank=1) with a simple click. -[Marked]: https://github.com/chjj/marked/ +[Marked]: https://github.com/markedjs/marked/ [Markdown]: http://daringfireball.net/projects/markdown/
@@ -239,6 +244,8 @@

Demo Page for Marked

It is a pity, but markdown does **not** work in here for most markdown parsers. [Marked] handles it pretty well. - + + + diff --git a/docs/demo.js b/docs/demo.js new file mode 100644 index 0000000000..568ffe98a7 --- /dev/null +++ b/docs/demo.js @@ -0,0 +1,107 @@ +(function () { + var $inputElem = document.querySelector('#input'); + var $outputTypeElem = document.querySelector('#outputType'); + var $previewElem = document.querySelector('#preview'); + var $htmlElem = document.querySelector('#html'); + var $lexerElem = document.querySelector('#lexer'); + var $syntaxElem = document.querySelector('#syntax'); + var $pane = document.querySelector('#rightContainer .pane'); + var inputDirty = true; + var $activeElem = null; + + if (top.document.location.href.match(/\?blank=1$/)) { + $inputElem.value = ''; + } + + var handleChange = function () { + var panes = document.querySelectorAll('#rightContainer .pane'); + for (var i = 0; i < panes.length; i++) { + panes[i].style.display = 'none'; + } + $activeElem = document.querySelector('#' + $outputTypeElem.value); + $activeElem.style.display = 'block'; + }; + + $outputTypeElem.addEventListener('change', handleChange, false); + handleChange(); + + + var handleInput = function () { + inputDirty = true; + }; + + $inputElem.addEventListener('change', handleInput, false); + $inputElem.addEventListener('keyup', handleInput, false); + $inputElem.addEventListener('keypress', handleInput, false); + $inputElem.addEventListener('keydown', handleInput, false); + + var jsonString = function (input) { + var output = (input + ''). + replace(/\n/g, '\\n'). + replace(/\r/g, '\\r'). + replace(/\t/g, '\\t'). + replace(/\f/g, '\\f'). + replace(/[\\"']/g, '\\$&'). + replace(/\u0000/g, '\\0'); + return '"' + output + '"'; + }; + + var getScrollSize = function () { + var e = $activeElem; + + return e.scrollHeight - e.clientHeight; + }; + var getScrollPercent = function () { + var size = getScrollSize(); + + if (size <= 0) { + return 1; + } + + return $activeElem.scrollTop / size; + }; + var setScrollPercent = function (percent) { + $activeElem.scrollTop = percent * getScrollSize(); + }; + + var delayTime = 1; + var checkForChanges = function () { + if (inputDirty) { + inputDirty = false; + var startTime = new Date(); + + var scrollPercent = getScrollPercent(); + + var lexed = marked.lexer($inputElem.value); + + var lexedList = []; + + for (var i = 0; i < lexed.length; i ++) { + var lexedLine = []; + for (var j in lexed[i]) { + lexedLine.push(j + ':' + jsonString(lexed[i][j])); + } + lexedList.push('{' + lexedLine.join(', ') + '}'); + } + + var parsed = marked.parser(lexed); + + $previewElem.innerHTML = (parsed); + $htmlElem.value = (parsed); + $lexerElem.value = (lexedList.join('\n')); + + setScrollPercent(scrollPercent); + + var endTime = new Date(); + delayTime = endTime - startTime; + if (delayTime < 50) { + delayTime = 50; + } else if (delayTime > 500) { + delayTime = 1000; + } + } + window.setTimeout(checkForChanges, delayTime); + }; + checkForChanges(); + setScrollPercent(0); +})(); diff --git a/www/demo.js b/www/demo.js deleted file mode 100644 index 36668a4d7f..0000000000 --- a/www/demo.js +++ /dev/null @@ -1,105 +0,0 @@ -$(function () { - var $inputElem = $('#input'); - var $outputTypeElem = $('#outputType'); - var $previewElem = $('#preview'); - var $htmlElem = $('#html'); - var $lexerElem = $('#lexer'); - var $syntaxElem = $('#syntax'); - var inputDirty = true; - var $activeElem = null; - - if (top.document.location.href.match(/\?blank=1$/)) { - $inputElem.val(''); - } - - $outputTypeElem.change(function () { - $('#rightContainer .pane').hide(); - $activeElem = $('#' + $outputTypeElem.val()).show(); - }).change(); - - var noticeChange = function () { - inputDirty = true; - }; - $inputElem. - change(noticeChange). - keyup(noticeChange). - keypress(noticeChange). - keydown(noticeChange); - - var jsonString = function (input) { - var output = (input + ''). - replace(/\n/g, '\\n'). - replace(/\r/g, '\\r'). - replace(/\t/g, '\\t'). - replace(/\f/g, '\\f'). - replace(/[\\"']/g, '\\$&'). - replace(/\u0000/g, '\\0'); - return '"' + output + '"'; - }; - - var getScrollSize = function () { - var e = $activeElem[0]; - - return e.scrollHeight - e.clientHeight; - }; - var getScrollPercent = function () { - var size = getScrollSize(); - - if (size <= 0) { - return 1; - } - - return $activeElem.scrollTop() / size; - }; - var setScrollPercent = function (percent) { - $activeElem.scrollTop(percent * getScrollSize()); - }; - - var delayTime = 1; - var checkForChanges = function () { - if (inputDirty) { - inputDirty = false; - var startTime = new Date(); - - // Save scroll position - var scrollPercent = getScrollPercent(); - - // Convert - var markdown = $inputElem.val(); - var lexed = marked.lexer(markdown); - - // Grab lexed output and convert to a string before the parser - // destroys the data - var lexedList = []; - - for (var i = 0; i < lexed.length; i ++) { - var lexedLine = []; - for (var j in lexed[i]) { - lexedLine.push(j + ":" + jsonString(lexed[i][j])); - } - lexedList.push("{" + lexedLine.join(", ") + "}"); - } - - var parsed = marked.parser(lexed); - - // Assign - $previewElem.html(parsed); - $htmlElem.val(parsed); - $lexerElem.val(lexedList.join("\n")); - - // Set the scroll percent - setScrollPercent(scrollPercent); - - var endTime = new Date(); - delayTime = endTime - startTime; - if (delayTime < 50) { - delayTime = 50; - } else if (delayTime > 500) { - delayTime = 1000; - } - } - window.setTimeout(checkForChanges, delayTime); - }; - checkForChanges(); - setScrollPercent(0); -});