[{"data":1,"prerenderedAt":563},["ShallowReactive",2],{"blog-posts":3,"blog-post-nuxt-mdx-ssg":446},[4,275],{"id":5,"title":6,"body":7,"date":263,"description":13,"extension":264,"meta":265,"navigation":180,"path":266,"seo":267,"stem":268,"summary":269,"tags":270,"__hash__":274},"blog\u002Fblog\u002Fshiki-mac-window.md","Shiki 高亮与 Mac 窗口代码预览",{"type":8,"value":9,"toc":256},"minimark",[10,14,18,21,122,126,133,235,238,245,249,252],[11,12,13],"p",{},"文章里的代码有两种样子：普通高亮块，以及套上 Mac 窗口铬的预览。",[15,16,17],"h2",{"id":17},"普通代码块",[11,19,20],{},"默认围栏就是普通块：",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nconst colorMode = useColorMode()\nconst isDark = computed(() => colorMode.value === \"dark\")\n\u003C\u002Fscript>\n","vue","",[29,30,31,61,81,112],"code",{"__ignoreMap":27},[32,33,36,40,44,48,51,54,58],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sVt8B","\u003C",[32,41,43],{"class":42},"s9eBZ","script",[32,45,47],{"class":46},"sScJk"," setup",[32,49,50],{"class":46}," lang",[32,52,53],{"class":38},"=",[32,55,57],{"class":56},"sZZnC","\"ts\"",[32,59,60],{"class":38},">\n",[32,62,64,68,72,75,78],{"class":34,"line":63},2,[32,65,67],{"class":66},"szBVR","const",[32,69,71],{"class":70},"sj4cs"," colorMode",[32,73,74],{"class":66}," =",[32,76,77],{"class":46}," useColorMode",[32,79,80],{"class":38},"()\n",[32,82,84,86,89,91,94,97,100,103,106,109],{"class":34,"line":83},3,[32,85,67],{"class":66},[32,87,88],{"class":70}," isDark",[32,90,74],{"class":66},[32,92,93],{"class":46}," computed",[32,95,96],{"class":38},"(() ",[32,98,99],{"class":66},"=>",[32,101,102],{"class":38}," colorMode.value ",[32,104,105],{"class":66},"===",[32,107,108],{"class":56}," \"dark\"",[32,110,111],{"class":38},")\n",[32,113,115,118,120],{"class":34,"line":114},4,[32,116,117],{"class":38},"\u003C\u002F",[32,119,43],{"class":42},[32,121,60],{"class":38},[15,123,125],{"id":124},"mac-窗口预览","Mac 窗口预览",[11,127,128,129,132],{},"用 ",[29,130,131],{},"MacWindow"," 包住围栏，得到红绿灯标题栏：",[134,135,137],"mac-window",{"title":136},"utils\u002Fcn.ts",[22,138,142],{"className":139,"code":140,"language":141,"meta":27,"style":27},"language-ts shiki shiki-themes github-light github-dark","import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","ts",[29,143,144,164,176,182,212,229],{"__ignoreMap":27},[32,145,146,149,152,155,158,161],{"class":34,"line":35},[32,147,148],{"class":66},"import",[32,150,151],{"class":38}," { clsx, ",[32,153,154],{"class":66},"type",[32,156,157],{"class":38}," ClassValue } ",[32,159,160],{"class":66},"from",[32,162,163],{"class":56}," \"clsx\"\n",[32,165,166,168,171,173],{"class":34,"line":63},[32,167,148],{"class":66},[32,169,170],{"class":38}," { twMerge } ",[32,172,160],{"class":66},[32,174,175],{"class":56}," \"tailwind-merge\"\n",[32,177,178],{"class":34,"line":83},[32,179,181],{"emptyLinePlaceholder":180},true,"\n",[32,183,184,187,190,193,196,199,203,206,209],{"class":34,"line":114},[32,185,186],{"class":66},"export",[32,188,189],{"class":66}," function",[32,191,192],{"class":46}," cn",[32,194,195],{"class":38},"(",[32,197,198],{"class":66},"...",[32,200,202],{"class":201},"s4XuR","inputs",[32,204,205],{"class":66},":",[32,207,208],{"class":46}," ClassValue",[32,210,211],{"class":38},"[]) {\n",[32,213,215,218,221,223,226],{"class":34,"line":214},5,[32,216,217],{"class":66},"  return",[32,219,220],{"class":46}," twMerge",[32,222,195],{"class":38},[32,224,225],{"class":46},"clsx",[32,227,228],{"class":38},"(inputs))\n",[32,230,232],{"class":34,"line":231},6,[32,233,234],{"class":38},"}\n",[15,236,237],{"id":237},"主题切换",[11,239,240,241,244],{},"Shiki 一次输出 light \u002F dark 两套 token。页面根节点带 ",[29,242,243],{},".dark"," 时换色，不重新请求。",[246,247,248],"h3",{"id":248},"克制",[11,250,251],{},"窗口只用于需要「这是一段可运行源码」的地方。不要给每一段 snippet 都加铬。",[253,254,255],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":27,"searchDepth":63,"depth":63,"links":257},[258,259,260],{"id":17,"depth":63,"text":17},{"id":124,"depth":63,"text":125},{"id":237,"depth":63,"text":237,"children":261},[262],{"id":248,"depth":83,"text":248},"2026-08-18","md",{},"\u002Fblog\u002Fshiki-mac-window",{"title":6,"description":13},"blog\u002Fshiki-mac-window","代码块默认走 Shiki。需要 macOS 红绿灯窗口时，用 MacWindow 组件包一层即可。",[271,272,273],"Shiki","MagicUI","TypeScript","uqg8GW9kTlMcHu-t92CcR-NaoVvGzAyXpRUbQYp5vIY",{"id":276,"title":277,"body":278,"date":435,"description":436,"extension":264,"meta":437,"navigation":180,"path":438,"seo":439,"stem":440,"summary":441,"tags":442,"__hash__":445},"blog\u002Fblog\u002Fnuxt-mdx-ssg.md","Nuxt 3 静态博客：Markdown 与 Frontmatter",{"type":8,"value":279,"toc":428},[280,287,290,293,296,378,382,385,413,416,419,422,425],[11,281,282,283,286],{},"文章源文件放在仓库的 ",[29,284,285],{},"content\u002Fblog"," 里。构建时读取 Markdown frontmatter，就能拿到标题、日期、标签和摘要。",[15,288,289],{"id":289},"为什么用静态生成",[11,291,292],{},"个人博客没有实时评论流、没有编辑后台。文件就是数据源。部署一次，全站 HTML 预渲染完成。",[11,294,295],{},"下面是一个普通代码块，用 Shiki 做成 VS Code 同款高亮：",[22,297,299],{"className":139,"code":298,"language":141,"meta":27,"style":27},"const { data: posts } = await useAsyncData(\"blog-posts\", () =>\n  queryCollection(\"blog\").order(\"date\", \"DESC\").all(),\n)\n",[29,300,301,339,374],{"__ignoreMap":27},[32,302,303,305,308,311,314,317,320,322,325,328,330,333,336],{"class":34,"line":35},[32,304,67],{"class":66},[32,306,307],{"class":38}," { ",[32,309,310],{"class":201},"data",[32,312,313],{"class":38},": ",[32,315,316],{"class":70},"posts",[32,318,319],{"class":38}," } ",[32,321,53],{"class":66},[32,323,324],{"class":66}," await",[32,326,327],{"class":46}," useAsyncData",[32,329,195],{"class":38},[32,331,332],{"class":56},"\"blog-posts\"",[32,334,335],{"class":38},", () ",[32,337,338],{"class":66},"=>\n",[32,340,341,344,346,349,352,355,357,360,363,366,368,371],{"class":34,"line":63},[32,342,343],{"class":46},"  queryCollection",[32,345,195],{"class":38},[32,347,348],{"class":56},"\"blog\"",[32,350,351],{"class":38},").",[32,353,354],{"class":46},"order",[32,356,195],{"class":38},[32,358,359],{"class":56},"\"date\"",[32,361,362],{"class":38},", ",[32,364,365],{"class":56},"\"DESC\"",[32,367,351],{"class":38},[32,369,370],{"class":46},"all",[32,372,373],{"class":38},"(),\n",[32,375,376],{"class":34,"line":83},[32,377,111],{"class":38},[15,379,381],{"id":380},"frontmatter-约定","Frontmatter 约定",[11,383,384],{},"每篇文章顶部只保留这几项：",[386,387,388,395,401,407],"ul",{},[389,390,391,394],"li",{},[29,392,393],{},"title"," 标题",[389,396,397,400],{},[29,398,399],{},"date"," 发布日期",[389,402,403,406],{},[29,404,405],{},"tags"," 标签数组",[389,408,409,412],{},[29,410,411],{},"summary"," 列表页摘要",[15,414,415],{"id":415},"阅读时长",[11,417,418],{},"按正文词数除以 200，至少 1 分钟。没有第三方统计。",[246,420,421],{"id":421},"目录从哪来",[11,423,424],{},"构建时扫描二级、三级标题，生成右侧 TOC。点击锚点即可跳转。",[253,426,427],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":27,"searchDepth":63,"depth":63,"links":429},[430,431,432],{"id":289,"depth":63,"text":289},{"id":380,"depth":63,"text":381},{"id":415,"depth":63,"text":415,"children":433},[434],{"id":421,"depth":83,"text":421},"2026-08-12","文章源文件放在仓库的 content\u002Fblog 里。构建时读取 Markdown frontmatter，就能拿到标题、日期、标签和摘要。",{},"\u002Fblog\u002Fnuxt-mdx-ssg",{"title":277,"description":436},"blog\u002Fnuxt-mdx-ssg","用本地 content\u002Fblog 目录里的 Markdown 生成整站，不接数据库，也不做登录后台。标题、日期、标签和摘要都写在 frontmatter 里。",[443,444],"Nuxt","Vue","3ebn3m2XqNZOiQGLG6z0Bg3e3b8Eykk1mIoLcNk5f54",{"id":276,"title":277,"body":447,"date":435,"description":436,"extension":264,"meta":560,"navigation":180,"path":438,"seo":561,"stem":440,"summary":441,"tags":562,"__hash__":445},{"type":8,"value":448,"toc":553},[449,453,455,457,459,521,523,525,543,545,547,549,551],[11,450,282,451,286],{},[29,452,285],{},[15,454,289],{"id":289},[11,456,292],{},[11,458,295],{},[22,460,461],{"className":139,"code":298,"language":141,"meta":27,"style":27},[29,462,463,491,517],{"__ignoreMap":27},[32,464,465,467,469,471,473,475,477,479,481,483,485,487,489],{"class":34,"line":35},[32,466,67],{"class":66},[32,468,307],{"class":38},[32,470,310],{"class":201},[32,472,313],{"class":38},[32,474,316],{"class":70},[32,476,319],{"class":38},[32,478,53],{"class":66},[32,480,324],{"class":66},[32,482,327],{"class":46},[32,484,195],{"class":38},[32,486,332],{"class":56},[32,488,335],{"class":38},[32,490,338],{"class":66},[32,492,493,495,497,499,501,503,505,507,509,511,513,515],{"class":34,"line":63},[32,494,343],{"class":46},[32,496,195],{"class":38},[32,498,348],{"class":56},[32,500,351],{"class":38},[32,502,354],{"class":46},[32,504,195],{"class":38},[32,506,359],{"class":56},[32,508,362],{"class":38},[32,510,365],{"class":56},[32,512,351],{"class":38},[32,514,370],{"class":46},[32,516,373],{"class":38},[32,518,519],{"class":34,"line":83},[32,520,111],{"class":38},[15,522,381],{"id":380},[11,524,384],{},[386,526,527,531,535,539],{},[389,528,529,394],{},[29,530,393],{},[389,532,533,400],{},[29,534,399],{},[389,536,537,406],{},[29,538,405],{},[389,540,541,412],{},[29,542,411],{},[15,544,415],{"id":415},[11,546,418],{},[246,548,421],{"id":421},[11,550,424],{},[253,552,427],{},{"title":27,"searchDepth":63,"depth":63,"links":554},[555,556,557],{"id":289,"depth":63,"text":289},{"id":380,"depth":63,"text":381},{"id":415,"depth":63,"text":415,"children":558},[559],{"id":421,"depth":83,"text":421},{},{"title":277,"description":436},[443,444],1789884288004]