Commit 729cb28ba7c3076e18fd390dce765d4df6a1f2f8
2019-03-10T21:18:27
Test page: Show tokens option (#1757) This adds a new option to the test page to show a visual representation of the nested structure of the tokens of highlighted code Prism returns.
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
diff --git a/test.html b/test.html
index e28cce1..dbe992f 100644
--- a/test.html
+++ b/test.html
@@ -51,6 +51,46 @@ textarea {
column-span: all;
}
+
+pre.show-tokens {
+ line-height: calc(1.5em + 12px);
+}
+
+.show-tokens .token:not(:first-child) {
+ margin-left: 1px;
+}
+
+.show-tokens .token:empty {
+ background: red;
+}
+.show-tokens .token:empty::before {
+ color: white;
+ content: 'empty';
+ font-style: italic;
+ text-shadow: black 0 0 .3em;
+}
+
+.show-tokens .token {
+ border: 1px solid;
+ padding: 6px 1px;
+}
+.show-tokens .token > .token {
+ padding: 4px 1px;
+}
+.show-tokens .token > .token > .token {
+ padding: 2px 1px;
+}
+.show-tokens .token > .token > .token > .token {
+ padding: 0 1px;
+}
+.show-tokens .token > .token > .token > .token > .token {
+ border: none;
+ border-left: 1px solid;
+ border-right: 1px solid;
+ padding: 0;
+ margin: 0 1px;
+}
+
</style>
<script src="prefixfree.min.js"></script>
@@ -75,6 +115,9 @@ textarea {
<p>Result:</p>
<pre><code></code></pre>
+ <p id="options">
+ <label><input type="checkbox" id="option-show-tokens"> Show tokens</label>
+ </p>
<p id="language">
<strong>Language:</strong>
</p>
@@ -195,6 +238,16 @@ var textarea = $('textarea', form);
highlightCode();
}).call(textarea);
+$('#option-show-tokens').onchange = function () {
+ var cls = 'show-tokens';
+ if (this.checked) {
+ $('pre').classList.add(cls);
+ } else {
+ $('pre').classList.remove(cls);
+ }
+};
+$('#option-show-tokens').onchange();
+
})();
</script>