Fixed the Test Drive page to work with non-default languages
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
diff --git a/test.html b/test.html
index f2f5874..31d8c8a 100644
--- a/test.html
+++ b/test.html
@@ -11,6 +11,7 @@
#theme {
margin-right: -9em;
}
+
textarea {
width: 100%;
height: 10em;
@@ -26,13 +27,22 @@ textarea {
word-wrap: normal;
}
-#language label {
- display: inline-block;
- padding: .5em;
+#language {
+ column-count: 4;
}
+ #language label {
+ display: block;
+ padding: .2em;
+ }
+
#language input {
- margin-right: .3em;
+ margin-right: 1em;
+ }
+
+ #language strong {
+ display: block;
+ column-span: all;
}
</style>
@@ -56,14 +66,8 @@ textarea {
<textarea><p class="hey">Type some code here</p></textarea>
</p>
- <p id="language">Language:
- </p>
-
- <p>
- <label>
- <input type="checkbox" name="async" value="1" />
- Asynchronously
- </label>
+ <p id="language">
+ <strong>Language:</strong>
</p>
<p>Result:</p>
@@ -98,8 +102,15 @@ for (var id in languages) {
name: 'language',
value: id,
onclick: function () {
- code.className = 'language-' + this.value;
- Prism.highlightElement(code, form.elements.async.checked);
+ var lang = this.value;
+ code.className = 'language-' + lang;
+ code.textContent = code.textContent;
+
+ if (!Prism.languages[lang]) {
+ $u.script('components/prism-' + lang + '.js');
+ }
+
+ Prism.highlightElement(code);
}
}
}, name
@@ -113,9 +124,10 @@ radios[0].checked = true;
radios[0].onclick();
var textarea = $('textarea', form);
+
(textarea.oninput = function() {
code.textContent = this.value || '';
- Prism.highlightElement(code, form.elements.async.checked);
+ Prism.highlightElement(code);
}).call(textarea);
})();