hack.chat

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 From b4e36eff3867d80b644b0045bbf8da2d6bf5068d Mon Sep 17 00:00:00 2001 From: Carlos Villavicencio Date: Wed, 16 May 2018 13:22:54 -0500 Subject: Changed @ for # as highlight symbol --- client/client.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) (limited to 'client') diff --git a/client/client.js b/client/client.js index d7706cd..e597737 100644 --- a/client/client.js +++ b/client/client.js @@ -18,7 +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", + "For syntax highlight, the first line of the code block must begin 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", "", @@ -201,7 +201,18 @@ function pushMessage(args) { textEl.textContent = args.text || ''; textEl.innerHTML = textEl.innerHTML.replace(/(\?|https?:\/\/)\S+?(?=[,.!?:)]?\s|$)/g, parseLinks); - if ($('#parse-latex').checked) { + if ($('#syntax-highlight').checked) { + if (textEl.textContent.indexOf('#') == 0) { + var lang = textEl.textContent.split(/\s+/g)[0].replace('#', ''); + var codeEl = document.createElement('code'); + codeEl.classList.add(lang); + var content = textEl.textContent.replace('#' + lang, ''); + codeEl.textContent = content.trim(); + hljs.highlightBlock(codeEl); + textEl.innerHTML = ''; + textEl.appendChild(codeEl); + } + } else if ($('#parse-latex').checked) { // Temporary hotfix for \rule spamming, see https://github.com/Khan/KaTeX/issues/109 textEl.innerHTML = textEl.innerHTML.replace(/\\rule|\\\\\s*\[.*?\]/g, ''); try { @@ -214,18 +225,6 @@ 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 -- cgit v1.2.1 From 345dbfec41062408171b521f297f03e122f762c0 Mon Sep 17 00:00:00 2001 From: marzavec Date: Thu, 17 May 2018 11:13:35 -0500 Subject: Highlight Hotfix --- client/client.js | 40 +++++++++++++++++++--------------------- 1 file changed, 19 insertions(+), 21 deletions(-) (limited to 'client') diff --git a/client/client.js b/client/client.js index e597737..1c40f01 100644 --- a/client/client.js +++ b/client/client.js @@ -36,13 +36,13 @@ function $(query) { function localStorageGet(key) { try { return window.localStorage[key] - } catch(e) {} + } catch(e) { } } function localStorageSet(key, val) { try { window.localStorage[key] = val - } catch(e) {} + } catch(e) { } } var ws; @@ -158,13 +158,13 @@ function pushMessage(args) { if (args.nick == myNick) { messageEl.classList.add('me'); - } else if (args.nick == '!') { + } else if (args.nick == '!') { messageEl.classList.add('warn'); - } else if (args.nick == '*') { + } else if (args.nick == '*') { messageEl.classList.add('info'); - } else if (args.admin) { + } else if (args.admin) { messageEl.classList.add('admin'); - } else if (args.mod) { + } else if (args.mod) { messageEl.classList.add('mod'); } @@ -201,17 +201,15 @@ function pushMessage(args) { textEl.textContent = args.text || ''; textEl.innerHTML = textEl.innerHTML.replace(/(\?|https?:\/\/)\S+?(?=[,.!?:)]?\s|$)/g, parseLinks); - if ($('#syntax-highlight').checked) { - if (textEl.textContent.indexOf('#') == 0) { - var lang = textEl.textContent.split(/\s+/g)[0].replace('#', ''); - var codeEl = document.createElement('code'); - codeEl.classList.add(lang); - var content = textEl.textContent.replace('#' + lang, ''); - codeEl.textContent = content.trim(); - hljs.highlightBlock(codeEl); - textEl.innerHTML = ''; - textEl.appendChild(codeEl); - } + if ($('#syntax-highlight').checked && textEl.textContent.indexOf('#') == 0) { + var lang = textEl.textContent.split(/\s+/g)[0].replace('#', ''); + var codeEl = document.createElement('code'); + codeEl.classList.add(lang); + var content = textEl.textContent.replace('#' + lang, ''); + codeEl.textContent = content.trim(); + hljs.highlightBlock(codeEl); + textEl.innerHTML = ''; + textEl.appendChild(codeEl); } else if ($('#parse-latex').checked) { // Temporary hotfix for \rule spamming, see https://github.com/Khan/KaTeX/issues/109 textEl.innerHTML = textEl.innerHTML.replace(/\\rule|\\\\\s*\[.*?\]/g, ''); @@ -220,7 +218,7 @@ function pushMessage(args) { { left: "$$", right: "$$", display: true }, { left: "$", right: "$", display: false }, ]}) - } catch (e) { + } catch (e) { console.warn(e); } } @@ -301,7 +299,7 @@ function updateTitle() { var title; if (myChannel) { title = "?" + myChannel; - } else { + } else { title = "hack.chat"; } @@ -333,7 +331,7 @@ $('#chatinput').onkeydown = function (e) { updateInputSize(); } - } else if (e.keyCode == 38 /* UP */) { + } else if (e.keyCode == 38 /* UP */) { // Restore previous sent messages if (e.target.selectionStart === 0 && lastSentPos < lastSent.length - 1) { e.preventDefault(); @@ -367,7 +365,7 @@ $('#chatinput').onkeydown = function (e) { lastSent[lastSentPos] = ""; updateInputSize(); - } else if (e.keyCode == 9 /* TAB */) { + } else if (e.keyCode == 9 /* TAB */) { // Tab complete nicknames starting with @ e.preventDefault(); -- cgit v1.2.1