summaryrefslogtreecommitdiffstats
path: root/packages/markdown/marked/docs/demo
diff options
context:
space:
mode:
authorLauri Ojansivu <x@xet7.org>2019-04-20 15:18:33 +0300
committerLauri Ojansivu <x@xet7.org>2019-04-20 15:18:33 +0300
commit73e265d8fd050ae3daa67472b4465a5c49d68910 (patch)
tree677b233934a43d8f873e24c794ce289d85e3a9b7 /packages/markdown/marked/docs/demo
parent6117097a93bfb11c8bd4c87a23c44a50e22ceb87 (diff)
downloadwekan-73e265d8fd050ae3daa67472b4465a5c49d68910.tar.gz
wekan-73e265d8fd050ae3daa67472b4465a5c49d68910.tar.bz2
wekan-73e265d8fd050ae3daa67472b4465a5c49d68910.zip
Include to Wekan packages directory contents, so that meteor command would build all directly.
This also simplifies build scripts. Thanks to xet7 !
Diffstat (limited to 'packages/markdown/marked/docs/demo')
-rw-r--r--packages/markdown/marked/docs/demo/demo.css72
-rw-r--r--packages/markdown/marked/docs/demo/demo.js534
-rw-r--r--packages/markdown/marked/docs/demo/index.html78
-rw-r--r--packages/markdown/marked/docs/demo/initial.md36
-rw-r--r--packages/markdown/marked/docs/demo/preview.html12
-rw-r--r--packages/markdown/marked/docs/demo/quickref.md167
-rw-r--r--packages/markdown/marked/docs/demo/worker.js105
7 files changed, 1004 insertions, 0 deletions
diff --git a/packages/markdown/marked/docs/demo/demo.css b/packages/markdown/marked/docs/demo/demo.css
new file mode 100644
index 00000000..398c663a
--- /dev/null
+++ b/packages/markdown/marked/docs/demo/demo.css
@@ -0,0 +1,72 @@
+html, body {
+ margin: 0;
+ padding: 0;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #333;
+ background-color: #fbfbfb;
+ height: 100%;
+}
+
+textarea {
+ font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+ font-size: 12px;
+ resize: none;
+}
+
+header {
+ padding-top: 10px;
+ display: flex;
+ height: 58px;
+}
+
+header h1 {
+ margin: 0;
+}
+
+.github-ribbon {
+ position: absolute;
+ top: 0;
+ right: 0;
+ border: 0;
+ z-index: 1000;
+}
+
+.containers {
+ display: flex;
+ height: calc(100vh - 68px);
+}
+
+.container {
+ flex-basis: 50%;
+ padding: 5px;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ box-sizing: border-box;
+}
+
+.pane, .inputPane {
+ margin-top: 5px;
+ padding: 0.6em;
+ border: 1px solid #ccc;
+ overflow: auto;
+ flex-grow: 1;
+ flex-shrink: 1;
+}
+
+#preview {
+ display: flex;
+}
+
+#preview iframe {
+ flex-grow: 1;
+}
+
+#main {
+ display: none;
+}
+
+.error {
+ border-color: red;
+ background-color: #FEE
+}
diff --git a/packages/markdown/marked/docs/demo/demo.js b/packages/markdown/marked/docs/demo/demo.js
new file mode 100644
index 00000000..e7d97c59
--- /dev/null
+++ b/packages/markdown/marked/docs/demo/demo.js
@@ -0,0 +1,534 @@
+/* globals marked, unfetch, ES6Promise */
+
+if (!window.Promise) {
+ window.Promise = ES6Promise;
+}
+if (!window.fetch) {
+ window.fetch = unfetch;
+}
+
+onunhandledrejection = function (e) {
+ throw e.reason;
+};
+
+var $loadingElem = document.querySelector('#loading');
+var $mainElem = document.querySelector('#main');
+var $markdownElem = document.querySelector('#markdown');
+var $markedVerElem = document.querySelector('#markedVersion');
+var $commitVerElem = document.querySelector('#commitVersion');
+var $markedVer = document.querySelector('#markedCdn');
+var $optionsElem = document.querySelector('#options');
+var $outputTypeElem = document.querySelector('#outputType');
+var $inputTypeElem = document.querySelector('#inputType');
+var $responseTimeElem = document.querySelector('#responseTime');
+var $previewElem = document.querySelector('#preview');
+var $previewIframe = document.querySelector('#preview iframe');
+var $permalinkElem = document.querySelector('#permalink');
+var $clearElem = document.querySelector('#clear');
+var $htmlElem = document.querySelector('#html');
+var $lexerElem = document.querySelector('#lexer');
+var $panes = document.querySelectorAll('.pane');
+var $inputPanes = document.querySelectorAll('.inputPane');
+var lastInput = '';
+var inputDirty = true;
+var $activeOutputElem = null;
+var search = searchToObject();
+var markedVersions = {
+ master: 'https://cdn.jsdelivr.net/gh/markedjs/marked/lib/marked.js'
+};
+var markedVersionCache = {};
+var delayTime = 1;
+var checkChangeTimeout = null;
+var markedWorker;
+
+$previewIframe.addEventListener('load', handleIframeLoad);
+
+$outputTypeElem.addEventListener('change', handleOutputChange, false);
+
+$inputTypeElem.addEventListener('change', handleInputChange, false);
+
+$markedVerElem.addEventListener('change', handleVersionChange, false);
+
+$markdownElem.addEventListener('change', handleInput, false);
+$markdownElem.addEventListener('keyup', handleInput, false);
+$markdownElem.addEventListener('keypress', handleInput, false);
+$markdownElem.addEventListener('keydown', handleInput, false);
+
+$optionsElem.addEventListener('change', handleInput, false);
+$optionsElem.addEventListener('keyup', handleInput, false);
+$optionsElem.addEventListener('keypress', handleInput, false);
+$optionsElem.addEventListener('keydown', handleInput, false);
+
+$commitVerElem.style.display = 'none';
+$commitVerElem.addEventListener('keypress', handleAddVersion, false);
+
+$clearElem.addEventListener('click', handleClearClick, false);
+
+Promise.all([
+ setInitialQuickref(),
+ setInitialOutputType(),
+ setInitialText(),
+ setInitialVersion()
+ .then(setInitialOptions)
+]).then(function () {
+ handleInputChange();
+ handleOutputChange();
+ checkForChanges();
+ setScrollPercent(0);
+ $loadingElem.style.display = 'none';
+ $mainElem.style.display = 'block';
+});
+
+function setInitialText() {
+ if ('text' in search) {
+ $markdownElem.value = search.text;
+ } else {
+ return fetch('./initial.md')
+ .then(function (res) { return res.text(); })
+ .then(function (text) {
+ if ($markdownElem.value === '') {
+ $markdownElem.value = text;
+ }
+ });
+ }
+}
+
+function setInitialQuickref() {
+ return fetch('./quickref.md')
+ .then(function (res) { return res.text(); })
+ .then(function (text) {
+ document.querySelector('#quickref').value = text;
+ });
+}
+
+function setInitialVersion() {
+ return fetch('https://data.jsdelivr.com/v1/package/npm/marked')
+ .then(function (res) {
+ return res.json();
+ })
+ .then(function (json) {
+ for (var i = 0; i < json.versions.length; i++) {
+ var ver = json.versions[i];
+ markedVersions[ver] = 'https://cdn.jsdelivr.net/npm/marked@' + ver + '/lib/marked.js';
+ var opt = document.createElement('option');
+ opt.textContent = ver;
+ opt.value = ver;
+ $markedVerElem.appendChild(opt);
+ }
+ })
+ .then(function () {
+ return fetch('https://api.github.com/repos/markedjs/marked/commits')
+ .then(function (res) {
+ return res.json();
+ })
+ .then(function (json) {
+ markedVersions['master'] = 'https://cdn.jsdelivr.net/gh/markedjs/marked@' + json[0].sha + '/lib/marked.js';
+ })
+ .catch(function () {
+ // do nothing
+ // uses url without commit
+ });
+ })
+ .then(function () {
+ if (search.version) {
+ if (markedVersions[search.version]) {
+ return search.version;
+ } else {
+ var match = search.version.match(/^(\w+):(.+)$/);
+ if (match) {
+ switch (match[1]) {
+ case 'commit':
+ addCommitVersion(search.version, match[2].substring(0, 7), match[2]);
+ return search.version;
+ case 'pr':
+ return getPrCommit(match[2])
+ .then(function (commit) {
+ if (!commit) {
+ return 'master';
+ }
+ addCommitVersion(search.version, 'PR #' + match[2], commit);
+ return search.version;
+ });
+ }
+ }
+ }
+ }
+
+ return 'master';
+ })
+ .then(function (version) {
+ $markedVerElem.value = version;
+ })
+ .then(updateVersion);
+}
+
+function setInitialOptions() {
+ if ('options' in search) {
+ $optionsElem.value = search.options;
+ } else {
+ setDefaultOptions();
+ }
+}
+
+function setInitialOutputType() {
+ if (search.outputType) {
+ $outputTypeElem.value = search.outputType;
+ }
+}
+
+function handleIframeLoad() {
+ lastInput = '';
+ inputDirty = true;
+}
+
+function handleInput() {
+ inputDirty = true;
+};
+
+function handleVersionChange() {
+ if ($markedVerElem.value === 'commit' || $markedVerElem.value === 'pr') {
+ $commitVerElem.style.display = '';
+ } else {
+ $commitVerElem.style.display = 'none';
+ updateVersion();
+ }
+}
+
+function handleClearClick() {
+ $markdownElem.value = '';
+ $markedVerElem.value = 'master';
+ $commitVerElem.style.display = 'none';
+ updateVersion().then(setDefaultOptions);
+}
+
+function handleAddVersion(e) {
+ if (e.which === 13) {
+ switch ($markedVerElem.value) {
+ case 'commit':
+ var commit = $commitVerElem.value.toLowerCase();
+ if (!commit.match(/^[0-9a-f]{40}$/)) {
+ alert('That is not a valid commit');
+ return;
+ }
+ addCommitVersion('commit:' + commit, commit.substring(0, 7), commit);
+ $markedVerElem.value = 'commit:' + commit;
+ $commitVerElem.style.display = 'none';
+ $commitVerElem.value = '';
+ updateVersion();
+ break;
+ case 'pr':
+ $commitVerElem.disabled = true;
+ var pr = $commitVerElem.value.replace(/\D/g, '');
+ getPrCommit(pr)
+ .then(function (commit) {
+ $commitVerElem.disabled = false;
+ if (!commit) {
+ alert('That is not a valid PR');
+ return;
+ }
+ addCommitVersion('pr:' + pr, 'PR #' + pr, commit);
+ $markedVerElem.value = 'pr:' + pr;
+ $commitVerElem.style.display = 'none';
+ $commitVerElem.value = '';
+ updateVersion();
+ });
+ }
+ }
+}
+
+function handleInputChange() {
+ handleChange($inputPanes, $inputTypeElem.value);
+}
+
+function handleOutputChange() {
+ $activeOutputElem = handleChange($panes, $outputTypeElem.value);
+ updateLink();
+}
+
+function handleChange(panes, visiblePane) {
+ var active = null;
+ for (var i = 0; i < panes.length; i++) {
+ if (panes[i].id === visiblePane) {
+ panes[i].style.display = '';
+ active = panes[i];
+ } else {
+ panes[i].style.display = 'none';
+ }
+ }
+ return active;
+};
+
+function addCommitVersion(value, text, commit) {
+ if (markedVersions[value]) {
+ return;
+ }
+ markedVersions[value] = 'https://cdn.jsdelivr.net/gh/markedjs/marked@' + commit + '/lib/marked.js';
+ var opt = document.createElement('option');
+ opt.textContent = text;
+ opt.value = value;
+ $markedVerElem.insertBefore(opt, $markedVerElem.firstChild);
+}
+
+function getPrCommit(pr) {
+ return fetch('https://api.github.com/repos/markedjs/marked/pulls/' + pr + '/commits')
+ .then(function (res) {
+ return res.json();
+ })
+ .then(function (json) {
+ return json[json.length - 1].sha;
+ }).catch(function () {
+ // return undefined
+ });
+}
+
+function setDefaultOptions() {
+ if (window.Worker) {
+ messageWorker({
+ task: 'defaults',
+ version: markedVersions[$markedVerElem.value]
+ });
+ } else {
+ var defaults = marked.getDefaults();
+ setOptions(defaults);
+ }
+}
+
+function setOptions(opts) {
+ $optionsElem.value = JSON.stringify(
+ opts,
+ function (key, value) {
+ if (value && typeof value === 'object' && Object.getPrototypeOf(value) !== Object.prototype) {
+ return undefined;
+ }
+ return value;
+ }, ' ');
+}
+
+function searchToObject() {
+ // modified from https://stackoverflow.com/a/7090123/806777
+ var pairs = location.search.slice(1).split('&');
+ var obj = {};
+
+ for (var i = 0; i < pairs.length; i++) {
+ if (pairs[i] === '') {
+ continue;
+ }
+
+ var pair = pairs[i].split('=');
+
+ obj[decodeURIComponent(pair.shift())] = decodeURIComponent(pair.join('='));
+ }
+
+ return obj;
+}
+
+function jsonString(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 + '"';
+};
+
+function getScrollSize() {
+ var e = $activeOutputElem;
+
+ return e.scrollHeight - e.clientHeight;
+};
+
+function getScrollPercent() {
+ var size = getScrollSize();
+
+ if (size <= 0) {
+ return 1;
+ }
+
+ return $activeOutputElem.scrollTop / size;
+};
+
+function setScrollPercent(percent) {
+ $activeOutputElem.scrollTop = percent * getScrollSize();
+};
+
+function updateLink() {
+ var outputType = '';
+ if ($outputTypeElem.value !== 'preview') {
+ outputType = 'outputType=' + $outputTypeElem.value + '&';
+ }
+
+ $permalinkElem.href = '?' + outputType + 'text=' + encodeURIComponent($markdownElem.value)
+ + '&options=' + encodeURIComponent($optionsElem.value)
+ + '&version=' + encodeURIComponent($markedVerElem.value);
+ history.replaceState('', document.title, $permalinkElem.href);
+}
+
+function updateVersion() {
+ if (window.Worker) {
+ handleInput();
+ return Promise.resolve();
+ }
+ var promise;
+ if (markedVersionCache[$markedVerElem.value]) {
+ promise = Promise.resolve(markedVersionCache[$markedVerElem.value]);
+ } else {
+ promise = fetch(markedVersions[$markedVerElem.value])
+ .then(function (res) { return res.text(); })
+ .then(function (text) {
+ markedVersionCache[$markedVerElem.value] = text;
+ return text;
+ });
+ }
+ return promise.then(function (text) {
+ var script = document.createElement('script');
+ script.textContent = text;
+
+ $markedVer.parentNode.replaceChild(script, $markedVer);
+ $markedVer = script;
+ }).then(handleInput);
+}
+
+function checkForChanges() {
+ if (inputDirty && $markedVerElem.value !== 'commit' && $markedVerElem.value !== 'pr' && (typeof marked !== 'undefined' || window.Worker)) {
+ inputDirty = false;
+
+ updateLink();
+
+ var options = {};
+ var optionsString = $optionsElem.value || '{}';
+ try {
+ var newOptions = JSON.parse(optionsString);
+ options = newOptions;
+ $optionsElem.classList.remove('error');
+ } catch (err) {
+ $optionsElem.classList.add('error');
+ }
+
+ var version = markedVersions[$markedVerElem.value];
+ var markdown = $markdownElem.value;
+ var hash = version + markdown + optionsString;
+ if (lastInput !== hash) {
+ lastInput = hash;
+ if (window.Worker) {
+ delayTime = 100;
+ messageWorker({
+ task: 'parse',
+ version: version,
+ markdown: markdown,
+ options: options
+ });
+ } else {
+ var startTime = new Date();
+ var lexed = marked.lexer(markdown, options);
+ 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, options);
+ var scrollPercent = getScrollPercent();
+ setParsed(parsed, lexedList.join('\n'));
+ setScrollPercent(scrollPercent);
+ var endTime = new Date();
+ delayTime = endTime - startTime;
+ setResponseTime(delayTime);
+ if (delayTime < 50) {
+ delayTime = 50;
+ } else if (delayTime > 500) {
+ delayTime = 1000;
+ }
+ }
+ }
+ }
+ checkChangeTimeout = window.setTimeout(checkForChanges, delayTime);
+};
+
+function setResponseTime(ms) {
+ var amount = ms;
+ var suffix = 'ms';
+ if (ms > 1000 * 60 * 60) {
+ amount = 'Too Long';
+ suffix = '';
+ } else if (ms > 1000 * 60) {
+ amount = '>' + Math.floor(ms / (1000 * 60));
+ suffix = 'm';
+ } else if (ms > 1000) {
+ amount = '>' + Math.floor(ms / 1000);
+ suffix = 's';
+ }
+ $responseTimeElem.textContent = amount + suffix;
+}
+
+function setParsed(parsed, lexed) {
+ try {
+ $previewIframe.contentDocument.body.innerHTML = parsed;
+ } catch (ex) {}
+ $htmlElem.value = parsed;
+ $lexerElem.value = lexed;
+}
+
+function messageWorker(message) {
+ if (!markedWorker || markedWorker.working) {
+ if (markedWorker) {
+ clearTimeout(markedWorker.timeout);
+ markedWorker.terminate();
+ }
+ markedWorker = new Worker('worker.js');
+ markedWorker.onmessage = function (e) {
+ clearTimeout(markedWorker.timeout);
+ markedWorker.working = false;
+ switch (e.data.task) {
+ case 'defaults':
+ setOptions(e.data.defaults);
+ break;
+ case 'parse':
+ $previewElem.classList.remove('error');
+ $htmlElem.classList.remove('error');
+ $lexerElem.classList.remove('error');
+ var scrollPercent = getScrollPercent();
+ setParsed(e.data.parsed, e.data.lexed);
+ setScrollPercent(scrollPercent);
+ setResponseTime(e.data.time);
+ break;
+ }
+ clearTimeout(checkChangeTimeout);
+ delayTime = 10;
+ checkForChanges();
+ };
+ markedWorker.onerror = markedWorker.onmessageerror = function (err) {
+ clearTimeout(markedWorker.timeout);
+ var error = 'There was an error in the Worker';
+ if (err) {
+ if (err.message) {
+ error = err.message;
+ } else {
+ error = err;
+ }
+ }
+ error = error.replace(/^Uncaught Error: /, '');
+ $previewElem.classList.add('error');
+ $htmlElem.classList.add('error');
+ $lexerElem.classList.add('error');
+ setParsed(error, error);
+ setScrollPercent(0);
+ };
+ }
+ if (message.task !== 'defaults') {
+ markedWorker.working = true;
+ workerTimeout(0);
+ }
+ markedWorker.postMessage(message);
+}
+
+function workerTimeout(seconds) {
+ markedWorker.timeout = setTimeout(function () {
+ seconds++;
+ markedWorker.onerror('Marked has taken longer than ' + seconds + ' second' + (seconds > 1 ? 's' : '') + ' to respond...');
+ workerTimeout(seconds);
+ }, 1000);
+}
diff --git a/packages/markdown/marked/docs/demo/index.html b/packages/markdown/marked/docs/demo/index.html
new file mode 100644
index 00000000..96a8ec14
--- /dev/null
+++ b/packages/markdown/marked/docs/demo/index.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+
+ <head>
+ <title>Marked Demo</title>
+ <link rel="stylesheet" href="./demo.css" type="text/css" />
+ </head>
+
+ <body>
+ <a href="https://github.com/markedjs/marked">
+ <img class="github-ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
+ </a>
+
+ <header>
+ <a href="../">
+ <img src="../img/logo-black.svg" height="64px" width="64px" />
+ </a>
+ <h1>Marked Demo</h1>
+ </header>
+
+ <div id="loading">Loading...</div>
+ <div id="main">
+ <div class="containers">
+ <div class="container">
+ <div class="label">
+ <span>Input</span> ·
+ <a id="permalink">Permalink</a> ·
+ <span>Version: </span>
+ <select id="markedVersion">
+ <option value="pr">Add PR:</option>
+ <option value="commit">Add Commit:</option>
+ <option value="master" selected>master</option>
+ </select>
+ <input type="text" id="commitVersion" title="Press ENTER to add commit" />·
+ <button id="clear">Clear</button>
+ <select id="inputType">
+ <option value="markdown">Markdown</option>
+ <option value="options">Options</option>
+ </select>
+ </div>
+ <textarea id="markdown" class="inputPane"></textarea>
+ <textarea id="options" class="inputPane" placeholder="Options (as JSON)"></textarea>
+ </div>
+
+ <div class="container">
+ <div class="label">
+ <select id="outputType">
+ <option value="preview">Preview</option>
+ <option value="html">HTML Source</option>
+ <option value="lexer">Lexer Data</option>
+ <option value="quickref">Quick Reference</option>
+ </select> ·
+ Response Time:
+ <span id="responseTime"></span>
+ </div>
+
+ <div id="preview" class="pane">
+ <noscript>
+ <h2>You'll need to enable Javascript to use this tool.</h2>
+ </noscript>
+ <iframe src="./preview.html" frameborder="0" sandbox="allow-same-origin allow-top-navigation-by-user-activation"></iframe>
+ </div>
+
+ <textarea id="html" class="pane" readonly="readonly"></textarea>
+
+ <textarea id="lexer" class="pane" readonly="readonly"></textarea>
+
+ <textarea id="quickref" class="pane" readonly="readonly"></textarea>
+ </div>
+ </div>
+ </div>
+ <script id="markedCdn"></script>
+ <script src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/unfetch/dist/unfetch.umd.js"></script>
+ <script src="./demo.js"></script>
+ </body>
+
+</html>
diff --git a/packages/markdown/marked/docs/demo/initial.md b/packages/markdown/marked/docs/demo/initial.md
new file mode 100644
index 00000000..d2b7d77c
--- /dev/null
+++ b/packages/markdown/marked/docs/demo/initial.md
@@ -0,0 +1,36 @@
+Marked - Markdown Parser
+========================
+
+[Marked] lets you convert [Markdown] into HTML. Markdown is a simple text format whose goal is to be very easy to read and write, even when not converted to HTML. This demo page will let you type anything you like and see how it gets converted. Live. No more waiting around.
+
+How To Use The Demo
+-------------------
+
+1. Type in stuff on the left.
+2. See the live updates on the right.
+
+That's it. Pretty simple. There's also a drop-down option in the upper right to switch between various views:
+
+- **Preview:** A live display of the generated HTML as it would render in a browser.
+- **HTML Source:** The generated HTML before your browser makes it pretty.
+- **Lexer Data:** What [marked] uses internally, in case you like gory stuff like this.
+- **Quick Reference:** A brief run-down of how to format things using markdown.
+
+Why Markdown?
+-------------
+
+It's easy. It's not overly bloated, unlike HTML. Also, as the creator of [markdown] says,
+
+> The overriding design goal for Markdown's
+> formatting syntax is to make it as readable
+> as possible. The idea is that a
+> Markdown-formatted document should be
+> publishable as-is, as plain text, without
+> looking like it's been marked up with tags
+> or formatting instructions.
+
+Ready to start writing? Either start changing stuff on the left or
+[clear everything](/demo/?text=) with a simple click.
+
+[Marked]: https://github.com/markedjs/marked/
+[Markdown]: http://daringfireball.net/projects/markdown/
diff --git a/packages/markdown/marked/docs/demo/preview.html b/packages/markdown/marked/docs/demo/preview.html
new file mode 100644
index 00000000..7e8c89fe
--- /dev/null
+++ b/packages/markdown/marked/docs/demo/preview.html
@@ -0,0 +1,12 @@
+
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>marked.js preview</title>
+ <link rel="stylesheet" href="./demo.css" />
+ <base target="_parent">
+</head>
+<body>
+</body>
+</html>
diff --git a/packages/markdown/marked/docs/demo/quickref.md b/packages/markdown/marked/docs/demo/quickref.md
new file mode 100644
index 00000000..10f09bda
--- /dev/null
+++ b/packages/markdown/marked/docs/demo/quickref.md
@@ -0,0 +1,167 @@
+Markdown Quick Reference
+========================
+
+This guide is a very brief overview, with examples, of the syntax that [Markdown] supports. It is itself written in Markdown and you can copy the samples over to the left-hand pane for experimentation. It's shown as *text* and not *rendered HTML*.
+
+[Markdown]: http://daringfireball.net/projects/markdown/
+
+
+Simple Text Formatting
+======================
+
+First thing is first. You can use *stars* or _underscores_ for italics. **Double stars** and __double underscores__ do bold. ***Three together*** do ___both___.
+
+Paragraphs are pretty easy too. Just have a blank line between chunks of text.
+
+> This chunk of text is in a block quote. Its multiple lines will all be
+> indended a bit from the rest of the text.
+>
+> > Multiple levels of block quotes also work.
+
+Sometimes you want to include some code, such as when you are explaining how `<h1>` HTML tags work, or maybe you are a programmer and you are discussing `someMethod()`.
+
+If you want to include some code and have
+newlines preserved, indent the line with a tab
+or at least four spaces.
+ Extra spaces work here too.
+This is also called preformatted text and it is useful for showing examples.
+The text will stay as text, so any *markdown* or <u>HTML</u> you add will
+not show up formatted. This way you can show markdown examples in a
+markdown document.
+
+> You can also use preformatted text with your blockquotes
+> as long as you add at least five spaces.
+
+
+Headings
+========
+
+There are a couple of ways to make headings. Using three or more equals signs on a line under a heading makes it into an "h1" style. Three or more hyphens under a line makes it "h2" (slightly smaller). You can also use multiple pound symbols before and after a heading. Pounds after the title are ignored. Here's some examples:
+
+This is H1
+==========
+
+This is H2
+----------
+
+# This is H1
+## This is H2
+### This is H3 with some extra pounds ###
+#### You get the idea ####
+##### I don't need extra pounds at the end
+###### H6 is the max
+
+
+Links
+=====
+
+Let's link to a few sites. First, let's use the bare URL, like <http://www.github.com>. Great for text, but ugly for HTML.
+Next is an inline link to [Google](http://www.google.com). A little nicer.
+This is a reference-style link to [Wikipedia] [1].
+Lastly, here's a pretty link to [Yahoo]. The reference-style and pretty links both automatically use the links defined below, but they could be defined *anywhere* in the markdown and are removed from the HTML. The names are also case insensitive, so you can use [YaHoO] and have it link properly.
+
+[1]: http://www.wikipedia.org/
+[Yahoo]: http://www.yahoo.com/
+
+Title attributes may be added to links by adding text after a link.
+This is the [inline link](http://www.bing.com "Bing") with a "Bing" title.
+You can also go to [W3C] [2] and maybe visit a [friend].
+
+[2]: http://w3c.org (The W3C puts out specs for web-based things)
+[Friend]: http://facebook.com/ "Facebook!"
+
+Email addresses in plain text are not linked: test@example.com.
+Email addresses wrapped in angle brackets are linked: <test@example.com>.
+They are also obfuscated so that email harvesting spam robots hopefully won't get them.
+
+
+Lists
+=====
+
+* This is a bulleted list
+* Great for shopping lists
+- You can also use hyphens
++ Or plus symbols
+
+The above is an "unordered" list. Now, on for a bit of order.
+
+1. Numbered lists are also easy
+2. Just start with a number
+3738762. However, the actual number doesn't matter when converted to HTML.
+1. This will still show up as 4.
+
+You might want a few advanced lists:
+
+- This top-level list is wrapped in paragraph tags
+- This generates an extra space between each top-level item.
+
+- You do it by adding a blank line
+
+- This nested list also has blank lines between the list items.
+
+- How to create nested lists
+1. Start your regular list
+2. Indent nested lists with four spaces
+3. Further nesting means you should indent with four more spaces
+ * This line is indented with eight spaces.
+
+- List items can be quite lengthy. You can keep typing and either continue
+them on the next line with no indentation.
+
+- Alternately, if that looks ugly, you can also
+indent the next line a bit for a prettier look.
+
+- You can put large blocks of text in your list by just indenting with four spaces.
+
+This is formatted the same as code, but you can inspect the HTML
+and find that it's just wrapped in a `<p>` tag and *won't* be shown
+as preformatted text.
+
+You can keep adding more and more paragraphs to a single
+list item by adding the traditional blank line and then keep
+on indenting the paragraphs with four spaces. You really need
+to only indent the first line, but that looks ugly.
+
+- Lists support blockquotes
+
+> Just like this example here. By the way, you can
+> nest lists inside blockquotes!
+> - Fantastic!
+
+- Lists support preformatted text
+
+ You just need to indent eight spaces.
+
+
+Even More
+=========
+
+Horizontal Rule
+---------------
+
+If you need a horizontal rule you just need to put at least three hyphens, asterisks, or underscores on a line by themselves. You can also even put spaces between the characters.
+
+---
+****************************
+_ _ _ _ _ _ _
+
+Those three all produced horizontal lines. Keep in mind that three hyphens under any text turns that text into a heading, so add a blank like if you use hyphens.
+
+Images
+------
+
+Images work exactly like links, but they have exclamation points in front. They work with references and titles too.
+
+![Google Logo](http://www.google.com/images/errors/logo_sm.gif) and ![Happy].
+
+[Happy]: http://www.wpclipart.com/smiley/simple_smiley/smiley_face_simple_green_small.png ("Smiley face")
+
+
+Inline HTML
+-----------
+
+If markdown is too limiting, you can just insert your own <strike>crazy</strike> HTML. Span-level HTML <u>can *still* use markdown</u>. Block level elements must be separated from text by a blank line and must not have any spaces before the opening and closing HTML.
+
+<div style='font-family: "Comic Sans", sans-serif;'>
+It is a pity, but markdown does **not** work in here for most markdown parsers. [Marked] handles it pretty well.
+</div>
diff --git a/packages/markdown/marked/docs/demo/worker.js b/packages/markdown/marked/docs/demo/worker.js
new file mode 100644
index 00000000..06b8befe
--- /dev/null
+++ b/packages/markdown/marked/docs/demo/worker.js
@@ -0,0 +1,105 @@
+/* globals marked, unfetch, ES6Promise */
+if (!self.Promise) {
+ self.importScripts('https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.js');
+ self.Promise = ES6Promise;
+}
+if (!self.fetch) {
+ self.importScripts('https://cdn.jsdelivr.net/npm/unfetch/dist/unfetch.umd.js');
+ self.fetch = unfetch;
+}
+
+var versionCache = {};
+var currentVersion;
+
+onunhandledrejection = function (e) {
+ throw e.reason;
+};
+
+onmessage = function (e) {
+ if (e.data.version === currentVersion) {
+ parse(e);
+ } else {
+ loadVersion(e.data.version).then(function () {
+ parse(e);
+ });
+ }
+};
+
+function parse(e) {
+ switch (e.data.task) {
+ case 'defaults':
+
+ var defaults = {};
+ if (typeof marked.getDefaults === 'function') {
+ defaults = marked.getDefaults();
+ delete defaults.renderer;
+ } else if ('defaults' in marked) {
+ for (var prop in marked.defaults) {
+ if (prop !== 'renderer') {
+ defaults[prop] = marked.defaults[prop];
+ }
+ }
+ }
+ postMessage({
+ task: e.data.task,
+ defaults: defaults
+ });
+ break;
+ case 'parse':
+ var startTime = new Date();
+ var lexed = marked.lexer(e.data.markdown, e.data.options);
+ 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, e.data.options);
+ var endTime = new Date();
+ // setTimeout(function () {
+ postMessage({
+ task: e.data.task,
+ lexed: lexedList.join('\n'),
+ parsed: parsed,
+ time: endTime - startTime
+ });
+ // }, 10000);
+ break;
+ }
+}
+
+function jsonString(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 + '"';
+};
+
+function loadVersion(ver) {
+ var promise;
+ if (versionCache[ver]) {
+ promise = Promise.resolve(versionCache[ver]);
+ } else {
+ promise = fetch(ver)
+ .then(function (res) { return res.text(); })
+ .then(function (text) {
+ versionCache[ver] = text;
+ return text;
+ });
+ }
+ return promise.then(function (text) {
+ try {
+ // eslint-disable-next-line no-new-func
+ Function(text)();
+ } catch (err) {
+ throw new Error('Cannot load that version of marked');
+ }
+ currentVersion = ver;
+ });
+}