mirror/opengist
1
0
Fork 0
mirror of https://github.com/thomiceli/opengist.git synced 2025-01-09 10:02:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Syntax highlighting + fix escaping in Markdown code (#29)

Browse source
This commit is contained in:
Thomas Miceli 2023-05-07 18:54:09 +02:00 committed by GitHub
parent 1f74affde4
commit 089d321898
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/main.ts
View file

@ -1,7 +1,7 @@
import 'highlight.js/styles/tokyo-night-dark.css';
import './style.css'; import './style.css';
import './markdown.css'; import './markdown.css';
import './favicon.svg'; import './favicon.svg';
import 'highlight.js/styles/tokyo-night-dark.css';
import moment from 'moment'; import moment from 'moment';
import md from 'markdown-it'; import md from 'markdown-it';
import hljs from 'highlight.js'; import hljs from 'highlight.js';
@ -31,7 +31,22 @@ document.addEventListener('DOMContentLoaded', () => {
} }
document.querySelectorAll('.markdown').forEach((e: HTMLElement) => { document.querySelectorAll('.markdown').forEach((e: HTMLElement) => {
e.innerHTML = md().render(e.innerHTML); e.innerHTML = md({
html: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
console.log(str)
console.log(hljs.highlight(str, {language: lang, ignoreIllegals: false}, false));
return '<pre class="hljs"><code>' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';
} catch (__) {}
}
return '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>';
}
}).render(e.textContent);
}); });
document.querySelectorAll<HTMLElement>('.table-code').forEach((el) => { document.querySelectorAll<HTMLElement>('.table-code').forEach((el) => {

4
public/style.css vendored
View file

@ -99,8 +99,8 @@ pre {
max-height: 337px; max-height: 337px;
} }
.hljs { .hljs{
background: none !important; color: #c9d1d9;
} }
.line-code.selected { .line-code.selected {