feat: support GFM alerts, implements #1350

frontend/src/assets/css/markdown.scss

@@ -102,6 +102,47 @@
   li > ol {
     margin: 0;
   }
+
+  .markdown-alert {
+    padding: 0 1em;
+    margin-bottom: 16px;
+    border-left: 0.25em solid var(--alert-color, #444c56);
+
+    > p {
+      margin: 0;
+    }
+
+    .markdown-alert-title {
+      display: inline-flex;
+      align-items: center;
+      font-weight: 500;
+      color: var(--alert-color, #444c56);
+
+      .dark & > svg {
+        fill: #E0E6f0;
+      }
+    }
+  }
+
+  .markdown-alert-note {
+    --alert-color: #539bf5;
+  }
+
+  .markdown-alert-tip {
+    --alert-color: #57ab5a;
+  }
+
+  .markdown-alert-important {
+    --alert-color: #986ee2;
+  }
+
+  .markdown-alert-warning {
+    --alert-color: #c69026;
+  }
+
+  .markdown-alert-caution {
+    --alert-color: #e5534b;
+  }
 }
 
 // override prism stuff

frontend/src/composables/useMarked.ts

@@ -4,6 +4,7 @@ import markedLinkifyIt from "marked-linkify-it";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import markedExtendedTables from "marked-extended-tables";
+import markedAlert from "marked-alert";
 
 const youtubeRegex = /(?:youtube\.com\/(?:[^\s/]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[&?]v=)|youtu\.be\/)([\w-]{11})(?:==(\d+))?/;
 const imageSizeParts = /(.*)==\s*(\d*)\s*x?\s*(\d*)\s*$/;
@@ -61,6 +62,7 @@ const renderer = {
 marked.use({ renderer });
 marked.use(markedExtendedTables());
 marked.use(markedLinkifyIt());
+marked.use(markedAlert());
 
 export function parseMarkdown(text?: string | null): string | undefined {
   if (!text) return undefined;