feat: marked-alert

src/markdown/index.ts

@@ -1,9 +1,12 @@
 import { Marked } from 'marked';
 import {createDirectives, presetDirectiveConfigs} from 'marked-directive';
 import yaml from 'js-yaml';
+import markedAlert from "marked-alert";
 
 // 使用 marked-directive 来支持指令语法
-const marked = new Marked().use(createDirectives([
+const marked = new Marked()
+    .use(markedAlert())
+    .use(createDirectives([
     ...presetDirectiveConfigs,
     {
         marker: '::::',

src/styles.css

@@ -1,2 +1,30 @@
 @import "tailwindcss";
-@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/typography";
+
+.markdown-alert {
+    @apply px-4 rounded mb-4 border;
+}
+
+.markdown-alert-title{
+    @apply hidden;
+}
+
+.markdown-alert-note {
+    @apply bg-blue-50 border-blue-500;
+}
+
+.markdown-alert-tip {
+    @apply bg-green-50 border-green-500;
+}
+
+.markdown-alert-important {
+    @apply bg-red-50 border-red-500;
+}
+
+.markdown-alert-warning {
+    @apply bg-yellow-50 border-yellow-500;
+}
+
+.markdown-alert-caution {
+    @apply bg-orange-50 border-orange-500;
+}