Blockquote highlight

src/common/assets/highlight.module.css

@@ -67,6 +67,16 @@
     padding-left: 1.5em;
 }
 
+.blockquote {
+    display: block;
+    opacity: .5;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    border-left: 2px solid currentColor;
+    margin-bottom: .5em;
+    padding-left: .5em;
+}
+
 .hr {
     border: none;
     border-top: 1px solid var(--hrColor, #555);

src/common/highlight.ts

@@ -41,12 +41,14 @@ export const parseTable = (table: string): string => {
 
 export const highlight = (message: string, keepMarkup = true): string => {
     let resultHTML = '';
-    const tokenRegex = /(\*\*?|"|```|`|(?:^|\n)#{1,3} |\n)/g;
+    const tokenRegex = /(\*\*?|"|```|`|(?:^|\n)#{1,3} |(?:^|\n)> |\n)/g;
     const headerRegex = /#{1,3} $/;
+    const blockquoteRegex = /> $/;
     const stack: string[] = [];
     let inCodeBlock = false;
     let inMonospaced = false;
     let inHeader = false;
+    let inBlockquote = false;
     let lastIndex = 0;
     let match: RegExpExecArray | null;
 
@@ -83,6 +85,7 @@ export const highlight = (message: string, keepMarkup = true): string => {
         const headerMatch = token.match(headerRegex);
         if (headerMatch) {
             if (inHeader) resultHTML += '</span>';
+            if (inBlockquote) { resultHTML += '</span>'; inBlockquote = false; }
             const markup = keepMarkup ? headerMatch[0] : '';
             const len = headerMatch[0].length;
             inHeader = true;
@@ -90,10 +93,23 @@ export const highlight = (message: string, keepMarkup = true): string => {
             continue;
         }
 
+        const blockquoteMatch = token.match(blockquoteRegex);
+        if (blockquoteMatch) {
+            if (inHeader) { resultHTML += '</span>'; inHeader = false; }
+            if (inBlockquote) resultHTML += '</span>';
+            const markup = keepMarkup ? '> ' : '';
+            inBlockquote = true;
+            resultHTML += `${token.slice(0, -2)}<span class="${styles.blockquote}">${markup}`;
+            continue;
+        }
+
         if (token === '\n') {
             if (inHeader) {
                 resultHTML += `${keepMarkup ? '\n' : ''}</span>`;
                 inHeader = false;
+            } else if (inBlockquote) {
+                resultHTML += `${keepMarkup ? '\n' : ''}</span>`;
+                inBlockquote = false;
             } else {
                 resultHTML += '\n';
             }
@@ -126,6 +142,7 @@ export const highlight = (message: string, keepMarkup = true): string => {
     resultHTML += message.slice(lastIndex);
 
     if (inHeader) resultHTML += '</span>';
+    if (inBlockquote) resultHTML += '</span>';
     resultHTML += '</span>'.repeat(stack.length);
 
     if (!keepMarkup) {