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

thomiceli · May 7, 2023 · 089d321 · 089d321
1 parent 1f74aff
commit 089d321
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/public/main.ts b/public/main.ts
@@ -1,7 +1,7 @@
+import 'highlight.js/styles/tokyo-night-dark.css';
 import './style.css';
 import './markdown.css';
 import './favicon.svg';
-import 'highlight.js/styles/tokyo-night-dark.css';
 import moment from 'moment';
 import md from 'markdown-it';
 import hljs from 'highlight.js';
@@ -31,7 +31,22 @@ document.addEventListener('DOMContentLoaded', () => {
  }
 
  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) => {

diff --git a/public/style.css b/public/style.css
@@ -99,8 +99,8 @@ pre {
  max-height: 337px;
 }
 
-.hljs {
- background: none !important;
+.hljs{
+ color: #c9d1d9;
 }
 
 .line-code.selected {
@@ -134,4 +134,4 @@ table.csv-table thead tr th {
 
 table.csv-table tbody td {
  @apply border py-1.5 px-1 border-slate-800;
-}
+}