aboutsummaryrefslogtreecommitdiffstats
path: root/client
diff options
context:
space:
mode:
authormarzavec <admin@marzavec.com>2018-05-17 16:12:12 +0200
committerGitHub <noreply@github.com>2018-05-17 16:12:12 +0200
commite64ee88e0f546df4e1fbec840aea0948339b4a34 (patch)
tree41ba24aa8af684bffc4b6f3e3dc752306284027d /client
parentMerge pull request #10 from bacn/master (diff)
parentChanged @ for # as highlight symbol (diff)
downloadhackchat-e64ee88e0f546df4e1fbec840aea0948339b4a34.tar.gz
hackchat-e64ee88e0f546df4e1fbec840aea0948339b4a34.zip
Merge pull request #14 from po5i/master
Introducing syntax highlight
Diffstat (limited to 'client')
-rw-r--r--client/README.md12
-rw-r--r--client/client.js48
-rw-r--r--client/index.html63
3 files changed, 120 insertions, 3 deletions
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..e597737 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 must begin 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",
"",
@@ -200,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 {
@@ -522,7 +534,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 +554,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 +568,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 @@
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="utf-8"><title>hack.chat</title><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="katex/katex.min.css"><link id="scheme-link" rel="stylesheet" href="schemes/atelier-dune.css"><script src="katex/katex.min.js"></script><script src="katex/contrib/auto-render.min.js"></script></head><body><article class="container"><div id="messages" class="messages"></div></article><footer id="footer"><div class="container"><form id="chatform" class="messages"><textarea id="chatinput" type="text" autocomplete="off" autofocus></textarea></form></div></footer><nav id="sidebar"><div id="sidebar-content" class="hidden"><p><input id="pin-sidebar" type="checkbox"><label for="pin-sidebar">Pin sidebar</label></p><h4>Settings</h4><p><input id="joined-left" type="checkbox" checked><label for="joined-left">Join/left notify</label></p><p><input id="parse-latex" type="checkbox" checked><label for="parse-latex">Parse LaTeX</label></p><p><button id="clear-messages">Clear messages</button></p><h4>Color scheme</h4><select id="scheme-selector"></select><h4>Users online</h4><p>(Click user to invite)</p><ul id="users"></ul></div></nav><script src="client.js"></script></body></html> \ No newline at end of file
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta charset="utf-8">
+ <title>hack.chat</title>
+ <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="katex/katex.min.css">
+ <link id="scheme-link" rel="stylesheet" href="schemes/atelier-dune.css">
+ <script src="katex/katex.min.js"></script>
+ <script src="katex/contrib/auto-render.min.js"></script>
+ <link id="highlight-link" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/hybrid.min.css">
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+</head>
+
+<body>
+ <article class="container">
+ <div id="messages" class="messages"></div>
+ </article>
+ <footer id="footer">
+ <div class="container">
+ <form id="chatform" class="messages">
+ <textarea id="chatinput" type="text" autocomplete="off" autofocus></textarea>
+ </form>
+ </div>
+ </footer>
+ <nav id="sidebar">
+ <div id="sidebar-content" class="hidden">
+ <p>
+ <input id="pin-sidebar" type="checkbox">
+ <label for="pin-sidebar">Pin sidebar</label>
+ </p>
+ <h4>Settings</h4>
+ <p>
+ <input id="joined-left" type="checkbox" checked>
+ <label for="joined-left">Join/left notify</label>
+ </p>
+ <p>
+ <input id="parse-latex" type="checkbox" checked>
+ <label for="parse-latex">Parse LaTeX</label>
+ </p>
+ <p>
+ <button id="clear-messages">Clear messages</button>
+ </p>
+ <h4>Color scheme</h4>
+ <select id="scheme-selector"></select>
+ <p>
+ <input id="syntax-highlight" type="checkbox" checked>
+ <label for="syntax-highlight">Syntax Highlight</label>
+ </p>
+ <h4>Highlight scheme</h4>
+ <select id="highlight-selector"></select>
+ <h4>Users online</h4>
+ <p>(Click user to invite)</p>
+ <ul id="users"></ul>
+ </div>
+ </nav>
+ <script src="client.js"></script>
+</body>
+
+</html> \ No newline at end of file
generated by cgit v1.2.1 (git 2.18.0) at 2024-11-24 12:24:23 +0100