Add selection options to choose version in demo

markedjs · Feb 8, 2019 · 3ddbb43 · 3ddbb43
1 parent c77a224
commit 3ddbb43
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/docs/demo/demo.js b/docs/demo/demo.js
@@ -8,6 +8,8 @@ if (!window.fetch) {
 }
 
 var $markdownElem = document.querySelector('#markdown');
+var $markedVerElem = document.querySelector('#markedVersion');
+var $markedVer = document.querySelector('#markedCdn');
 var $optionsElem = document.querySelector('#options');
 var $outputTypeElem = document.querySelector('#outputType');
 var $inputTypeElem = document.querySelector('#inputType');
@@ -78,6 +80,11 @@ function handleOutputChange() {
   updateLink();
 }
 
+function handleVersionChange() {
+  handleChange($markedVer, $markedVerElem.value);
+  updateVersion();
+}
+
 function handleChange(panes, visiblePane) {
   var active = null;
   for (var i = 0; i < panes.length; i++) {
@@ -95,6 +102,8 @@ $outputTypeElem.addEventListener('change', handleOutputChange, false);
 handleOutputChange();
 $inputTypeElem.addEventListener('change', handleInputChange, false);
 handleInputChange();
+$markedVerElem.addEventListener('change', handleVersionChange, false);
+handleVersionChange();
 
 function handleInput() {
   inputDirty = true;
@@ -174,6 +183,10 @@ function updateLink() {
   history.replaceState('', document.title, $permalinkElem.href);
 }
 
+function updateVersion() {
+  $markedVer.setAttribute('src', $markedVerElem.value);
+}
+
 var delayTime = 1;
 var options = {};
 function checkForChanges() {

diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -28,6 +28,12 @@ <h1>Marked Demo</h1>
             <option value="markdown">Markdown</option>
             <option value="options">Options</option>
           </select>
+          <select id="markedVersion">
+            <option value="https://cdn.jsdelivr.net/npm/marked@master/marked.min.js">Marked@master</option>
+            <option value="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js">[email protected]</option>
+            <option value="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js">[email protected]</option>
+            <option value="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js">[email protected]</option>
+          </select>
         </div>
         <textarea id="markdown" class="inputPane"></textarea>
         <textarea id="options" class="inputPane" placeholder="Options (as JSON)"></textarea>
@@ -57,7 +63,7 @@ <h2>You'll need to enable Javascript to use this tool.</h2>
         <textarea id="quickref" class="pane" readonly="readonly"></textarea>
       </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.js"></script>
+    <script id="markedCdn" src="https://cdn.jsdelivr.net/npm/marked/lib/marked.js"></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>