mirror of
https://github.com/hack-chat/main.git
synced 2024-03-22 13:20:33 +08:00
Introducing syntax highlight
This commit is contained in:
Carlos Villavicencio
parent
b341644d93
commit
ffd4c36830
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
@ -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 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",
|
"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);
|
messageEl.appendChild(textEl);
|
||||||
|
|
||||||
// Scroll to bottom
|
// Scroll to bottom
|
||||||
|
|
@ -522,7 +535,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 +555,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 +569,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 */
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
2
server/package-lock.json
generated
|
|
@ -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": {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user