108 lines
3 KiB
HTML
108 lines
3 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>
|
||
|
|
.editor textarea {
|
||
|
|
display: block; width: 100%;
|
||
|
|
height: 15em;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre code,
|
||
|
|
pre output {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre output {
|
||
|
|
display: block; overflow: auto;
|
||
|
|
padding: 0.5em;
|
||
|
|
background: #F0F0F0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hljs-debug {
|
||
|
|
color: red; font-weight: bold;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>highlight.js developer</h1>
|
||
|
|
|
||
|
|
<div class="editor">
|
||
|
|
<div>
|
||
|
|
<textarea>Put code here…</textarea>
|
||
|
|
<p>
|
||
|
|
<button>Update highlighting</button>
|
||
|
|
Language: <select class="languages"><option value="">(Auto)</option></select>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p>Rendered in <span class="rendering_time">...</span> ms [<span class="rendering_stats">...</span>]</p>
|
||
|
|
<pre><code class="hljs">...</code></pre>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p>Markup
|
||
|
|
<pre><output>...</output></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="../build/highlight.pack.js"></script>
|
||
|
|
<script src="../demo/jquery-2.1.1.min.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(document).ready(function() {
|
||
|
|
var select = $('.languages');
|
||
|
|
hljs.listLanguages().forEach(function(l) {
|
||
|
|
select.append('<option>' + l + '</option>');
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.editor button').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;
|
||
|
|
editor.find('.hljs').html(result.value);
|
||
|
|
var rendering_stats = result.language + ': ' + (result.relevance || result.r);
|
||
|
|
if (result.second_best) {
|
||
|
|
rendering_stats += ', ' + result.second_best.language + ': ' + (result.second_best.relevance || result.second_best.r);
|
||
|
|
}
|
||
|
|
editor.find('.rendering_stats').text(rendering_stats);
|
||
|
|
editor.find('.rendering_time').text(rendering_time);
|
||
|
|
editor.find('output').text(result.value);
|
||
|
|
SourceStore.save(source, language);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
var SourceStore;
|
||
|
|
(function(){
|
||
|
|
SourceStore = {
|
||
|
|
save: function(source, lang){
|
||
|
|
localStorage.setItem(key_SOURCE, source);
|
||
|
|
localStorage.setItem(key_LANG, lang);
|
||
|
|
},
|
||
|
|
resolve: function(){
|
||
|
|
return [
|
||
|
|
localStorage.getItem(key_SOURCE),
|
||
|
|
localStorage.getItem(key_LANG)
|
||
|
|
];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var key_SOURCE = 'hljs-source';
|
||
|
|
var key_LANG = 'hljs-lang';
|
||
|
|
$(function(){
|
||
|
|
var data = SourceStore.resolve();
|
||
|
|
if (data == null) return;
|
||
|
|
$('.editor textarea').val(data[0]);
|
||
|
|
$('.editor .languages').val(data[1]);
|
||
|
|
$('.editor button').click();
|
||
|
|
});
|
||
|
|
}());
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|