[{"data":1,"prerenderedAt":318},["ShallowReactive",2],{"blog-list-zh":3},[4,155,223],{"id":5,"title":6,"author":7,"body":8,"category":138,"cover":139,"date":140,"description":141,"draft":142,"extension":143,"featured":142,"meta":144,"navigation":145,"path":146,"readingTime":147,"seo":148,"stem":149,"tags":150,"updated":139,"__hash__":154},"blog_zh\u002Fzh\u002Fblog\u002Fbest-card-templates-code.md","分享代码片段最好用的卡片模板","Chat2Card Team",{"type":9,"value":10,"toc":132},"minimark",[11,16,20,23,46,49,52,115,122,125,128],[12,13,15],"h2",{"id":14},"代码截图很容易翻车","代码截图很容易\"翻车\"",[17,18,19],"p",{},"终端的照片一旦被聊天软件压缩就会失真：线条变糊、颜色发灰，别人也没法复制代码。把片段渲染成卡片，则在任何尺寸下都保持清晰。",[12,21,22],{"id":22},"按场景选模板",[24,25,26,34,40],"ul",{},[27,28,29,33],"li",{},[30,31,32],"strong",{},"Midnight","——深色背景，语法高亮对比最强，最适合发在深色模式的信息流。",[27,35,36,39],{},[30,37,38],{},"Tech Blue","——冷色调、偏商务，在文档和 Slack 里都很耐看。",[27,41,42,45],{},[30,43,44],{},"Classic","——干净的浅色卡片，几乎适用于一切的安全默认。",[12,47,48],{"id":48},"保持简短",[17,50,51],{},"卡片不是文件。只展示要紧的那部分：",[53,54,59],"pre",{"className":55,"code":56,"language":57,"meta":58,"style":58},"language-ts shiki shiki-themes github-light github-dark","function toCard(markdown: string) {\n  return render(markdown) \u002F\u002F 本地解析，从不上传\n}\n","ts","",[60,61,62,93,109],"code",{"__ignoreMap":58},[63,64,67,71,75,79,83,86,90],"span",{"class":65,"line":66},"line",1,[63,68,70],{"class":69},"szBVR","function",[63,72,74],{"class":73},"sScJk"," toCard",[63,76,78],{"class":77},"sVt8B","(",[63,80,82],{"class":81},"s4XuR","markdown",[63,84,85],{"class":69},":",[63,87,89],{"class":88},"sj4cs"," string",[63,91,92],{"class":77},") {\n",[63,94,96,99,102,105],{"class":65,"line":95},2,[63,97,98],{"class":69},"  return",[63,100,101],{"class":73}," render",[63,103,104],{"class":77},"(markdown) ",[63,106,108],{"class":107},"sJ8bj","\u002F\u002F 本地解析，从不上传\n",[63,110,112],{"class":65,"line":111},3,[63,113,114],{"class":77},"}\n",[17,116,117,118,121],{},"长文件应当用 ",[60,119,120],{},"---"," 切成多张卡片，每一页呈现一个完整的代码块。",[12,123,124],{"id":124},"选对导出比例",[17,126,127],{},"屏幕用 2×，要进幻灯片或打印用 3×。把图片复制到剪贴板，粘到任何需要代码的地方即可。",[129,130,131],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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":58,"searchDepth":111,"depth":111,"links":133},[134,135,136,137],{"id":14,"depth":95,"text":15},{"id":22,"depth":95,"text":22},{"id":48,"depth":95,"text":48},{"id":124,"depth":95,"text":124},"指南",null,"2026-07-31","代码值得比截图更好的对待。了解如何把一段代码变成清晰、带语法高亮的卡片图，并为不同场景选对模板。",false,"md",{},true,"\u002Fzh\u002Fblog\u002Fbest-card-templates-code",5,{"title":6,"description":141},"zh\u002Fblog\u002Fbest-card-templates-code",[151,152,153],"代码","模板","开发者","SsGu8hWIX5ZwymqykPXn012m6r8kBGQag5bV0-6jeDw",{"id":156,"title":157,"author":7,"body":158,"category":138,"cover":139,"date":140,"description":213,"draft":142,"extension":143,"featured":142,"meta":214,"navigation":145,"path":215,"readingTime":147,"seo":216,"stem":217,"tags":218,"updated":139,"__hash__":222},"blog_zh\u002Fzh\u002Fblog\u002Fmarkdown-xiaohongshu-covers.md","用 Markdown 几分钟做出小红书封面",{"type":9,"value":159,"toc":207},[160,163,166,169,176,187,190,201,204],[12,161,162],{"id":162},"一张好封面需要什么",[17,164,165],{},"封面是大多数人在信息流里唯一会看到的东西。它必须在第一眼完成三件事：说清帖子讲什么、看起来有设计感、在手机上依然清晰可读。",[12,167,168],{"id":168},"用大纲来搭",[17,170,171,172,175],{},"从你已有的文字开始——一个列表、一份教程、一句金句。把它粘进 Chat2Card，切换到",[30,173,174],{},"小红书封面","模板。",[24,177,178,181,184],{},[27,179,180],{},"第一张卡片做钩子：一句短而有力的标题。",[27,182,183],{},"让正文卡片承载步骤或要点。",[27,185,186],{},"每张卡片只讲一个点，方便读者单独截图某一页。",[12,188,189],{"id":189},"能在信息流里活下来的排版技巧",[24,191,192,195,198],{},[27,193,194],{},"高对比：浅色卡片配深色字，或深色卡片配浅色字。",[27,196,197],{},"一种强调色，而不是五种。",[27,199,200],{},"标题字号在缩成缩略图时依然可读。",[12,202,203],{"id":203},"导出与发布",[17,205,206],{},"社交平台选 2× 导出 PNG，要打印则选 3×。把图片直接复制到剪贴板，粘进小红书编辑器即可。因为图片在本地生成，没有排队，也没有水印。",{"title":58,"searchDepth":111,"depth":111,"links":208},[209,210,211,212],{"id":162,"depth":95,"text":162},{"id":168,"depth":95,"text":168},{"id":189,"depth":95,"text":189},{"id":203,"depth":95,"text":203},"小红书封面偏爱醒目的文字和干净的版式。了解如何把一个 Markdown 大纲变成吸睛的封面，无需打开任何设计工具。",{},"\u002Fzh\u002Fblog\u002Fmarkdown-xiaohongshu-covers",{"title":157,"description":213},"zh\u002Fblog\u002Fmarkdown-xiaohongshu-covers",[219,220,221],"小红书","封面设计","社交","oJs8hmfXYxi3j7oLejKFn-XKjUVH73payqVgLFJFzkc",{"id":224,"title":225,"author":7,"body":226,"category":138,"cover":139,"date":140,"description":307,"draft":142,"extension":143,"featured":145,"meta":308,"navigation":145,"path":309,"readingTime":310,"seo":311,"stem":312,"tags":313,"updated":139,"__hash__":317},"blog_zh\u002Fzh\u002Fblog\u002Fturn-chatgpt-into-cards.md","把 ChatGPT 回答变成可分享的卡片（不用截图）",{"type":9,"value":227,"toc":301},[228,231,234,246,249,269,272,275,286,289,292,298],[12,229,230],{"id":230},"为什么截图不够好",[17,232,233],{},"当你分享一张 ChatGPT 或 Claude 对话的截图时，你也一并分享了滚动条、侧边栏、界面边框，以及屏幕上其它的东西。文字变成了一张扁平的图片：别人无法复制、搜索引擎无法读取，在手机上还会变得很小。",[17,235,236,237,241,242,245],{},"卡片图保留了",[238,239,240],"em",{},"内容","，却丢掉了",[238,243,244],{},"界面","。这正是 Chat2Card 的出发点。",[12,247,248],{"id":248},"三步搞定",[250,251,252,255,262],"ol",{},[27,253,254],{},"把 AI 助手的回答以 Markdown 形式复制下来。多数助手都支持复制原始 Markdown，而不只是截图。",[27,256,257,258,261],{},"打开 Chat2Card（Alt + Shift + C，或点击工具栏图标），然后点击",[30,259,260],{},"读取剪贴板","。",[27,263,264,265,268],{},"选一套模板，点击",[30,266,267],{},"复制图片","，直接粘贴到微信、Slack、Notion 或文档里。",[17,270,271],{},"全程不上传。Markdown 在你的设备上被解析并渲染，文字始终属于你。",[12,273,274],{"id":274},"什么时候卡片比截图更好",[24,276,277,280,283],{},[27,278,279],{},"你要发到小红书、Instagram 或博客，希望它看起来像设计过的，而不是随手截的。",[27,281,282],{},"你希望读者看到的是干净的排版，而不是模糊的截图。",[27,284,285],{},"你需要在很多帖子之间保持一致的风格。",[12,287,288],{"id":288},"关于隐私",[17,290,291],{},"Chat2Card 申请了四项浏览器权限，每一项都只用于一个用途。它不会向服务器发起任何网络请求，因为它根本没有服务器。你可以断网验证——它照样能用。",[293,294,295],"blockquote",{},[17,296,297],{},"最好的隐私政策，就是没有需要信任的服务器。",[17,299,300],{},"以上是精简版，完整内容见我们的《隐私政策》。",{"title":58,"searchDepth":111,"depth":111,"links":302},[303,304,305,306],{"id":230,"depth":95,"text":230},{"id":248,"depth":95,"text":248},{"id":274,"depth":95,"text":274},{"id":288,"depth":95,"text":288},"聊天窗口的截图带着滚动条和界面边框。本文介绍如何把 AI 回答转成干净、可读的卡片图，直接粘贴到任何地方。",{},"\u002Fzh\u002Fblog\u002Fturn-chatgpt-into-cards",6,{"title":225,"description":307},"zh\u002Fblog\u002Fturn-chatgpt-into-cards",[314,315,316],"ChatGPT","分享","Markdown","ytGUvQRI7uY34QtEt60FzJ4ud4utAj_5nPuUWR1TS8s",1785582069499]