Support embedded HTML in markdown

src/lib/components/markdown/Fallback.svelte

@@ -3,7 +3,7 @@
   import remarkRehype from "remark-rehype";
   import { unified } from "unified";
 
-  const processor = unified().use(remarkRehype).use(rehypeStringify);
+  const processor = unified().use(remarkRehype, { allowDangerousHtml: true }).use(rehypeStringify, { allowDangerousHtml: true });
 </script>
 
 <script lang="ts">

src/lib/md.css

@@ -55,3 +55,25 @@
 .prose p img {
   @apply inline;
 }
+
+.prose details {
+  list-style-position: outside;
+  @apply overflow-hidden rounded px-4 py-3 ring-1 ring-neutral/20 transition-background-color;
+}
+
+.prose details[open] > summary {
+  @apply mb-3 ring-(1 neutral/20);
+}
+
+.prose summary {
+  list-style: none;
+  @apply flex flex-row items-center justify-between px-4 py-3 -mx-4 -my-3 after:content-[''];
+}
+
+.prose summary::after {
+  @apply i-humbleicons-expand text-neutral/50 transition-color;
+}
+
+.prose summary:hover::after {
+  @apply text-neutral/80;
+}

src/routes/test/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+  import text from "./example.md?raw";
+  import BaseMarkdown from "$lib/components/markdown/BaseMarkdown.svelte";
+</script>
+
+<div class="mx-auto my-10 w-lg rounded bg-white/5 p-5">
+  <BaseMarkdown {text} />
+</div>

src/routes/test/example.md

@@ -0,0 +1,30 @@
+# Markdown inside HTML
+
+Markdown lists should be inside `<tetails>` tag.
+
+<details open>
+<summary>
+  title
+</summary>
+text
+- 1
+- 2
+- 3
+
+> This is a test
+
+## First
+
+1. abc
+2. def
+3. ghi
+4. jkl
+
+## Second
+
+- mno
+- pqr
+- stu
+- vwx
+
+</details>