webdash-readme-preview
Version:
Preview your README.md straight from the dashboard
108 lines (97 loc) • 3.04 kB
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>