123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <!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>
|