fix: ensure GFM alerts are rendered correctly when displaying plugin README files

deno.lock

@@ -15,6 +15,7 @@
     "npm:@tauri-apps/plugin-dialog@^2.6.0": "2.6.0",
     "npm:dompurify@^3.3.0": "3.3.1",
     "npm:lightningcss@^1.31.0": "1.31.1",
+    "npm:marked-alert@^2.1.2": "2.1.2_marked@17.0.1",
     "npm:marked-base-url@^1.1.0": "1.1.8_marked@17.0.1",
     "npm:marked@17": "17.0.1",
     "npm:phosphor-svelte@2": "2.0.1_svelte@4.2.20",
@@ -861,6 +862,12 @@
         "@jridgewell/sourcemap-codec"
       ]
     },
+    "marked-alert@2.1.2_marked@17.0.1": {
+      "integrity": "sha512-EFNRZ08d8L/iEIPLTlQMDjvwIsj03gxWCczYTht6DCiHJIZhMk4NK5gtPY9UqAYb09eV5VGT+jD4lp396E0I+w==",
+      "dependencies": [
+        "marked"
+      ]
+    },
     "marked-base-url@1.1.8_marked@17.0.1": {
       "integrity": "sha512-RA80m/VTq82jAnpusyK7B4M45TZ3LMB1ymrdAJI3oaSG4+8MzBc8FFlVKIAhkBrfRM7CxeTHTGUVVK59/eiQyA==",
       "dependencies": [
@@ -1060,6 +1067,7 @@
         "npm:@tauri-apps/plugin-dialog@^2.6.0",
         "npm:dompurify@^3.3.0",
         "npm:lightningcss@^1.31.0",
+        "npm:marked-alert@^2.1.2",
         "npm:marked-base-url@^1.1.0",
         "npm:marked@17",
         "npm:phosphor-svelte@2",

package.json

@@ -30,6 +30,7 @@
 		"@tauri-apps/plugin-dialog": "^2.6",
 		"dompurify": "^3.3",
 		"marked": "^17.0",
+		"marked-alert": "^2.1",
 		"marked-base-url": "^1.1",
 		"phosphor-svelte": "^2.0"
 	}

src/app.css

@@ -61,3 +61,50 @@ select {
 .plugin-readme img {
 	@apply my-3;
 }
+
+.plugin-readme .octicon {
+	display: inline-block;
+	fill: currentColor;
+	vertical-align: text-bottom;
+}
+.plugin-readme .markdown-alert {
+	padding: 0 1em;
+	margin-bottom: 16px;
+	color: inherit;
+	border-left: 0.25em solid #444c56;
+}
+.plugin-readme .markdown-alert-title {
+	display: inline-flex;
+	align-items: center;
+	font-weight: 500;
+}
+.plugin-readme .markdown-alert-note {
+	border-left-color: #539bf5;
+}
+.plugin-readme .markdown-alert-tip {
+	border-left-color: #57ab5a;
+}
+.plugin-readme .markdown-alert-important {
+	border-left-color: #986ee2;
+}
+.plugin-readme .markdown-alert-warning {
+	border-left-color: #c69026;
+}
+.plugin-readme .markdown-alert-caution {
+	border-left-color: #e5534b;
+}
+.plugin-readme .markdown-alert-note > .markdown-alert-title {
+	color: #539bf5;
+}
+.plugin-readme .markdown-alert-tip > .markdown-alert-title {
+	color: #57ab5a;
+}
+.plugin-readme .markdown-alert-important > .markdown-alert-title {
+	color: #986ee2;
+}
+.plugin-readme .markdown-alert-warning > .markdown-alert-title {
+	color: #c69026;
+}
+.plugin-readme .markdown-alert-caution > .markdown-alert-title {
+	color: #e5534b;
+}

src/components/PluginDetails.svelte

@@ -8,6 +8,7 @@
 	import { invoke } from "@tauri-apps/api/core";
 	import DOMPurify from "dompurify";
 	import { marked } from "marked";
+	import markedAlert from "marked-alert";
 	import { baseUrl } from "marked-base-url";
 	import { onMount } from "svelte";
 
@@ -38,6 +39,7 @@
 		for (const url of urls) {
 			const response = await fetch(url);
 			if (response.ok) {
+				marked.use(markedAlert());
 				marked.use(baseUrl(url));
 				return await marked.parse(DOMPurify.sanitize(await response.text()).replace(/<a/g, '<a target="_blank" '));
 			}