feat(web): render <kbd> elements in docs

Enable raw HTML in the markdown pipeline and style <kbd> to match
the coss Kbd component.

Author: kacigaya

web/bun.lock

@@ -20,6 +20,7 @@
     "react-day-picker": "^10.0.1",
     "react-dom": "19.2.4",
     "rehype-pretty-code": "^0.14.3",
+    "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.1",

web/package.json

@@ -272,3 +272,26 @@ code[data-theme*=" "] span {
 .prose :where(code):not(:where([data-theme], pre *))::after {
   content: none;
 }
+/* coss Kbd look for <kbd> inside docs prose */
+.prose kbd {
+  display: inline-flex;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  background-color: var(--muted);
+  padding: 0 0.3rem;
+  font-family: var(--font-sans, ui-sans-serif);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--muted-foreground);
+  vertical-align: middle;
+  box-shadow: none;
+}
+.prose kbd::before,
+.prose kbd::after {
+  content: none;
+}

web/src/app/globals.css

@@ -4,6 +4,7 @@ import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
 import remarkRehype from "remark-rehype";
+import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import rehypePrettyCode from "rehype-pretty-code";
 import rehypeStringify from "rehype-stringify";
@@ -16,7 +17,8 @@ const CONTENT_DIR = path.join(process.cwd(), "content");
 const processor = unified()
   .use(remarkParse)
   .use(remarkGfm)
-  .use(remarkRehype)
+  .use(remarkRehype, { allowDangerousHtml: true })
+  .use(rehypeRaw)
   .use(rehypeSlug)
   .use(rehypePrettyCode, {
     theme: { light: "github-light", dark: "github-dark" },