Files
NewBlog/astro.config.mjs
T
TimeCrackbot 5e808a9cd4 feat: 接入 KaTeX 渲染,完成 Sätteri 迁移(Phase 3)
方案:用现成的 satteri-katex(MDAST 插件,40 行,是 rehype-katex 的移植),
而不是自己写。它跑在 MDAST 阶段,天然绕开下面这个坑。

为什么不能用 HAST 阶段做
Sätteri 把块级公式输出成 <pre><code class="language-math math-display">,
而 expressive-code 过滤所有 <pre>,会把它当成未知语言渲染成带行号的
plaintext 代码块 —— 实测 10 个块级公式全部被吃掉(math-display: 0)。
unified 时期没这问题,是因为 rehype-katex 排在 rehypePlugins 第一位,
先把 <pre><code> 换掉了。satteri-katex 的源码注释里记录的是同一个坑。

插件顺序
satteriKatex() 放在 mdastPlugins 最后:它把 math 节点换成 KaTeX 的 html
节点,若排在 reading-time / excerpt 之前,字数统计会把 KaTeX 标记也算进去。

顺带修掉一个之前漏掉的回归
reading-time / excerpt 原本用 ctx.textContent(),但它只拼接纯 text 节点,
会漏掉代码块、行内代码、公式、图片 alt。实测 LaTeX 那篇字数 830 → 488。
改用 mdast-util-to-string 的 toString()(与迁移前的实现一致),字数完全复原。
之前没发现是因为我的对比脚本只截取了 <article> 区域,而字数在它外面的 header 里。
现改为整页对比。

清理依赖(10 个,已确认无引用)
remark-math / rehype-katex / remark-directive /
remark-github-admonitions-to-directives / remark-sectionize / rehype-slug /
rehype-components / rehype-autolink-headings / @astrojs/markdown-remark /
hastscript / unist-util-visit

验证(与 unified() 基线整页对比,41 页)
- 39 页语义完全一致;2 页只剩智能标点在中文/emoji 旁的引号方向差异
  (Sätteri 的结果更正确:把开引号排成 “ 而不是 ”)。
- LaTeX 页:class="katex" 76、katex-display 10,与基线完全一致;
  块级公式不再被 expressive-code 吞掉。
- 字数/阅读时长与基线逐篇一致(830/4、1042/5、416/2)。
- pnpm build 41 页 + pagefind 通过;astro check 仍是 1 error/0 warnings
  (原有 footer.astro 报错,与本次无关)。
2026-09-17 17:52:56 +08:00

118 lines
4.4 KiB
JavaScript

import { defineConfig } from "astro/config"
import react from "@astrojs/react"
import sitemap from "@astrojs/sitemap"
import mdx from "@astrojs/mdx"
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections"
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers"
import expressiveCode from "astro-expressive-code"
import { pluginLanguageBadge } from "./src/plugins/expressive-code/language-badge"
import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button"
import { satteri, satteriHeadingIdsPlugin } from "@astrojs/markdown-satteri"
import { excerpt } from "./src/plugins/satteri/excerpt.mjs"
import { readingTime } from "./src/plugins/satteri/reading-time.mjs"
import { sectionize } from "./src/plugins/satteri/sectionize.mjs"
import { shiftHeadings } from "./src/plugins/satteri/shift-headings.mjs"
import { autolinkHeadings } from "./src/plugins/satteri/autolink-headings.mjs"
import { imageLightbox } from "./src/plugins/satteri/image-lightbox.mjs"
import { satteriKatex } from "satteri-katex"
import { site } from "./src/data/site"
export default defineConfig({
srcDir: "./src",
output: "static",
site: site.url,
trailingSlash: "always",
alias: {
"@": "./src",
},
integrations: [
expressiveCode({
themes: ["github-dark", "github-light"],
themeCssSelector: (theme) => {
// 根据主题名称返回对应的 CSS 选择器
if (theme.name === "github-light") return ":root:not(.dark)"
return ".dark"
},
plugins: [
pluginCollapsibleSections(),
pluginLineNumbers(),
pluginLanguageBadge(),
pluginCustomCopyButton(),
],
defaultProps: {
wrap: true,
overridesByLang: {
shellsession: {
showLineNumbers: false,
},
},
},
styleOverrides: {
codeBackground: "var(--codeblock-bg)",
borderRadius: "0.75rem",
borderColor: "transparent",
codeFontSize: "0.875rem",
codeFontFamily: "var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
codeLineHeight: "1.625",
frames: {
editorBackground: "var(--codeblock-bg)",
terminalBackground: "var(--codeblock-bg)",
terminalTitlebarBackground: "var(--codeblock-topbar-bg)",
editorTabBarBackground: "var(--codeblock-topbar-bg)",
editorActiveTabBackground: "transparent",
editorActiveTabIndicatorBottomColor: "var(--primary)",
editorActiveTabIndicatorTopColor: "transparent",
editorTabBarBorderBottomColor: "var(--codeblock-topbar-bg)",
terminalTitlebarBorderBottomColor: "transparent",
},
},
frames: {
showCopyToClipboardButton: false,
},
}),
react(),
sitemap(),
mdx(),
],
compressHTML: true,
markdown: {
// Astro 7 的 Sätteri 管线。以下插件是 unified 时期 remark/rehype 插件的对应移植,
// 见 src/plugins/satteri/。
//
// 注意:math 只负责「解析」,渲染成 KaTeX 需要额外的 HAST 插件 —— 尚未迁移。
processor: satteri({
// dashes: false 是为了和迁移前的输出逐字一致:Astro 的 unified 管线
// 会把直引号排成弯引号,但不转换 --- (Sätteri 默认会转成破折号)。
features: { math: true, smartPunctuation: { dashes: false } },
mdastPlugins: [
readingTime,
excerpt,
shiftHeadings(),
sectionize(),
// KaTeX 必须排在 reading-time / excerpt 之后:它把 math 节点换成 KaTeX 的
// HTML,先换的话 ctx.textContent() 会把 KaTeX 标记也算进字数。
satteriKatex(),
],
hastPlugins: [
satteriHeadingIdsPlugin(),
autolinkHeadings,
imageLightbox,
],
}),
},
vite: {
server: {
watch: {
/*
* 项目根目录下的 .pnpm-store 是 pnpm 的内容寻址仓库:5.4 万个文件、672 MB,
* 而且已经被 .gitignore 忽略。Vite 默认会把项目根整个 watch,加上它以后
* inotify 直接到顶(max_user_watches = 65536),dev server 一启动就刷屏:
* ENOSPC: System limit for number of file watchers reached
* 排除掉即可。node_modules / .git 是 Vite 默认就排除的,不用管。
*/
ignored: ["**/.pnpm-store/**"],
},
},
},
})