386 lines
7.7 KiB
HTML
386 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="assets/favicon.png" />
|
|
<title>Test drive ▲ Prism</title>
|
|
<link rel="stylesheet" href="assets/style.css" />
|
|
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
|
|
<style>
|
|
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 {
|
|
column-count: 4;
|
|
}
|
|
|
|
#language label {
|
|
display: block;
|
|
padding: .2em;
|
|
}
|
|
|
|
#language label[data-id="javascript"] {
|
|
border-bottom: 1px solid #aaa;
|
|
padding-bottom: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#language input {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
#language strong {
|
|
display: block;
|
|
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;
|
|
}
|
|
|
|
#options {
|
|
position: relative;
|
|
}
|
|
|
|
.link-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: white;
|
|
}
|
|
.link-wrapper .hidden-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
.link-wrapper:hover {
|
|
top: -.5em;
|
|
right: -1em;
|
|
width: 300px;
|
|
padding: .5em 1em;
|
|
outline: 1px solid #888;
|
|
}
|
|
.link-wrapper:hover .hidden-wrapper {
|
|
display: block;
|
|
}
|
|
|
|
.link-wrapper input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.link-wrapper button {
|
|
border: none;
|
|
background: none;
|
|
font: inherit;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
</style>
|
|
<script src="assets/vendor/prefixfree.min.js"></script>
|
|
|
|
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
|
|
<script src="https://www.google-analytics.com/ga.js" async></script>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="intro" data-src="assets/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>Result:</p>
|
|
<pre><code></code></pre>
|
|
|
|
<div id="options" style="margin: 1em 0">
|
|
<label><input type="checkbox" id="option-show-tokens"> Show tokens</label>
|
|
<div class="link-wrapper">
|
|
<a id="share-link" href="" style="float: right;">Share</a>
|
|
<div class="hidden-wrapper">
|
|
<input id="share-link-input" type="text" readonly onClick="this.select();"/>
|
|
<button type="button" id="copy-share-link" onclick="copyShare();">Copy to clipboard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p id="language">
|
|
<strong>Language:</strong>
|
|
</p>
|
|
</form>
|
|
</section>
|
|
|
|
<footer data-src="assets/templates/footer.html" data-type="text/html"></footer>
|
|
|
|
<script src="assets/vendor/utopia.js"></script>
|
|
<script src="components/prism-core.js"></script>
|
|
<script src="plugins/autoloader/prism-autoloader.js" data-autoloader-path="components/"></script>
|
|
<script>
|
|
Prism.plugins.autoloader.use_minified = false;
|
|
</script>
|
|
<script src="components.js"></script>
|
|
<script src="assets/code.js"></script>
|
|
<script src="assets/vendor/promise.js"></script>
|
|
|
|
<script>
|
|
(function() {
|
|
/** @type {HTMLFormElement} */
|
|
var form = $('form');
|
|
/** @type {HTMLElement} */
|
|
var code = $('code', form);
|
|
var languages = components.languages;
|
|
|
|
function highlightCode() {
|
|
var newCode = document.createElement('code');
|
|
newCode.textContent = code.textContent;
|
|
newCode.className = code.className;
|
|
|
|
Prism.highlightElement(newCode);
|
|
|
|
code.parentElement.replaceChild(newCode, code);
|
|
code = newCode;
|
|
};
|
|
|
|
function getHashParams() {
|
|
return parseUrlParams((location.hash || '').substr(1));
|
|
}
|
|
function setHashParams(params) {
|
|
location.hash = stringifyUrlParams(params);
|
|
}
|
|
function updateHashLanguage(lang) {
|
|
var params = getHashParams();
|
|
params.language = lang;
|
|
setHashParams(params);
|
|
}
|
|
function getHashLanguage() {
|
|
return getHashParams().language;
|
|
}
|
|
function getRadio(lang) {
|
|
return $('input[name=language][value="' + lang + '"]');
|
|
}
|
|
|
|
function copyShare() {
|
|
const link = $('#share-link').href;
|
|
try {
|
|
navigator.clipboard.writeText(link).then(function () {
|
|
$('#copy-share-link').textContent = 'Copied!';
|
|
}, function () {
|
|
$('#copy-share-link').textContent = 'Failed to copy!';
|
|
});
|
|
} catch (e) {
|
|
$('#copy-share-link').textContent = 'Failed to copy!';
|
|
}
|
|
setTimeout(function () {
|
|
$('#copy-share-link').textContent = 'Copy to clipboard';
|
|
}, 5000);
|
|
}
|
|
window.copyShare = copyShare;
|
|
|
|
window.onhashchange = function () {
|
|
var input = getRadio(getHashLanguage());
|
|
|
|
if (input && !input.checked) {
|
|
input.checked = true;
|
|
input.onclick();
|
|
}
|
|
}
|
|
|
|
|
|
for (var id in languages) {
|
|
if (id == 'meta') {
|
|
continue;
|
|
}
|
|
|
|
var name = languages[id].title || languages[id];
|
|
|
|
$u.element.create('label', {
|
|
attributes: {
|
|
'data-id': id
|
|
},
|
|
contents: [
|
|
{
|
|
tag: 'input',
|
|
properties: {
|
|
type: 'radio',
|
|
name: 'language',
|
|
value: id,
|
|
onclick: function () {
|
|
var lang = this.value;
|
|
code.className = 'language-' + lang;
|
|
code.textContent = code.textContent;
|
|
updateHashLanguage(lang);
|
|
updateShareLink();
|
|
|
|
highlightCode();
|
|
}
|
|
}
|
|
}, name
|
|
],
|
|
inside: '#language'
|
|
});
|
|
}
|
|
|
|
|
|
var radios = $$('input[name=language]');
|
|
var selectedRadio = radios[0];
|
|
|
|
var lastLanguageRadio = getRadio(getHashLanguage());
|
|
if (lastLanguageRadio) {
|
|
selectedRadio = lastLanguageRadio;
|
|
}
|
|
|
|
selectedRadio.checked = true;
|
|
selectedRadio.onclick();
|
|
|
|
var textarea = $('textarea', form);
|
|
|
|
try {
|
|
var hashText = getHashParams().text;
|
|
if (hashText) {
|
|
textarea.value = hashText;
|
|
} else {
|
|
var lastCode = sessionStorage.getItem('test-code');
|
|
if (lastCode) {
|
|
textarea.value = lastCode;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
// ignore sessionStorage errors
|
|
}
|
|
|
|
textarea.oninput = function() {
|
|
var codeText = this.value || '';
|
|
code.textContent = codeText;
|
|
highlightCode();
|
|
|
|
updateShareLink();
|
|
|
|
try {
|
|
sessionStorage.setItem('test-code', codeText);
|
|
} catch (error) {
|
|
// ignore sessionStorage errors
|
|
}
|
|
}
|
|
textarea.oninput();
|
|
|
|
$('#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();
|
|
|
|
function updateShareLink() {
|
|
var params = {
|
|
language: /\blang(?:uage)?-([\w-]+)\b/i.exec(code.className)[1],
|
|
text: code.textContent,
|
|
};
|
|
|
|
$('#share-link').href = '#' + stringifyUrlParams(params);
|
|
$('#share-link-input').value = $('#share-link').href;
|
|
}
|
|
|
|
|
|
/**
|
|
* @param {Record<string, string | number | boolean>} params
|
|
* @returns {string}
|
|
*/
|
|
function stringifyUrlParams(params) {
|
|
var parts = [];
|
|
for (var name in params) {
|
|
if (params.hasOwnProperty(name)) {
|
|
var value = params[name];
|
|
if (typeof value === 'boolean') {
|
|
if (value) {
|
|
parts.push(name);
|
|
}
|
|
} else {
|
|
parts.push(name + '=' + encodeURIComponent(value));
|
|
}
|
|
}
|
|
}
|
|
return parts.join('&');
|
|
}
|
|
/**
|
|
* @param {string} str
|
|
* @returns {Record<string, string | boolean>}
|
|
*/
|
|
function parseUrlParams(str) {
|
|
/** @type {Record<string, string | boolean>} */
|
|
var params = {};
|
|
str.split(/&/g).filter(Boolean).forEach(function (part) {
|
|
var parts = part.split(/=/);
|
|
var name = parts[0];
|
|
if (parts.length === 1) {
|
|
params[name] = true;
|
|
} else {
|
|
params[name] = decodeURIComponent(parts[1]);
|
|
}
|
|
});
|
|
return params;
|
|
}
|
|
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|