feat(utils): markdown callouts

packages/assets/styles/classes.scss

@@ -1183,3 +1183,75 @@ select {
   border-top-left-radius: var(--radius-md) !important;
   border-top-right-radius: var(--radius-md) !important;
 }
+
+// Callouts
+
+.markdown-alert {
+  padding: 0.5rem 1rem;
+  margin-bottom: 16px;
+  color: inherit;
+  border-left: 0.25em solid #888;
+}
+
+.markdown-alert > :first-child {
+  margin-top: 0;
+}
+
+.markdown-alert > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-alert .markdown-alert-title {
+  display: flex;
+  font-weight: 500;
+  align-items: center;
+  line-height: 1;
+}
+
+.markdown-alert .markdown-alert-title > svg {
+  margin-right: 0.5rem;
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}
+
+.markdown-alert.markdown-alert-note {
+  border-left-color: var(--color-blue);
+}
+
+.markdown-alert.markdown-alert-note .markdown-alert-title {
+  color: var(--color-blue);
+}
+
+.markdown-alert.markdown-alert-important {
+  border-left-color: var(--color-purple);
+}
+
+.markdown-alert.markdown-alert-important .markdown-alert-title {
+  color: var(--color-purple);
+}
+
+.markdown-alert.markdown-alert-warning {
+  border-left-color: var(--color-orange);
+}
+
+.markdown-alert.markdown-alert-warning .markdown-alert-title {
+  color: var(--color-orange);
+}
+
+.markdown-alert.markdown-alert-tip {
+  border-left-color: var(--color-green);
+}
+
+.markdown-alert.markdown-alert-tip .markdown-alert-title {
+  color: var(--color-green);
+}
+
+.markdown-alert.markdown-alert-caution {
+  border-left-color: var(--color-red);
+}
+
+.markdown-alert.markdown-alert-caution .markdown-alert-title {
+  color: var(--color-red);
+}

packages/utils/package.json

@@ -23,6 +23,7 @@
     "dayjs": "^1.11.10",
     "highlight.js": "^11.9.0",
     "markdown-it": "^14.1.0",
+    "markdown-it-github-alerts": "^0.3.0",
     "xss": "^1.0.14"
   }
 }

packages/utils/parse.ts

@@ -1,4 +1,5 @@
 import MarkdownIt from 'markdown-it'
+import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
 import { escapeAttrValue, FilterXSS, safeAttrValue, whiteList } from 'xss'
 
 export const configuredXss = new FilterXSS({
@@ -24,6 +25,8 @@ export const configuredXss = new FilterXSS({
     source: ['media', 'sizes', 'src', 'srcset', 'type'],
     p: [...(whiteList.p || []), 'align'],
     div: [...(whiteList.p || []), 'align'],
+    svg: ['aria-hidden'],
+    path: ['d'],
   },
   css: {
     whiteList: {
@@ -75,6 +78,28 @@ export const configuredXss = new FilterXSS({
       }
       return `${name}="${escapeAttrValue(allowedClasses.join(' '))}"`
     }
+
+    // For markdown callouts
+    if (name === 'class' && ['div', 'p'].includes(tag)) {
+      const classWhitelist = [
+        'markdown-alert',
+        'markdown-alert-note',
+        'markdown-alert-tip',
+        'markdown-alert-warning',
+        'markdown-alert-important',
+        'markdown-alert-caution',
+        'markdown-alert-title',
+      ]
+
+      const allowed: string[] = []
+      for (const className of value.split(/\s/g)) {
+        if (classWhitelist.includes(className)) {
+          allowed.push(className)
+        }
+      }
+
+      return `${name}="${escapeAttrValue(allowed.join(' '))}"`
+    }
   },
   safeAttrValue(tag, name, value, cssFilter) {
     if (tag === 'img' && name === 'src' && !value.startsWith('data:')) {
@@ -129,6 +154,8 @@ export const md = (options = {}) => {
     ...options,
   })
 
+  md.use(MarkdownItGitHubAlerts)
+
   const defaultLinkOpenRenderer =
     md.renderer.rules.link_open ||
     function (tokens, idx, options, _env, self) {