diff --git a/README.md b/README.md
index e31e104233..918bb5baba 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,9 @@ Our [documentation pages](https://marked.js.org) are also rendered using marked
**In-browser:** `npm install marked --save`
-## Usage
+## Usage
+
+### Warning: 🚨 Marked does not [sanitize](https://marked.js.org/#/USING_ADVANCED.md#options) the output HTML by default 🚨
**CLI**
@@ -64,4 +66,3 @@ $ cat hello.html
## License
Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
-
diff --git a/docs/README.md b/docs/README.md
index 6df149b860..f41160ce9f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -39,6 +39,8 @@ These documentation pages are also rendered using marked 💯
Usage
+### Warning: 🚨 Marked does not [sanitize](https://marked.js.org/#/USING_ADVANCED.md#options) the output HTML by default 🚨
+
**CLI**
``` bash
diff --git a/docs/demo/demo.css b/docs/demo/demo.css
index 8e3e8fc5e8..e459d86870 100644
--- a/docs/demo/demo.css
+++ b/docs/demo/demo.css
@@ -53,3 +53,11 @@ header h1 {
flex-grow: 1;
flex-shrink: 1;
}
+
+#preview {
+ display: flex;
+}
+
+#preview iframe {
+ flex-grow: 1;
+}
diff --git a/docs/demo/demo.js b/docs/demo/demo.js
index 8db8e7146b..f12724596a 100644
--- a/docs/demo/demo.js
+++ b/docs/demo/demo.js
@@ -9,7 +9,7 @@ if (!window.fetch) {
var $inputElem = document.querySelector('#input');
var $outputTypeElem = document.querySelector('#outputType');
-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');
@@ -20,6 +20,13 @@ var $activeElem = null;
var changeTimeout = null;
var search = searchToObject();
+var iframeLoaded = false;
+$previewIframe.addEventListener('load', function () {
+ iframeLoaded = true;
+ inputDirty = true;
+ checkForChanges();
+})
+
if ('text' in search) {
$inputElem.value = search.text;
} else {
@@ -51,7 +58,7 @@ function handleChange() {
$panes[i].style.display = 'none';
}
$activeElem = document.querySelector('#' + $outputTypeElem.value);
- $activeElem.style.display = 'block';
+ $activeElem.style.display = '';
updateLink();
};
@@ -155,7 +162,9 @@ function checkForChanges() {
var parsed = marked.parser(lexed);
- $previewElem.innerHTML = (parsed);
+ if (iframeLoaded) {
+ $previewIframe.contentDocument.body.innerHTML = (parsed);
+ }
$htmlElem.value = (parsed);
$lexerElem.value = (lexedList.join('\n'));
diff --git a/docs/demo/index.html b/docs/demo/index.html
index cc2b378d65..57062e9ae1 100644
--- a/docs/demo/index.html
+++ b/docs/demo/index.html
@@ -42,6 +42,7 @@ Marked Demo
+
diff --git a/docs/demo/preview.html b/docs/demo/preview.html
new file mode 100644
index 0000000000..7e8c89fec5
--- /dev/null
+++ b/docs/demo/preview.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ marked.js preview
+
+
+
+
+
+