diff options
author | Carlos Villavicencio <carlos.po5i@gmail.com> | 2018-05-16 01:19:55 +0200 |
---|---|---|
committer | Carlos Villavicencio <carlos.po5i@gmail.com> | 2018-05-16 01:19:55 +0200 |
commit | ffd4c36830e6789b37581c1b666a12545c07ca4e (patch) | |
tree | b647850fec94aaf843f386bc7354e75df24da338 /client/client.js | |
parent | Merge pull request #10 from bacn/master (diff) | |
download | hackchat-ffd4c36830e6789b37581c1b666a12545c07ca4e.tar.gz hackchat-ffd4c36830e6789b37581c1b666a12545c07ca4e.zip |
Introducing syntax highlight
Diffstat (limited to 'client/client.js')
-rw-r--r-- | client/client.js | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/client/client.js b/client/client.js index ff2decc..d7706cd 100644 --- a/client/client.js +++ b/client/client.js @@ -18,6 +18,7 @@ var frontpage = [ "Formatting:", "Whitespace is preserved, so source code can be pasted verbatim.", "Surround LaTeX with a dollar sign for inline style $\\zeta(2) = \\pi^2/6$, and two dollars for display. $$\\int_0^1 \\int_0^1 \\frac{1}{1-xy} dx dy = \\frac{\\pi^2}{6}$$", + "For syntax highlight, the first line of the code block should start with @<format> where <format> can be html, js or any known format", "", "Current Github: https://github.com/hack-chat includes server and client source along with other resources", "", @@ -213,6 +214,18 @@ function pushMessage(args) { } } + if ($('#syntax-highlight').checked) { + if (textEl.textContent.indexOf('@') == 0) { + var lang = textEl.textContent.split('\n', 1)[0].replace('@', ''); + var codeEl = document.createElement('code'); + codeEl.classList.add(lang); + codeEl.textContent = textEl.textContent.replace('@' + lang + '\n', ''); + hljs.highlightBlock(codeEl); + textEl.innerHTML = ''; + textEl.appendChild(codeEl); + } + } + messageEl.appendChild(textEl); // Scroll to bottom @@ -522,7 +535,19 @@ var schemes = [ 'tomorrow' ]; +var highlights = [ + 'agate', + 'androidstudio', + 'darcula', + 'github', + 'rainbow', + 'tomorrow', + 'xcode', + 'zenburn' +] + var currentScheme = 'atelier-dune'; +var currentHighlight = 'darcula'; function setScheme(scheme) { currentScheme = scheme; @@ -530,6 +555,12 @@ function setScheme(scheme) { localStorageSet('scheme', scheme); } +function setHighlight(scheme) { + currentHighlight = scheme; + $('#highlight-link').href = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/" + scheme + ".min.css"; + localStorageSet('highlight', scheme); +} + // Add scheme options to dropdown selector schemes.forEach(function (scheme) { var option = document.createElement('option'); @@ -538,16 +569,32 @@ schemes.forEach(function (scheme) { $('#scheme-selector').appendChild(option); }); +highlights.forEach(function (scheme) { + var option = document.createElement('option'); + option.textContent = scheme; + option.value = scheme; + $('#highlight-selector').appendChild(option); +}); + $('#scheme-selector').onchange = function (e) { setScheme(e.target.value); } +$('#highlight-selector').onchange = function (e) { + setHighlight(e.target.value); +} + // Load sidebar configaration values from local storage if available if (localStorageGet('scheme')) { setScheme(localStorageGet('scheme')); } +if (localStorageGet('highlight')) { + setHighlight(localStorageGet('highlight')); +} + $('#scheme-selector').value = currentScheme; +$('#highlight-selector').value = currentHighlight; /* main */ |