StarMirror/hack-chat-main
1
0
Fork 0
mirror of https://github.com/hack-chat/main.git synced 2024-03-22 13:20:33 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #14 from po5i/master

Browse Source 
Introducing syntax highlight
This commit is contained in:
marzavec 2018-05-17 09:12:12 -05:00 committed by GitHub
commit e64ee88e0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 122 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -78,7 +78,7 @@ cd main/server/
pm2 start main.js --name HackChat pm2 start main.js --name HackChat
``` ```
Launch `main/client/index.html`, you may now begin development or deploy to production environment. [Launch the client](./client/README.md) `main/client/index.html`, you may now begin development or deploy to production environment.
## Deployment ## Deployment

10
client/README.md
View File

@ -1 +1,11 @@
## 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) (TODO)

48
client/client.js
View File

@ -18,6 +18,7 @@ var frontpage = [
"Formatting:", "Formatting:",
"Whitespace is preserved, so source code can be pasted verbatim.", "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}$$", "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", "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.textContent = args.text || '';
textEl.innerHTML = textEl.innerHTML.replace(/(\?|https?:\/\/)\S+?(?=[,.!?:)]?\s|$)/g, parseLinks); 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 // Temporary hotfix for \rule spamming, see https://github.com/Khan/KaTeX/issues/109
textEl.innerHTML = textEl.innerHTML.replace(/\\rule|\\\\\s*\[.*?\]/g, ''); textEl.innerHTML = textEl.innerHTML.replace(/\\rule|\\\\\s*\[.*?\]/g, '');
try { try {
@ -522,7 +534,19 @@ var schemes = [
'tomorrow' 'tomorrow'
]; ];
var highlights = [
'agate',
'androidstudio',
'darcula',
'github',
'rainbow',
'tomorrow',
'xcode',
'zenburn'
]
var currentScheme = 'atelier-dune'; var currentScheme = 'atelier-dune';
var currentHighlight = 'darcula';
function setScheme(scheme) { function setScheme(scheme) {
currentScheme = scheme; currentScheme = scheme;
@ -530,6 +554,12 @@ function setScheme(scheme) {
localStorageSet('scheme', 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 // Add scheme options to dropdown selector
schemes.forEach(function (scheme) { schemes.forEach(function (scheme) {
var option = document.createElement('option'); var option = document.createElement('option');
@ -538,16 +568,32 @@ schemes.forEach(function (scheme) {
$('#scheme-selector').appendChild(option); $('#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) { $('#scheme-selector').onchange = function (e) {
setScheme(e.target.value); setScheme(e.target.value);
} }
$('#highlight-selector').onchange = function (e) {
setHighlight(e.target.value);
}
// Load sidebar configaration values from local storage if available // Load sidebar configaration values from local storage if available
if (localStorageGet('scheme')) { if (localStorageGet('scheme')) {
setScheme(localStorageGet('scheme')); setScheme(localStorageGet('scheme'));
} }
if (localStorageGet('highlight')) {
setHighlight(localStorageGet('highlight'));
}
$('#scheme-selector').value = currentScheme; $('#scheme-selector').value = currentScheme;
$('#highlight-selector').value = currentHighlight;
/* main */ /* main */

63
client/index.html
View File

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

2
server/package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "hack.chat-v2", "name": "hack.chat-v2",
"version": "2.0.0", "version": "2.0.1",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {