<!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" id="app">
<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>
<highlightjs :language="language" :code="code" />
</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 src="vendor/vue.js"></script>
<script src="vendor/highlight-vue.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);
})
$('.editor button#update-highlighting').click(function(e) {
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(language, source, true) : hljs.highlightAuto(source);
var rendering_time = +new Date() - start_time;
vue.code = source;
vue.language = hljs.getLanguage(language) ? language : '';
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#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}`
});
}());
Vue.use(hljsVuePlugin);
let vue = new Vue({
el: '#app',
data: { code: "", language: "" },
methods: {
refreshKlass: function() {
this.$nextTick(() => {
$(".hljs span").each((_,el) => {
$(el).attr("data-klass", el.className.replace(/hljs-/g,""))
})
})
}
},
watch: {
code: function(){
this.refreshKlass();
},
language: function(){
this.refreshKlass();
}
}
});
</script>
</body>
</html>