diff --git a/public/main.ts b/public/main.ts
index 2056ae3..a4b997e 100644
--- 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
index 2794a6e..e59be3d 100644
--- 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;
-}
\ No newline at end of file
+}