Commit 19bb0986790bebd8cf78e07f37449b7ba2d1ddb6
2012-07-29T02:08:09
Added test drive page
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
diff --git a/templates/footer.html b/templates/footer.html
index 2187a46..1ab8d0c 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -7,6 +7,7 @@ and <a href="https://github.com/LeaVerou/prism/contributors" target="_blank">all
<li><a href="index.html">Home</a></li>
<li><a href="download.html">Download</a></li>
<li><a href="faq.html">FAQ</a></li>
+ <li><a href="test.html">Test drive</a></li>
<li><a href="extending.html">Extending Prism</a></li>
<li><a href="https://github.com/LeaVerou/prism/">Fork Prism on Github</a></li>
</ul>
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..e68e51b
--- /dev/null
+++ b/test.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="utf-8" />
+<title>Test drive ▲ Prism</title>
+<link rel="stylesheet" href="style.css" />
+<link rel="stylesheet" href="prism.css" data-noprefix />
+<style>
+#theme {
+ margin-right: -9em;
+}
+textarea {
+ width: 100%;
+ height: 10em;
+ padding: 1em;
+ box-sizing: border-box;
+ margin: .5em 0;
+ background: #f5f2f0;
+ color: black;
+ text-shadow: 0 1px white;
+ tab-size: 4;
+ font: 100% Consolas, Monaco, monospace;
+ white-space: pre;
+ word-wrap: normal;
+}
+
+#language label {
+ display: inline-block;
+ padding: .5em;
+}
+
+ #language input {
+ margin-right: .3em;
+ }
+
+</style>
+<script src="../prefixfree/prefixfree.min.js"></script>
+
+</head>
+<body>
+
+<header>
+ <div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
+
+ <h2>Test drive</h2>
+ <p>Take Prism for a spin!</p>
+</header>
+
+<section>
+ <form>
+ <p>
+ <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>
+
+ <p>Result:</p>
+ <pre><code></code></pre>
+ </form>
+</section>
+
+<footer data-src="templates/footer.html" data-type="text/html"></footer>
+
+<script src="prism.js"></script>
+<script src="utopia.js"></script>
+<script src="code.js"></script>
+<script>
+(function() {
+var form = $('form'), code = $('code', form),
+ languages = components.languages;
+
+for (var id in languages) {
+ if (id == 'meta') {
+ continue;
+ }
+
+ var name = languages[id];
+
+ $u.element.create('label', {
+ contents: [
+ {
+ tag: 'input',
+ properties: {
+ type: 'radio',
+ name: 'language',
+ value: id,
+ onclick: function () {
+ code.className = 'language-' + this.value;
+ Prism.highlightElement(code, form.elements.async.checked);
+ }
+ }
+ }, name
+ ],
+ inside: '#language'
+ });
+}
+
+var radios = $$('input[name=language]');
+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);
+}).call(textarea);
+
+})();
+
+</script>
+
+</body>
+</html>
\ No newline at end of file