[{"data":1,"prerenderedAt":218},["ShallowReactive",2],{"content:\u002F2026\u002Fcode-blocks":3,"surround:\u002F2026\u002Fcode-blocks":207},{"id":4,"title":5,"body":6,"categories":181,"date":183,"description":184,"draft":185,"extension":75,"image":186,"meta":187,"navigation":189,"path":190,"permalink":191,"published":191,"readingTime":192,"recommend":191,"references":191,"seo":197,"series":198,"sitemap":199,"stem":200,"tags":201,"type":205,"updated":183,"__hash__":206},"content\u002Fposts\u002F2026\u002Fcode-blocks.md","代码块与高亮",{"type":7,"value":8,"toc":171},"minimark",[9,13,17,28,31,34,41,50,53,70,78,81,92,99,127,133,136,139,145,148,163],[10,11,12],"h2",{"id":12},"基本高亮",[14,15,16],"p",{},"代码块由 Shiki 高亮，亮暗色模式会跟随主题切换：",[18,19,25],"pre",{"className":20,"code":22,"language":23,"meta":24},[21],"language-ts","export function greet(name: string) {\n\treturn `Hello, ${name}!`\n}\n","ts","",[26,27,22],"code",{"__ignoreMap":24},[10,29,30],{"id":30},"指定文件名",[14,32,33],{},"在语言后加方括号写文件名，会自动匹配图标：",[18,35,39],{"className":36,"code":37,"filename":38,"language":23,"meta":24},[21],"export default defineEventHandler(async (event) => {\n\tconst query = queryCollection(event, 'content')\n\treturn await query.all()\n})\n","server\u002Fapi\u002Fstats.get.ts",[26,40,37],{"__ignoreMap":24},[18,42,48],{"className":43,"code":45,"filename":46,"language":47,"meta":24},[44],"language-python","def main():\n    print(\"带文件名的代码块\")\n","train.py","python",[26,49,45],{"__ignoreMap":24},[10,51,52],{"id":52},"行内代码",[14,54,55,56,62,63,69],{},"行内代码也能高亮语言并附带复制按钮：",[26,57,60],{"className":58,"code":60,"language":61,"copy":24},[59],"language-sh","pnpm generate","sh","、",[26,64,67],{"className":65,"code":67,"language":68},[66],"language-js","const answer = 42","js","。",[18,71,76],{"className":72,"code":74,"language":75,"meta":24},[73],"language-md","`pnpm generate`{lang=\"sh\" copy}\n`const answer = 42`{lang=\"js\"}\n","md",[26,77,74],{"__ignoreMap":24},[10,79,80],{"id":80},"自动折叠与换行",[14,82,83,84,87,88,91],{},"超过 ",[26,85,86],{"code":86},"triggerRows","（默认 32）行的代码块会自动折叠到 ",[26,89,90],{"code":90},"collapsedRows","（默认 16）行：",[18,93,97],{"className":94,"code":95,"filename":96,"language":23,"meta":24},[21],"export const note = '超过 32 行的代码块会自动折叠，这个文件带文件名图标'\n","long-file.ts",[26,98,95],{"__ignoreMap":24},[100,101,104],"alert",{"title":102,"type":103},"控制折叠","info",[105,106,107,115,121],"ul",{},[108,109,110,111,114],"li",{},"加 ",[26,112,113],{"code":113},"expand"," 关闭自动折叠",[108,116,110,117,120],{},[26,118,119],{"code":119},"wrap"," 开启自动换行",[108,122,110,123,126],{},[26,124,125],{"code":125},"icon=图标名"," 自定义图标",[18,128,131],{"className":129,"code":130,"language":75,"meta":24},[73],"```ts [long-file.ts] expand wrap icon=tabler:file-code\n\u002F\u002F 用四层反引号包裹外层，即可在代码块里再写代码块语法\n```\n",[26,132,130],{"__ignoreMap":24},[10,134,135],{"id":135},"缩进导航",[14,137,138],{},"代码块默认开启缩进导航（Indent Guide），竖线对齐到 4 个空格：",[18,140,143],{"className":141,"code":142,"language":23,"meta":24},[21],"function outer() {\n\tfunction inner() {\n\t\tif (true) {\n\t\t\treturn 'nested'\n\t\t}\n\t}\n\treturn inner()\n}\n",[26,144,142],{"__ignoreMap":24},[10,146,147],{"id":147},"更多转换器",[14,149,150,151,154,155,158,159,162],{},"Shiki 的转换器（如 diff 高亮）在 ",[26,152,153],{"code":153},"app\u002Fstores\u002Fshiki.ts"," 中启用。语言与主题的清单在 ",[26,156,157],{"code":157},"blog.config.ts"," 中配置。若需要为更多语言匹配图标，可扩展 ",[26,160,161],{"code":161},"app\u002Futils\u002Ficon.ts"," 的映射表。",[14,164,165,166,69],{},"关于高亮主题：代码块的配色与整站亮暗色模式一致，浅色用 Catppuccin Latte，深色用 One Dark Pro ",[167,168,170],"tip",{"tip":169},"app\u002Fstores\u002Fshiki.ts 与 blog.config.ts","查看主题配置",{"title":24,"searchDepth":172,"depth":172,"links":173},4,[174,176,177,178,179,180],{"id":12,"depth":175,"text":12},2,{"id":30,"depth":175,"text":30},{"id":52,"depth":175,"text":52},{"id":80,"depth":175,"text":80},{"id":135,"depth":175,"text":135},{"id":147,"depth":175,"text":147},[182],"功能演示","2026-10-03 10:10:00","Clarity 的代码块由 Shiki 驱动，支持语言高亮、文件名图标、自动折叠、换行、行内高亮与一键复制。",false,"\u002Fcovers\u002Fcode-blocks.jpg",{"slots":188},{},true,"\u002F2026\u002Fcode-blocks",null,{"text":193,"minutes":194,"time":195,"words":196},"2 min read",1.72,103200,344,{"title":5,"description":184},"Clarity 功能地图",{"loc":190},"posts\u002F2026\u002Fcode-blocks",[202,203,204],"代码高亮","Shiki","排版","tech","AVMVus3NuFNRAHsHzC2TZD6kVk5RIMlscq4s0zMmKe8",[208,213],{"title":209,"path":210,"stem":211,"date":212,"type":205,"children":-1},"合集与系列文章","\u002F2026\u002Fcollections","posts\u002F2026\u002Fcollections","2026-10-03 10:00:00",{"title":214,"path":215,"stem":216,"date":217,"type":205,"children":-1},"公式、图表与乐谱","\u002F2026\u002Fmath-charts-music","posts\u002F2026\u002Fmath-charts-music","2026-10-03 10:20:00",1791033609858]