2 files changed, 82 insertions(+), 8 deletions(-)

M deno.json
M src/markdown.ts

@@ 37,19 37,20 @@
     "@timharek/linkding": "jsr:@timharek/linkding@^2.0.3",
     "@timharek/openlibrary": "jsr:@timharek/openlibrary@^2.0.1",
     "@timharek/tmdb": "https://git.sr.ht/~timharek/tmdb/blob/main/mod.ts",
+    "highlight.js": "npm:highlight.js@11.9.0",
     "icons/": "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/",
+    "marked": "npm:marked@8.0.1",
+    "marked-alert": "npm:marked-alert@^2.0.1",
+    "marked-gfm-heading": "npm:marked-gfm-heading-id@3.1.3",
+    "marked-highlight": "npm:marked-highlight@2.0.9",
     "preact": "https://esm.sh/preact@10.19.6",
     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.2",
     "preact/": "https://esm.sh/preact@10.19.6/",
     "tailwindcss": "npm:tailwindcss@3.4.1",
     "tailwindcss/": "npm:/tailwindcss@3.4.1/",
     "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
-    "zod": "npm:zod@^3.23.8",
-    "marked": "npm:marked@8.0.1",
-    "marked-highlight": "npm:marked-highlight@2.0.9",
-    "marked-gfm-heading": "npm:marked-gfm-heading-id@3.1.3",
-    "highlight.js": "npm:highlight.js@11.9.0",
-    "tldts": "npm:tldts@6.0.14"
+    "tldts": "npm:tldts@6.0.14",
+    "zod": "npm:zod@^3.23.8"
   },
   "lint": {
     "rules": {


@@ 77,4 78,4 @@
   "exclude": [
     "**/_fresh/*"
   ]
-}>
\ No newline at end of file
+}

@@ 4,6 4,7 @@ import { Extract } from "@std/front-matter";
 import { Marked } from "marked";
 import { markedHighlight } from "marked-highlight";
 import { gfmHeadingId } from "marked-gfm-heading";
+import markedAlert from "marked-alert";
 import hljs from "highlight.js";
 
 const highlight = await (await fetch(


@@ 26,6 27,13 @@ export const css = `
       --color-canvas-default: hsl(var(--color-bg) / var(--tw-bg-opacity)) !important; 
       --color-fg-default: var(--color-text) !important;
       --color-accent-fg: var(--color-primary);
+
+      --color-note: #539bf5;
+      --color-caution: #e5534b;
+      --color-tip: #57ab5a;
+      --color-important: #986ee2;
+      --color-warning: #c69026;
+    
     }
     .markdown-body ul {
       list-style: disc;


@@ 60,6 68,71 @@ export const css = `
       margin: 0;
       padding: 0;
     }
+
+    .markdown-body .markdown-alert {
+      border-left-width: 0.25rem;
+      padding-left: 0.5rem;
+    }
+
+    .markdown-body .markdown-alert.markdown-alert-note {
+      border-left-color: var(--color-note);
+    }
+
+    .markdown-body .markdown-alert.markdown-alert-important {
+      border-left-color: var(--color-important);
+    }
+    .markdown-body .markdown-alert.markdown-alert-warning {
+      border-left-color: var(--color-warning);
+    }
+
+    .markdown-body .markdown-alert.markdown-alert-caution {
+      border-left-color: var(--color-warning);
+    }
+    .markdown-body .markdown-alert.markdown-alert-tip {
+      border-left-color: var(--color-tip);
+    }
+
+    .markdown-body .markdown-alert.markdown-alert-caution {
+      border-left-color: var(--color-caution);
+    }
+
+    .markdown-body .markdown-alert.markdown-alert-tip {
+      border-left-color: var(--color-tip);
+    }
+
+    .markdown-body .markdown-alert.markdown-alert-caution {
+      border-left-color: var(--color-caution);
+    }
+
+    .markdown-body .markdown-alert > .markdown-alert-title {
+      display: inline-flex;
+      align-items: center;
+      font-weight: 500;
+    }
+
+    .markdown-alert-note > .markdown-alert-title {
+      color: var(--color-note);
+    }
+
+    .markdown-alert-tip > .markdown-alert-title {
+      color: var(--color-tip);
+    }
+
+    .markdown-alert-important > .markdown-alert-title {
+      color: var(--color-important);
+    }
+
+    .markdown-alert-warning > .markdown-alert-title {
+      color: var(--color-warning);
+    }
+
+    .markdown-alert-caution > .markdown-alert-title {
+      color: var(--color-caution);
+    }
+
+    .mr-2 {
+      margin-right: 0.5rem;
+    }
   `;
 
 export const marked = new Marked(


@@ 72,4 145,4 @@ export const marked = new Marked(
     },
   }),
   gfmHeadingId(),
-);
+).use(markedAlert());