443 lines
17 KiB
HTML
443 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>highlight.js developer</title>
|
|
|
|
<link rel="stylesheet" href="../src/styles/default.css">
|
|
|
|
<style>
|
|
body { padding: 20px;
|
|
font-family: sans-serif;
|
|
}
|
|
.editor textarea {
|
|
display: block; width: 100%;
|
|
height: 15em;
|
|
}
|
|
h3 {
|
|
margin:0 0 0.5em;
|
|
font-size:1.1em;
|
|
}
|
|
|
|
pre code,
|
|
pre output {
|
|
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.15rem;
|
|
display: block;
|
|
padding:20px !important;
|
|
}
|
|
|
|
pre output {
|
|
display: block; overflow: auto;
|
|
padding: 0.5em;
|
|
background: #F0F0F0;
|
|
}
|
|
|
|
.hljs-debug {
|
|
color: red; font-weight: bold;
|
|
}
|
|
|
|
.visible-structure pre code span {
|
|
display: inline-block;
|
|
padding:2px;
|
|
margin: 3px 0;
|
|
border: 1px dashed #777;
|
|
border-radius: 5px;
|
|
white-space: pre;
|
|
}
|
|
|
|
.visible-structure pre code span:before {
|
|
display: inline-block;
|
|
content: attr(data-klass);
|
|
font-size: 70%;
|
|
background: #693;
|
|
padding:1px 5px;
|
|
border-radius: 3px;
|
|
color:white;
|
|
margin-right:0.5em;
|
|
font-weight: normal;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="editor">
|
|
<h3>Code</h3>
|
|
<div>
|
|
<textarea>Put code here…</textarea>
|
|
<p>
|
|
<button id="update-highlighting">Update highlighting</button>
|
|
<button id="show-structure">Show/hide structure</button>
|
|
Language: <select class="languages"><option value="">(Auto)</option></select>
|
|
Theme: <select class="theme">
|
|
<option>stackoverflow-light.css</option>
|
|
<option>tokyo-night-dark.css</option>
|
|
<option>tokyo-night-light.css</option>
|
|
<option>qtcreator-light.css</option>
|
|
<option>codepen-embed.css</option>
|
|
<option>docco.css</option>
|
|
<option>github.css</option>
|
|
<option>github-dark.css</option>
|
|
<option>github-dark-dimmed.css</option>
|
|
<option>gml.css</option>
|
|
<option>googlecode.css</option>
|
|
<option>gradient-dark.css</option>
|
|
<option>stackoverflow-dark.css</option>
|
|
<option>grayscale.css</option>
|
|
<option>gml.css</option>
|
|
<option>srcery.css</option>
|
|
<option>sunburst.css</option>
|
|
<option>pojoaque.jpg</option>
|
|
<option>mono-blue.css</option>
|
|
<option>isbl-editor-light.css</option>
|
|
<option>a11y-dark.css</option>
|
|
<option>nord.css</option>
|
|
<option>color-brewer.css</option>
|
|
<option>kimbie-light.css</option>
|
|
<option>routeros.css</option>
|
|
<option>kimbie-dark.css</option>
|
|
<option>shades-of-purple.css</option>
|
|
<option>arduino-light.css</option>
|
|
<option>xcode.css</option>
|
|
<option>dark.css</option>
|
|
<option>ir-black.css</option>
|
|
<option>obsidian.css</option>
|
|
<option>paraiso-dark.css</option>
|
|
<option>pojoaque.css</option>
|
|
<option>vs2015.css</option>
|
|
<option>a11y-light.css</option>
|
|
<option>tomorrow-night-blue.css</option>
|
|
<option>monokai.css</option>
|
|
<option>idea.css</option>
|
|
<option>intellij-light.css</option>
|
|
<option>purebasic.css</option>
|
|
<option>qtcreator-dark.css</option>
|
|
<option>androidstudio.css</option>
|
|
<option>github-gist.css</option>
|
|
<option>xt256.css</option>
|
|
<option>agate.css</option>
|
|
<option>vs.css</option>
|
|
<option>far.css</option>
|
|
<option>felipec.css</option>
|
|
<option>default.css</option>
|
|
<option>base16/pico.css</option>
|
|
<option>base16/porple.css</option>
|
|
<option>base16/gruvbox-light-soft.css</option>
|
|
<option>base16/equilibrium-dark.css</option>
|
|
<option>base16/atelier-cave-light.css</option>
|
|
<option>base16/windows-95.css</option>
|
|
<option>base16/atelier-estuary.css</option>
|
|
<option>base16/apprentice.css</option>
|
|
<option>base16/default-dark.css</option>
|
|
<option>base16/apathy.css</option>
|
|
<option>base16/atelier-savanna.css</option>
|
|
<option>base16/atelier-cave.css</option>
|
|
<option>base16/brewer.css</option>
|
|
<option>base16/eighties.css</option>
|
|
<option>base16/atelier-dune-light.css</option>
|
|
<option>base16/windows-high-contrast.css</option>
|
|
<option>base16/atelier-savanna-light.css</option>
|
|
<option>base16/github.css</option>
|
|
<option>base16/windows-nt.css</option>
|
|
<option>base16/windows-nt-light.css</option>
|
|
<option>base16/hopscotch.css</option>
|
|
<option>base16/equilibrium-gray-light.css</option>
|
|
<option>base16/atelier-heath.css</option>
|
|
<option>base16/ia-dark.css</option>
|
|
<option>base16/gruvbox-dark-soft.css</option>
|
|
<option>base16/solar-flare.css</option>
|
|
<option>base16/material-vivid.css</option>
|
|
<option>base16/google-light.css</option>
|
|
<option>base16/onedark.css</option>
|
|
<option>base16/summerfruit-light.css</option>
|
|
<option>base16/eva.css</option>
|
|
<option>base16/marrakesh.css</option>
|
|
<option>base16/equilibrium-gray-dark.css</option>
|
|
<option>base16/espresso.css</option>
|
|
<option>base16/gruvbox-dark-pale.css</option>
|
|
<option>base16/black-metal-gorgoroth.css</option>
|
|
<option>base16/grayscale-light.css</option>
|
|
<option>base16/black-metal-immortal.css</option>
|
|
<option>base16/circus.css</option>
|
|
<option>base16/atelier-plateau.css</option>
|
|
<option>base16/nord.css</option>
|
|
<option>base16/equilibrium-light.css</option>
|
|
<option>base16/brush-trees-dark.css</option>
|
|
<option>base16/gruvbox-dark-medium.css</option>
|
|
<option>base16/gruvbox-dark-hard.css</option>
|
|
<option>base16/material.css</option>
|
|
<option>base16/papercolor-light.css</option>
|
|
<option>base16/nebula.css</option>
|
|
<option>base16/london-tube.css</option>
|
|
<option>base16/black-metal-marduk.css</option>
|
|
<option>base16/decaf.css</option>
|
|
<option>base16/pasque.css</option>
|
|
<option>base16/grayscale-dark.css</option>
|
|
<option>base16/heetch-light.css</option>
|
|
<option>base16/atelier-heath-light.css</option>
|
|
<option>base16/gruvbox-light-hard.css</option>
|
|
<option>base16/synth-midnight-terminal-dark.css</option>
|
|
<option>base16/atelier-dune.css</option>
|
|
<option>base16/woodland.css</option>
|
|
<option>base16/isotope.css</option>
|
|
<option>base16/atelier-forest.css</option>
|
|
<option>base16/hardcore.css</option>
|
|
<option>base16/default-light.css</option>
|
|
<option>base16/atelier-sulphurpool.css</option>
|
|
<option>base16/material-darker.css</option>
|
|
<option>base16/windows-95-light.css</option>
|
|
<option>base16/classic-dark.css</option>
|
|
<option>base16/ir-black.css</option>
|
|
<option>base16/dirtysea.css</option>
|
|
<option>base16/seti-ui.css</option>
|
|
<option>base16/black-metal-venom.css</option>
|
|
<option>base16/darkmoss.css</option>
|
|
<option>base16/harmonic16-dark.css</option>
|
|
<option>base16/darcula.css</option>
|
|
<option>base16/mellow-purple.css</option>
|
|
<option>base16/mexico-light.css</option>
|
|
<option>base16/flat.css</option>
|
|
<option>base16/summercamp.css</option>
|
|
<option>base16/silk-dark.css</option>
|
|
<option>base16/icy-dark.css</option>
|
|
<option>base16/papercolor-dark.css</option>
|
|
<option>base16/brogrammer.css</option>
|
|
<option>base16/3024.css</option>
|
|
<option>base16/twilight.css</option>
|
|
<option>base16/atelier-lakeside.css</option>
|
|
<option>base16/monokai.css</option>
|
|
<option>base16/solarized-light.css</option>
|
|
<option>base16/material-lighter.css</option>
|
|
<option>base16/edge-dark.css</option>
|
|
<option>base16/xcode-dusk.css</option>
|
|
<option>base16/summerfruit-dark.css</option>
|
|
<option>base16/atelier-forest-light.css</option>
|
|
<option>base16/black-metal.css</option>
|
|
<option>base16/dracula.css</option>
|
|
<option>base16/solarized-dark.css</option>
|
|
<option>base16/cupertino.css</option>
|
|
<option>base16/phd.css</option>
|
|
<option>base16/bright.css</option>
|
|
<option>base16/mocha.css</option>
|
|
<option>base16/ashes.css</option>
|
|
<option>base16/ros-pine.css</option>
|
|
<option>base16/nova.css</option>
|
|
<option>base16/black-metal-dark-funeral.css</option>
|
|
<option>base16/zenburn.css</option>
|
|
<option>base16/chalk.css</option>
|
|
<option>base16/brush-trees.css</option>
|
|
<option>base16/rebecca.css</option>
|
|
<option>base16/humanoid-light.css</option>
|
|
<option>base16/qualia.css</option>
|
|
<option>base16/ocean.css</option>
|
|
<option>base16/sandcastle.css</option>
|
|
<option>base16/silk-light.css</option>
|
|
<option>base16/outrun-dark.css</option>
|
|
<option>base16/synth-midnight-terminal-light.css</option>
|
|
<option>base16/windows-10-light.css</option>
|
|
<option>base16/humanoid-dark.css</option>
|
|
<option>base16/kimber.css</option>
|
|
<option>base16/helios.css</option>
|
|
<option>base16/railscasts.css</option>
|
|
<option>base16/ia-light.css</option>
|
|
<option>base16/unikitty-dark.css</option>
|
|
<option>base16/cupcake.css</option>
|
|
<option>base16/embers.css</option>
|
|
<option>base16/snazzy.css</option>
|
|
<option>base16/edge-light.css</option>
|
|
<option>base16/danqing.css</option>
|
|
<option>base16/black-metal-khold.css</option>
|
|
<option>base16/horizon-dark.css</option>
|
|
<option>base16/tomorrow-night.css</option>
|
|
<option>base16/heetch-dark.css</option>
|
|
<option>base16/windows-high-contrast-light.css</option>
|
|
<option>base16/atelier-plateau-light.css</option>
|
|
<option>base16/darktooth.css</option>
|
|
<option>base16/windows-10.css</option>
|
|
<option>base16/vulcan.css</option>
|
|
<option>base16/harmonic16-light.css</option>
|
|
<option>base16/macintosh.css</option>
|
|
<option>base16/fruit-soda.css</option>
|
|
<option>base16/google-dark.css</option>
|
|
<option>base16/classic-light.css</option>
|
|
<option>base16/paraiso.css</option>
|
|
<option>base16/black-metal-nile.css</option>
|
|
<option>base16/one-light.css</option>
|
|
<option>base16/codeschool.css</option>
|
|
<option>base16/shapeshifter.css</option>
|
|
<option>base16/dark-violet.css</option>
|
|
<option>base16/gigavolt.css</option>
|
|
<option>base16/unikitty-light.css</option>
|
|
<option>base16/atelier-seaside-light.css</option>
|
|
<option>base16/tomorrow.css</option>
|
|
<option>base16/ros-pine-dawn.css</option>
|
|
<option>base16/framer.css</option>
|
|
<option>base16/black-metal-mayhem.css</option>
|
|
<option>base16/spacemacs.css</option>
|
|
<option>base16/atelier-seaside.css</option>
|
|
<option>base16/material-palenight.css</option>
|
|
<option>base16/green-screen.css</option>
|
|
<option>base16/horizon-light.css</option>
|
|
<option>base16/bespin.css</option>
|
|
<option>base16/oceanicnext.css</option>
|
|
<option>base16/black-metal-burzum.css</option>
|
|
<option>base16/ros-pine-moon.css</option>
|
|
<option>base16/eva-dim.css</option>
|
|
<option>base16/black-metal-bathory.css</option>
|
|
<option>base16/sagelight.css</option>
|
|
<option>base16/atelier-lakeside-light.css</option>
|
|
<option>base16/tango.css</option>
|
|
<option>base16/pop.css</option>
|
|
<option>base16/gruvbox-light-medium.css</option>
|
|
<option>base16/atlas.css</option>
|
|
<option>base16/tender.css</option>
|
|
<option>base16/atelier-estuary-light.css</option>
|
|
<option>base16/materia.css</option>
|
|
<option>base16/solar-flare-light.css</option>
|
|
<option>base16/atelier-sulphurpool-light.css</option>
|
|
<option>atom-one-light.css</option>
|
|
<option>monokai-sublime.css</option>
|
|
<option>paraiso-light.css</option>
|
|
<option>tomorrow-night-bright.css</option>
|
|
<option>googlecode.css</option>
|
|
<option>atom-one-dark.css</option>
|
|
<option>ascetic.css</option>
|
|
<option>rainbow.css</option>
|
|
<option>gradient-light.css</option>
|
|
<option>magula.css</option>
|
|
<option>devibeans.css</option>
|
|
<option>arta.css</option>
|
|
<option>nnfx-light.css</option>
|
|
<option>hybrid.css</option>
|
|
<option>school-book.css</option>
|
|
<option>brown-papersq.png</option>
|
|
<option>lightfair.css</option>
|
|
<option>an-old-hope.css</option>
|
|
<option>gradient-dark.css</option>
|
|
<option>nnfx-dark.css</option>
|
|
<option>isbl-editor-dark.css</option>
|
|
<option>foundation.css</option>
|
|
<option>lioshi.css</option>
|
|
<option>brown-paper.css</option>
|
|
<option>night-owl.css</option>
|
|
<option>atom-one-dark-reasonable.css</option>
|
|
<option>panda-syntax-dark.css</option>
|
|
<option>panda-syntax-light.css</option>
|
|
</select>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3>Rendered in <span class="rendering_time">...</span> ms [<span class="rendering_stats">...</span>]</h3>
|
|
<pre><code class="hljs">...</code></pre>
|
|
</div>
|
|
<div>
|
|
<h3>Markup</h3>
|
|
<pre><output>...</output></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../build/highlight.js"></script>
|
|
<script src="vendor/jquery-2.1.1.min.js"></script>
|
|
<script>
|
|
hljs.debugMode();
|
|
|
|
function saveSettings() {
|
|
var editor = $("body .editor");
|
|
var language = editor.find('.languages').val();
|
|
var code = editor.find('textarea').val();
|
|
var theme = $(".theme").val();
|
|
SourceStore.save({
|
|
language, code, theme
|
|
})
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
var select = $('.languages');
|
|
hljs.listLanguages().forEach(function(l) {
|
|
select.append('<option>' + l + '</option>');
|
|
});
|
|
|
|
$(".theme").change(function(e) {
|
|
var css = e.target.value;
|
|
var link = $("link[rel=stylesheet]")[0]
|
|
link.href = `../src/styles/${css}`
|
|
localStorage.setItem(key_THEME, css);
|
|
})
|
|
|
|
function update() {
|
|
var editor = $(this).parents('.editor');
|
|
var language = editor.find('.languages').val();
|
|
var source = editor.find('textarea').val();
|
|
var start_time = +new Date();
|
|
var result = hljs.getLanguage(language) ? hljs.highlight(source, { language, ignoreIllegals: true}) : hljs.highlightAuto(source);
|
|
var rendering_time = +new Date() - start_time;
|
|
editor.find('.hljs').html(result.value);
|
|
$(".hljs span").each((_,el) => {
|
|
$(el).attr("data-klass", el.className.replace("hljs-",""))
|
|
})
|
|
var rendering_stats = result.language + ': relevance ' + (result.relevance );
|
|
if (result.secondBest) {
|
|
rendering_stats += ', ' + result.secondBest.language + ': ' + (result.secondBest.relevance || result.secondBest.r);
|
|
}
|
|
editor.find('.rendering_stats').text(rendering_stats);
|
|
editor.find('.rendering_time').text(rendering_time);
|
|
editor.find('output').text(result.value);
|
|
saveSettings();
|
|
|
|
};
|
|
|
|
$('.editor button#update-highlighting').click(update);
|
|
$(".languages").change(update);
|
|
|
|
$('.editor button#show-structure').click(function(e) {
|
|
var editor = $(this).parents('.editor');
|
|
editor.toggleClass('visible-structure');
|
|
|
|
localStorage.setItem(key_STRUCTURE, editor.hasClass('visible-structure'));
|
|
});
|
|
});
|
|
|
|
var SourceStore;
|
|
var key_CODE = 'hljs-source';
|
|
var key_LANGUAGE = 'hljs-lang';
|
|
var key_THEME = 'hljs-theme';
|
|
var key_STRUCTURE = 'hljs-structure';
|
|
(function(){
|
|
SourceStore = {
|
|
save: function({code, language, theme}){
|
|
localStorage.setItem(key_CODE, code);
|
|
localStorage.setItem(key_LANGUAGE, language);
|
|
localStorage.setItem(key_THEME, theme);
|
|
},
|
|
resolve: function(){
|
|
let code = localStorage.getItem(key_CODE)
|
|
if (!code) return null;
|
|
|
|
return {
|
|
code,
|
|
language: localStorage.getItem(key_LANGUAGE),
|
|
theme: localStorage.getItem(key_THEME) || 'default.css',
|
|
};
|
|
}
|
|
};
|
|
$(function(){
|
|
var data = SourceStore.resolve();
|
|
if (!data) return;
|
|
$('.editor textarea').val(data.code);
|
|
$('.editor .languages').val(data.language);
|
|
$('.theme').val(data.theme);
|
|
$('.editor button').first().click();
|
|
|
|
if (localStorage.getItem(key_STRUCTURE) === "true") {
|
|
var editor = $('body .editor');
|
|
editor.toggleClass('visible-structure');
|
|
}
|
|
|
|
var link = $("link[rel=stylesheet]")[0]
|
|
link.href = `../src/styles/${data.theme}`
|
|
});
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html>
|