hd-garden 0.5.15 → 0.5.16

package/app/about/page.tsx

@@ -4,6 +4,7 @@ import { GithubProfile } from "../components/GithubProfile";
 import { PageIntro } from "../components/PageIntro";
 import { siteConfig } from "../site.config";
 import { siteHref } from "../lib/site-href";
+import { pageAlternates } from "../lib/page-alternates";
 
 const about = siteConfig.pages.about;
 const heading = about.heading ?? "关于";
@@ -18,6 +19,7 @@ const cta = about.cta ?? { href: "/blog", label: "浏览博文" };
 export const metadata = {
   title: { absolute: siteConfig.name },
   description: about.subtitle || siteConfig.description,
+  alternates: pageAlternates("/about"),
 };
 
 export default function AboutPage() {

package/app/blog/[...path]/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { CoverImage } from "../../components/CoverImage";
 import type { Metadata } from "next";
+import { FEED_ALTERNATES } from "../../lib/page-alternates";
 import { notFound } from "next/navigation";
 import {
   extractHeadings,
@@ -42,7 +43,7 @@ export async function generateMetadata({
   return {
     title: post.title,
     description: post.description,
-    alternates: { canonical: pathname },
+    alternates: { canonical: pathname, types: FEED_ALTERNATES },
     openGraph: {
       type: "article",
       url: absoluteUrl(pathname, baseUrl),

package/app/blog/page.tsx

@@ -3,10 +3,12 @@ import { siteConfig, siteDocumentTitle } from "../site.config";
 import { BlogArchive, BlogArchiveFallback } from "../components/BlogArchive";
 import { posts } from "../lib/content";
 import { archivePosts, archiveSeries } from "../lib/archive";
+import { pageAlternates } from "../lib/page-alternates";
 
 export const metadata = {
   title: siteDocumentTitle,
   description: siteConfig.pages.blog.subtitle || siteConfig.description,
+  alternates: pageAlternates("/blog"),
 };
 
 export default function BlogIndex() {

package/app/columns/[column]/[...path]/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { CoverImage } from "../../../components/CoverImage";
 import type { Metadata } from "next";
+import { FEED_ALTERNATES } from "../../../lib/page-alternates";
 import { notFound } from "next/navigation";
 import { ArrowLeft, ArrowRight } from "@phosphor-icons/react/ssr";
 import {
@@ -47,7 +48,7 @@ export async function generateMetadata({
   return {
     title: entry.title.replace(/^\d+\s*·\s*/u, ""),
     description: entry.description,
-    alternates: { canonical: pathname },
+    alternates: { canonical: pathname, types: FEED_ALTERNATES },
     openGraph: {
       type: "article",
       url: absoluteUrl(pathname, baseUrl),

package/app/columns/page.tsx

@@ -3,10 +3,12 @@ import Link from "next/link";
 import { columnHref, columns } from "../lib/content";
 import { ContentEmptyState } from "../components/ContentEmptyState";
 import { siteConfig, siteDocumentTitle } from "../site.config";
+import { pageAlternates } from "../lib/page-alternates";
 
 export const metadata = {
   title: siteDocumentTitle,
   description: siteConfig.pages.columns.subtitle || siteConfig.description,
+  alternates: pageAlternates("/columns"),
 };
 
 function day(value: string) {

package/app/components/MarkdownArticle.tsx

@@ -14,8 +14,8 @@ import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeKatex from "rehype-katex";
 import rehypeSlug from "rehype-slug";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeHighlight from "rehype-highlight";
+import { rehypeHeadingAnchors } from "../../ui/garden/heading-anchors.mjs";
 import { MermaidDiagram } from "./MermaidDiagram";
 import { MarkdownImage } from "./MarkdownImage";
 import { CodeCopy } from "./garden/chrome";
@@ -33,6 +33,7 @@ import { LinkCardRefresh } from "./LinkCardRefresh";
 import { linkHost } from "../../scripts/link-meta-core.mjs";
 import { cardDate } from "../../ui/garden/card-refresh.mjs";
 import { siteHref } from "../lib/site-href";
+import { codeLanguageLabel } from "../../ui/garden/code-language.mjs";
 
 // Full URLs back to this site are internal links, written as root-relative paths.
 const sameSite = sameSiteMatcher(siteLinks?.address ?? "", siteLinks?.basePath ?? "");
@@ -271,7 +272,8 @@ export function MarkdownArticle({ content }: { content: string }) {
           rehypeRaw,
           rehypeKatex,
           rehypeSlug,
-          [rehypeAutolinkHeadings, { behavior: "wrap", properties: { className: ["h-anchor"] } }],
+          // Not rehype-autolink-headings "wrap": a heading with a link in it would nest <a> in <a> (React #418).
+          [rehypeHeadingAnchors, { className: ["h-anchor"] }],
           rehypeHighlight,
         ]}
         components={{
@@ -341,7 +343,7 @@ export function MarkdownArticle({ content }: { content: string }) {
 
             return (
               <CodeCopy>
-                <pre className="code" {...preProps} data-language={language?.toUpperCase()}>
+                <pre className="code" {...preProps} data-language={codeLanguageLabel(language) || undefined}>
                   {children}
                 </pre>
               </CodeCopy>

package/app/components/garden/FilePreview.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useId, useRef, useState, type MouseEvent } from "react";
+import { useCallback, useEffect, useId, useRef, useState, type FocusEvent, type MouseEvent } from "react";
 import { createPortal } from "react-dom";
 import { previewBody, previewFrameProps } from "../../../ui/garden/file-block.mjs";
 import { ActionGlyph, FileGlyph } from "./file-icons";
@@ -32,6 +32,7 @@ export function FilePreview({ file, compact }: { file: PreviewFile; compact: boo
   const request = useRef<AbortController | null>(null);
   const panel = useRef<HTMLElement>(null);
   const closeButton = useRef<HTMLButtonElement>(null);
+  const frameRef = useRef<HTMLIFrameElement>(null);
   const titleId = useId();
 
   const close = useCallback(() => {
@@ -75,7 +76,7 @@ export function FilePreview({ file, compact }: { file: PreviewFile; compact: boo
         return;
       }
       if (event.key !== "Tab" || !panel.current) return;
-      const focusable = [...panel.current.querySelectorAll<HTMLElement>("a[href], button, iframe, [tabindex]:not([tabindex='-1'])")];
+      const focusable = [...panel.current.querySelectorAll<HTMLElement>("a[href], button, iframe, [tabindex]:not([tabindex='-1'])")].filter((element) => !element.hasAttribute("data-gf-sentinel"));
       if (!focusable.length) return;
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
@@ -94,6 +95,19 @@ export function FilePreview({ file, compact }: { file: PreviewFile; compact: boo
     };
   }, [open, close]);
 
+  // Focus loops inside the drawer even when it starts in the iframe.
+  // After the iframe: Tab left it, so go round to the drawer's first control.
+  const fromAfter = () => {
+    panel.current?.querySelector<HTMLElement>(".gf-dh a[href], .gf-dh button")?.focus();
+  };
+  // Before the iframe: coming forward from the header, go on into the iframe;
+  // coming back out of it (Shift+Tab, or from outside), go to the close button.
+  const fromBefore = (event: FocusEvent<HTMLSpanElement>) => {
+    const from = event.relatedTarget as Node | null;
+    if (from && panel.current?.querySelector(".gf-dh")?.contains(from)) frameRef.current?.focus();
+    else closeButton.current?.focus();
+  };
+
   // A plain click opens the drawer; a modified click (new tab, new window) keeps the link.
   const openDrawer = (event: MouseEvent<HTMLAnchorElement>) => {
     if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
@@ -145,9 +159,13 @@ export function FilePreview({ file, compact }: { file: PreviewFile; compact: boo
               </div>
             ) : (
               <div className="gf-db gf-db-frame">
-                <iframe className="gf-frame" {...frame} />
+                {/* Keys pressed inside the iframe never reach this page, so Tab out of it is caught here and kept in the drawer. */}
+                <span tabIndex={0} className="gf-sentinel" data-gf-sentinel="before" onFocus={fromBefore} />
+                <iframe ref={frameRef} className="gf-frame" {...frame} />
+                <span tabIndex={0} className="gf-sentinel" data-gf-sentinel="after" onFocus={fromAfter} />
               </div>
             )}
+            <p className="gf-hint">Esc 关闭</p>
           </aside>
         </div>,
         document.body,

package/app/garden/page.tsx

@@ -4,10 +4,12 @@ import { GardenContentGuide } from "../components/GardenContentGuide";
 import { GardenMediaGuide } from "../components/GardenMediaGuide";
 import { PageIntro } from "../components/PageIntro";
 import { siteConfig } from "../site.config";
+import { pageAlternates } from "../lib/page-alternates";
 
 export const metadata = {
   title: "Garden",
   description: "用 Markdown 写文章。推送之后，页面、搜索和 RSS 一起更新。",
+  alternates: pageAlternates("/garden"),
 };
 
 const jumps = [

package/app/layout.tsx

@@ -13,6 +13,7 @@ import {
 import { githubUrl, siteConfig } from "./site.config";
 import { brand } from "@garden/site-config";
 import { HASH_JUMP_SCRIPT } from "../ui/garden/hash-jump.mjs";
+import { FEED_ALTERNATES } from "./lib/page-alternates";
 
 export async function generateMetadata(): Promise<Metadata> {
   const siteUrl = await getSiteUrl();
@@ -25,11 +26,7 @@ export async function generateMetadata(): Promise<Metadata> {
     },
     description: siteDescription,
     authors: [{ name: siteConfig.author.name, url: githubUrl }],
-    alternates: {
-      types: {
-        "application/rss+xml": "/rss.xml",
-      },
-    },
+    alternates: { types: FEED_ALTERNATES },
     icons: {
       icon: [{ url: brand.favicon, type: brand.favicon.endsWith(".svg") ? "image/svg+xml" : undefined }],
       ...(brand.appleTouchIcon ? { apple: [{ url: brand.appleTouchIcon, sizes: "180x180" }] } : {}),

package/app/lib/page-alternates.ts

@@ -0,0 +1,14 @@
+import { siteHref } from "./site-href";
+
+/** The site feed, linked from every page's head. */
+export const FEED_ALTERNATES = { "application/rss+xml": "/rss.xml" } as const;
+
+/**
+ * Head links for a page that should be indexed under one address: the canonical
+ * URL, shaped like the site's links (trailing slash in a static export) and
+ * resolved against metadataBase, plus the feed. A page that sets `alternates`
+ * replaces the layout's, so the feed link is repeated here.
+ */
+export function pageAlternates(pathname: string) {
+  return { canonical: siteHref(pathname), types: FEED_ALTERNATES };
+}

package/app/page.tsx

@@ -4,10 +4,12 @@ import { homeListDate } from "./lib/a2-meta";
 import { columns, formatDate, postHref, posts } from "./lib/content";
 import { githubUrl, siteConfig } from "./site.config";
 import { siteHref } from "./lib/site-href";
+import { pageAlternates } from "./lib/page-alternates";
 
 export const metadata = {
   title: { absolute: siteConfig.name },
   description: siteConfig.description,
+  alternates: pageAlternates("/"),
 };
 
 function day(value: string) {

package/app/styles/a2.css

@@ -386,8 +386,7 @@ html[data-theme="dark"] .column-reading-page .e-content {
 }
 
 /* A heading's own anchor link reads as the heading: no underline in any
-   state. Keyboard focus keeps the ring. Links inside the heading (a.ext)
-   keep their own underline. */
+   state. Links inside the heading (a.ext) keep their own underline. */
 .markdown-body .h-anchor,
 .markdown-body .h-anchor:hover,
 .markdown-body .h-anchor:active {
@@ -395,12 +394,35 @@ html[data-theme="dark"] .column-reading-page .e-content {
   text-decoration: none;
 }
 
+/* Keyboard focus rings the heading, not the anchor, so a heading split
+   around a link shows one ring. */
 .markdown-body .h-anchor:focus-visible {
+  outline: none;
+}
+
+.markdown-body :is(h2, h3, h4):has(.h-anchor:focus-visible) {
   outline: 2px solid var(--blue);
   outline-offset: 2px;
   border-radius: 2px;
 }
 
+/* A heading with a link in it has one self-link (its first stretch of text),
+   stretched over the whole heading; the link inside sits above it. */
+.markdown-body .h-split {
+  position: relative;
+}
+
+.markdown-body .h-split .h-anchor::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.markdown-body .h-split a:not(.h-anchor) {
+  position: relative;
+  z-index: 1;
+}
+
 .markdown-body a.ext {
   text-decoration-style: dotted;
   text-decoration-thickness: 1.5px;
@@ -1233,6 +1255,25 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
   transform: translateY(-50%);
 }
 
+/* The language label sits left of the copy button, 8px apart, centred on it. */
+.markdown-body .ux-cb > pre[data-language]::before {
+  top: 8px;
+  right: 48px;
+  line-height: 32px;
+}
+
+/* 「已复制」 widens the button over the label; the label steps aside meanwhile. */
+.markdown-body .ux-cb:has(> .ux-done) > pre[data-language]::before {
+  visibility: hidden;
+}
+
+/* Narrow screens: only the copy button; the code block layout stays as it is. */
+@media (max-width: 639.98px) {
+  .markdown-body .ux-cb > pre[data-language]::before {
+    display: none;
+  }
+}
+
 @media (hover: hover) {
   .ux-copy {
     opacity: 0;
@@ -1599,6 +1640,11 @@ html[data-theme="dark"] .gf-scrim { background: rgb(0 0 0 / 45%); }
 .gf-db-frame { padding: 0; overflow: hidden; background: var(--card); }
 .gf-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
 .gf-drawer[data-preview="pdf"] .gf-frame { background: var(--paper-deep); }
+/* Focus catchers around the iframe: reachable by Tab, never seen. */
+.gf-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+/* A quiet reminder; Esc pressed inside an iframe cannot reach the page. Phones have no Esc. */
+.gf-hint { flex: none; margin: 0; padding: 6px 20px 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
+@media (hover: none) and (pointer: coarse) { .gf-hint { display: none; } }
 .gf-db .gf-doc { max-width: none; margin: 0; font-size: 15px; line-height: 1.75; }
 .gf-db .gf-doc > :first-child { margin-top: 0; }
 @keyframes gf-fade { from { opacity: 0; } }

package/app/tags/page.tsx

@@ -5,10 +5,12 @@ import { siteHref } from "../lib/site-href";
 import { articleTagHref, tagCounts } from "../lib/tag-filter";
 import { TagRedirect } from "../components/TagRedirect";
 import { siteDocumentTitle } from "../site.config";
+import { pageAlternates } from "../lib/page-alternates";
 
 export const metadata = {
   title: siteDocumentTitle,
   description: "全部标签。",
+  alternates: pageAlternates("/tags"),
 };
 
 export default function TagsPage() {

package/app/thoughts/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import type { Metadata } from "next";
+import { FEED_ALTERNATES } from "../../lib/page-alternates";
 import { notFound } from "next/navigation";
 import { ArrowLeft } from "@phosphor-icons/react/ssr";
 import { Comments } from "../../components/Comments";
@@ -34,7 +35,7 @@ export async function generateMetadata({
   return {
     title: thought.title,
     description: thought.content.replace(/\s+/gu, " ").slice(0, 160),
-    alternates: { canonical: pathname },
+    alternates: { canonical: pathname, types: FEED_ALTERNATES },
     openGraph: {
       type: "article",
       url: absoluteUrl(pathname, baseUrl),

package/app/thoughts/page.tsx

@@ -3,10 +3,12 @@ import { ThoughtCard } from "../components/ThoughtCard";
 import { ContentEmptyState } from "../components/ContentEmptyState";
 import { PageIntro } from "../components/PageIntro";
 import { siteConfig, siteDocumentTitle } from "../site.config";
+import { pageAlternates } from "../lib/page-alternates";
 
 export const metadata = {
   title: siteDocumentTitle,
   description: siteConfig.pages.thoughts.subtitle || siteConfig.description,
+  alternates: pageAlternates("/thoughts"),
 };
 
 export default function ThoughtsPage() {

package/app/ui-parity/page.tsx

@@ -1,6 +1,10 @@
 import Image from "next/image";
 import { ParityInteractions } from "../../ui/react/parity";
 
+// Internal comparison page (docs/intelligent-ui-parity.md): Garden's renders next
+// to the ChatGPT originals. Kept out of search, so it has no canonical address.
+export const metadata = { robots: { index: false, follow: false } };
+
 const slices = [
   { label: "商品销售", value: 78.2, color: "#539af8" },
   { label: "平台与营销服务", value: 9.4, color: "#6bc67f" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",
@@ -97,7 +97,6 @@
     "react-dom": "19.3.0",
     "react-markdown": "^10.1.0",
     "react-server-dom-webpack": "19.3.0",
-    "rehype-autolink-headings": "^7.1.0",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",

package/scripts/file-preview.mjs

@@ -12,6 +12,7 @@
  * removed here: script-like elements, on* attributes, javascript: and other
  * non-http URLs (images may still use data:).
  */
+import fs from "node:fs";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
 import rehypeRaw from "rehype-raw";
@@ -22,6 +23,7 @@ import remarkRehype from "remark-rehype";
 import { unified } from "unified";
 import { visit } from "unist-util-visit";
 import { markdownSyntaxPlugins } from "../ui/garden/markdown-syntax.mjs";
+import { codeLanguageLabel } from "../ui/garden/code-language.mjs";
 
 const DROPPED_ELEMENTS = new Set(["script", "noscript", "iframe", "frame", "frameset", "object", "embed", "applet", "base", "link", "meta", "form", "template"]);
 const URL_PROPERTIES = new Set(["href", "src", "action", "formAction", "poster", "cite", "background", "xLinkHref"]);
@@ -82,7 +84,7 @@ export function rehypePreviewShape() {
         const code = node.children.find((child) => child.type === "element" && child.tagName === "code");
         const language = [].concat(code?.properties?.className ?? []).map(String).find((name) => name.startsWith("language-"))?.slice(9);
         node.properties.className = [...[].concat(node.properties.className ?? []), "code"];
-        if (language) node.properties.dataLanguage = language.toUpperCase();
+        if (codeLanguageLabel(language)) node.properties.dataLanguage = codeLanguageLabel(language);
       }
       if (node.tagName === "a" && node.properties?.target === "_blank") {
         node.properties.className = [...[].concat(node.properties.className ?? []), "ext"];
@@ -112,6 +114,88 @@ export function renderFilePreview(markdown, { idPrefix = "gf-" } = {}) {
 
 const escapeText = (value) => String(value).replace(/&/gu, "&amp;").replace(/</gu, "&lt;").replace(/>/gu, "&gt;");
 
+/**
+ * The article's colours and code type (app/styles/tokens.css, the code rules in
+ * app/globals.css and a2.css), so a reader without JavaScript sees code as on
+ * the article page. The page has no theme switch: dark follows the system.
+ * tests/garden-file.test.mjs checks these against the stylesheets.
+ */
+export const PREVIEW_TOKENS = {
+  mono: '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Noto Sans Mono CJK SC", monospace',
+  sans: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif',
+  light: { paper: "#faf9f5", ink: "#1b1a18", well: "#f0eee6", tint: "rgb(27 26 24 / 5.5%)", rule: "#e6e3dc" },
+  dark: { paper: "#1f1e1d", ink: "#eeece7", well: "#262624", tint: "rgb(238 236 231 / 7%)", rule: "#3d3d3a" },
+  // .markdown-body pre in globals.css: the block's own type, under the <code> that holds the text.
+  pre: { fontSize: "12px", lineHeight: "1.7", color: "#e6e6e2" },
+};
+
+// Highlight colours are not copied by hand: every .hljs-* rule of the article's
+// stylesheets, in the order the site loads them.
+const STYLESHEETS = ["../app/globals.css", "../app/styles/a2.css"];
+const DARK_PREFIX = /^(?::root|html)\[data-theme="dark"\]\s+/u;
+const HLJS_SELECTOR = /^\.hljs-[\w-]+(?:\.[\w-]+)*(?:\s+\.hljs-[\w-]+)?$/u;
+
+/** The .hljs-* rules of some CSS, split into light (always) and dark (html[data-theme="dark"]). */
+export function highlightRules(css) {
+  const light = [];
+  const dark = [];
+  const text = css.replace(/\/\*[\s\S]*?\*\//gu, "");
+  let depth = 0;
+  let start = 0;
+  // Top-level rules only: nothing inside @media or other blocks.
+  for (let index = 0; index < text.length; index++) {
+    const char = text[index];
+    if (char === "{") {
+      if (depth === 0) {
+        const selectorText = text.slice(start, index).trim();
+        const end = text.indexOf("}", index);
+        const body = text.slice(index + 1, end);
+        if (!selectorText.startsWith("@") && !body.includes("{")) {
+          const declarations = body.split(";").map((part) => part.trim().replace(/\s*:\s*/u, ":")).filter(Boolean).join(";");
+          const selectors = selectorText.split(",").map((part) => part.trim());
+          const lightSelectors = selectors.filter((selector) => HLJS_SELECTOR.test(selector));
+          const darkSelectors = selectors.filter((selector) => DARK_PREFIX.test(selector)).map((selector) => selector.replace(DARK_PREFIX, "")).filter((selector) => HLJS_SELECTOR.test(selector));
+          if (lightSelectors.length) light.push(`${lightSelectors.join(",")}{${declarations}}`);
+          // html:root keeps the weight of html[data-theme="dark"], so the dark rules win exactly where they do on the site.
+          if (darkSelectors.length) dark.push(`${[...new Set(darkSelectors)].map((selector) => `html:root ${selector}`).join(",")}{${declarations}}`);
+          start = end + 1;
+          index = end;
+          continue;
+        }
+      }
+      depth++;
+    } else if (char === "}") {
+      depth--;
+      if (depth === 0) start = index + 1;
+    }
+  }
+  return { light, dark };
+}
+
+let previewStyle;
+/** The standalone page's stylesheet, built once per build. */
+export function previewStyleSheet() {
+  if (previewStyle) return previewStyle;
+  const rules = STYLESHEETS.map((file) => highlightRules(fs.readFileSync(new URL(file, import.meta.url), "utf8")));
+  const { mono, sans, light, dark, pre } = PREVIEW_TOKENS;
+  const theme = (colors) => `body{background:${colors.paper};color:${colors.ink}}pre{background:${colors.well}}pre code{color:${colors.ink}}:not(pre)>code{background:${colors.tint};color:${colors.ink}}th,td{border-color:${colors.rule}}`;
+  previewStyle = [
+    `body{margin:0;font:16px/1.75 ${sans}}`,
+    "main{max-width:720px;margin:0 auto;padding:32px 20px 64px}",
+    "img{max-width:100%;height:auto}",
+    `pre,code{font-family:${mono}}`,
+    `pre{margin:28px 0;padding:18px 22px;border-radius:8px;overflow-x:auto;font-size:${pre.fontSize};line-height:${pre.lineHeight};color:${pre.color}}`,
+    "pre code{display:block;background:none;padding:0;font-size:14px;line-height:1.6}",
+    `:not(pre)>code{font:400 14px/1 ${mono};padding:3px 6px;border-radius:5px}`,
+    ".table-wrap{overflow-x:auto}table{border-collapse:collapse}th,td{border:1px solid;padding:6px 10px}",
+    "a{color:inherit}.katex-html{display:none}",
+    theme(light),
+    ...rules.flatMap((sheet) => sheet.light),
+    `@media (prefers-color-scheme:dark){${theme(dark)}${rules.flatMap((sheet) => sheet.dark).join("")}}`,
+  ].join("");
+  return previewStyle;
+}
+
 /**
  * The published preview: a small standalone page, so a reader without
  * JavaScript who follows the 预览 link gets something readable. The drawer
@@ -125,7 +209,7 @@ export function previewDocument(html, { title = "预览" } = {}) {
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex">
 <title>${escapeText(title)}</title>
-<style>body{margin:0;background:#fbfaf7;color:#1f1e1c;font:16px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC",sans-serif}main{max-width:720px;margin:0 auto;padding:32px 20px 64px}img{max-width:100%;height:auto}pre{overflow:auto;padding:12px 14px;background:#f2f0ea;border-radius:8px}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.table-wrap{overflow-x:auto}table{border-collapse:collapse}th,td{border:1px solid #ddd8cc;padding:6px 10px}a{color:inherit}.katex-html{display:none}@media (prefers-color-scheme:dark){body{background:#191918;color:#e9e6df}pre{background:#252422}th,td{border-color:#3a3833}}</style>
+<style>${previewStyleSheet()}</style>
 </head>
 <body><main class="gf-preview-doc">
 ${html}

package/ui/garden/code-language.mjs

@@ -0,0 +1,48 @@
+/**
+ * The label a code block shows for its fence language. The article, the preview
+ * drawer and the standalone preview page all go through here, so ```py and
+ * ```python read the same everywhere. Common aliases map to one language; JS and
+ * TS use their abbreviations, every other language its full name in capitals
+ * (PYTHON, GO, RUST, BASH), and an unknown fence language is shown in capitals.
+ */
+const ALIASES = {
+  py: "python",
+  python3: "python",
+  js: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  jsx: "jsx",
+  ts: "typescript",
+  mts: "typescript",
+  tsx: "tsx",
+  sh: "bash",
+  zsh: "bash",
+  shell: "shell",
+  console: "shell",
+  golang: "go",
+  rs: "rust",
+  rb: "ruby",
+  kt: "kotlin",
+  yml: "yaml",
+  md: "markdown",
+  htm: "html",
+  "c++": "cpp",
+  cc: "cpp",
+  hpp: "cpp",
+  cs: "csharp",
+  docker: "dockerfile",
+  ps1: "powershell",
+  plaintext: "text",
+  txt: "text",
+};
+
+/** JavaScript and TypeScript go by their common abbreviations; everything else by its full name. */
+const NAMES = { javascript: "JS", typescript: "TS", cpp: "C++", csharp: "C#" };
+
+/** Display label for a fence language, or "" when there is none. */
+export function codeLanguageLabel(language) {
+  const raw = String(language ?? "").trim().toLowerCase();
+  if (!raw) return "";
+  const name = ALIASES[raw] ?? raw;
+  return NAMES[name] ?? name.toUpperCase();
+}

package/ui/garden/file-block.mjs

@@ -29,17 +29,17 @@ export const FILE_KEYS = ["src", "title", "note", "files"];
 export const FILE_ITEM_KEYS = ["src", "title", "note"];
 
 const FORMATS = {
-  md: { label: "Markdown", preview: "md", icon: "doc" },
-  markdown: { label: "Markdown", preview: "md", icon: "doc" },
-  html: { label: "HTML", preview: "html", icon: "code" },
-  htm: { label: "HTML", preview: "html", icon: "code" },
-  pdf: { label: "PDF", preview: "pdf", icon: "doc" },
-  zip: { label: "ZIP", preview: "", icon: "archive" },
-  gz: { label: "GZ", preview: "", icon: "archive" },
-  tgz: { label: "TGZ", preview: "", icon: "archive" },
-  "7z": { label: "7Z", preview: "", icon: "archive" },
-  rar: { label: "RAR", preview: "", icon: "archive" },
-  tar: { label: "TAR", preview: "", icon: "archive" },
+  md: { preview: "md", icon: "doc" },
+  markdown: { preview: "md", icon: "doc" },
+  html: { preview: "html", icon: "code" },
+  htm: { preview: "html", icon: "code" },
+  pdf: { preview: "pdf", icon: "doc" },
+  zip: { preview: "", icon: "archive" },
+  gz: { preview: "", icon: "archive" },
+  tgz: { preview: "", icon: "archive" },
+  "7z": { preview: "", icon: "archive" },
+  rar: { preview: "", icon: "archive" },
+  tar: { preview: "", icon: "archive" },
 };
 
 /**
@@ -69,10 +69,10 @@ export function fileName(src) {
   }
 }
 
-/** Format label: Markdown, HTML, PDF, ZIP, or the extension in capitals. */
+/** Format label: the extension in capitals (MD, HTML, PDF, ZIP, CSV …), or 文件 when there is none. */
 export function formatLabel(src) {
   const ext = fileExtension(src);
-  return FORMATS[ext]?.label ?? (ext ? ext.toUpperCase() : "文件");
+  return ext ? ext.toUpperCase() : "文件";
 }
 
 /** Icon family for the card: doc, code, archive or file. */
@@ -133,7 +133,7 @@ export function formatSize(bytes) {
   return `${text} ${units[unit]}`;
 }
 
-/** 「Markdown · 12 KB」, or just the format when the size is unknown. */
+/** 「MD · 12 KB」, or just the format when the size is unknown. */
 export function fileMeta(file) {
   const size = formatSize(file?.size);
   return [file?.format, size].filter(Boolean).join(" · ");