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

Author: nekename

deno.lock

@@ -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"
 	}

package.json

@@ -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/app.css

@@ -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" '));
 			}