From ffd4c36830e6789b37581c1b666a12545c07ca4e Mon Sep 17 00:00:00 2001 From: Carlos Villavicencio Date: Tue, 15 May 2018 18:19:55 -0500 Subject: Introducing syntax highlight --- client/README.md | 12 ++++++++++- client/client.js | 47 +++++++++++++++++++++++++++++++++++++++++ client/index.html | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 120 insertions(+), 2 deletions(-) (limited to 'client') diff --git a/client/README.md b/client/README.md index 292daab..4172271 100644 --- a/client/README.md +++ b/client/README.md @@ -1 +1,11 @@ -(TODO) +## Development +A quick way to start a server is to use Node.js `http-server`: + +``` +npm install http-server -g +cd client +http-server +``` + +## Deployment +(TODO) \ No newline at end of file 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 @ where 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 */ diff --git a/client/index.html b/client/index.html index d71c62d..9abdebc 100644 --- a/client/index.html +++ b/client/index.html @@ -1 +1,62 @@ -hack.chat
\ No newline at end of file + + + + + + + hack.chat + + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+ + + + + \ No newline at end of file -- cgit v1.2.1