Highlight headers

src/common/assets/highlight.module.css

@@ -25,3 +25,10 @@
     padding: 0.1em 0.3em;
     border-radius: 0.2em;
 }
+
+.header {
+    font-size: 1.4em;
+    font-weight: bold;
+    color: var(--yellow, #e6db74);
+    display: block;
+}

src/common/highlight.ts

@@ -2,9 +2,10 @@ import styles from './assets/highlight.module.css';
 
 export const highlight = (message: string, keepMarkup = true): string => {
     let resultHTML = '';
-    const tokenRegex = /(\*\*?|"|```|`)/g;
+    const tokenRegex = /(\*\*?|"|```|`|(?:^|\n)# |\n)/g;
     const stack: string[] = [];
     let inCodeBlock = false;
+    let inHeader = false;
     let lastIndex = 0;
     let match: RegExpExecArray | null;
 
@@ -27,6 +28,23 @@ export const highlight = (message: string, keepMarkup = true): string => {
             continue;
         }
 
+        if (token.endsWith('# ')) {
+            if (inHeader) resultHTML += '</span>';
+            inHeader = true;
+            resultHTML += `${token.slice(0, -2)}<span class="${styles.header}">${keepMarkup ? '# ' : ''}`;
+            continue;
+        }
+
+        if (token === '\n') {
+            if (inHeader) {
+                resultHTML += `${keepMarkup ? '\n' : ''}</span>`;
+                inHeader = false;
+            } else {
+                resultHTML += '\n';
+            }
+            continue;
+        }
+
         if (isClose) {
             stack.pop();
             resultHTML += `${keepToken ? token : ''}</span>`;
@@ -51,6 +69,7 @@ export const highlight = (message: string, keepMarkup = true): string => {
 
     resultHTML += message.slice(lastIndex);
 
+    if (inHeader) resultHTML += '</span>';
     resultHTML += '</span>'.repeat(stack.length);
 
     return resultHTML;