1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<!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;
}
.visible-structure pre code span {
display: block;
padding: 0.5em;
margin: 0.5em;
border: 1px dashed black;
position: relative;
white-space: pre;
}
.visible-structure pre code span:before {
display: block;
content: attr(class);
color: black;
font-size: 70%;
float:right;
margin-top: -0.5em;
}
</style>
</head>
<body>
<h1>highlight.js developer</h1>
<div class="editor">
<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>
</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_browser/highlight.js"></script>
<script src="../debian/jquery.min.js"></script>
<script>
hljs.debugMode();
$(document).ready(function() {
var select = $('.languages');
hljs.listLanguages().forEach(function(l) {
select.append('<option>' + l + '</option>');
});
$('.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;
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);
});
$('.editor button#show-structure').click(function(e) {
var editor = $(this).parents('.editor');
editor.toggleClass('visible-structure');
});
});
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>
|
