feat: marked-alert

package-lock.json

@@ -15,6 +15,7 @@
         "csv-parse": "^5.5.6",
         "js-yaml": "^4.1.1",
         "marked": "^14.1.0",
+        "marked-alert": "^2.1.2",
         "marked-directive": "^1.0.7",
         "solid-element": "^1.9.1",
         "solid-js": "^1.9.3"
@@ -3023,6 +3024,15 @@
         "node": ">= 18"
       }
     },
+    "node_modules/marked-alert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/marked-alert/-/marked-alert-2.1.2.tgz",
+      "integrity": "sha512-EFNRZ08d8L/iEIPLTlQMDjvwIsj03gxWCczYTht6DCiHJIZhMk4NK5gtPY9UqAYb09eV5VGT+jD4lp396E0I+w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "marked": ">=7.0.0"
+      }
+    },
     "node_modules/marked-directive": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/marked-directive/-/marked-directive-1.0.7.tgz",

package.json

@@ -36,6 +36,7 @@
     "csv-parse": "^5.5.6",
     "js-yaml": "^4.1.1",
     "marked": "^14.1.0",
+    "marked-alert": "^2.1.2",
     "marked-directive": "^1.0.7",
     "solid-element": "^1.9.1",
     "solid-js": "^1.9.3"

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;
+}