[{"data":1,"prerenderedAt":157},["ShallowReactive",2],{"blog-en-best-card-templates-code":3},{"id":4,"title":5,"author":6,"body":7,"category":140,"cover":141,"date":142,"description":143,"draft":144,"extension":145,"featured":144,"meta":146,"navigation":147,"path":148,"readingTime":149,"seo":150,"stem":151,"tags":152,"updated":141,"__hash__":156},"blog_en\u002Fblog\u002Fbest-card-templates-code.md","The Best Card Templates for Sharing Code Snippets","Chat2Card Team",{"type":8,"value":9,"toc":134},"minimark",[10,15,19,23,46,50,53,116,123,127,130],[11,12,14],"h2",{"id":13},"screenshots-of-code-age-badly","Screenshots of code age badly",[16,17,18],"p",{},"A photo of your terminal loses fidelity the moment it is compressed for a chat app. Lines blur, colors wash out, and nobody can copy the code. Rendering the snippet as a card keeps it sharp at any size.",[11,20,22],{"id":21},"pick-the-template-by-context","Pick the template by context",[24,25,26,34,40],"ul",{},[27,28,29,33],"li",{},[30,31,32],"strong",{},"Midnight"," — dark background, highest contrast for syntax highlighting. Best for sharing on dark-mode feeds.",[27,35,36,39],{},[30,37,38],{},"Tech Blue"," — cool, corporate, reads well in docs and Slack.",[27,41,42,45],{},[30,43,44],{},"Classic"," — clean light card, safe default for almost anything.",[11,47,49],{"id":48},"keep-it-short","Keep it short",[16,51,52],{},"A card is not a file. Show the part that matters:",[54,55,60],"pre",{"className":56,"code":57,"language":58,"meta":59,"style":59},"language-ts shiki shiki-themes github-light github-dark","function toCard(markdown: string) {\n  return render(markdown) \u002F\u002F parsed locally, never uploaded\n}\n","ts","",[61,62,63,94,110],"code",{"__ignoreMap":59},[64,65,68,72,76,80,84,87,91],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"szBVR","function",[64,73,75],{"class":74},"sScJk"," toCard",[64,77,79],{"class":78},"sVt8B","(",[64,81,83],{"class":82},"s4XuR","markdown",[64,85,86],{"class":70},":",[64,88,90],{"class":89},"sj4cs"," string",[64,92,93],{"class":78},") {\n",[64,95,97,100,103,106],{"class":66,"line":96},2,[64,98,99],{"class":70},"  return",[64,101,102],{"class":74}," render",[64,104,105],{"class":78},"(markdown) ",[64,107,109],{"class":108},"sJ8bj","\u002F\u002F parsed locally, never uploaded\n",[64,111,113],{"class":66,"line":112},3,[64,114,115],{"class":78},"}\n",[16,117,118,119,122],{},"Long files should be split across several cards with ",[61,120,121],{},"---"," between them, so each slide shows one coherent block.",[11,124,126],{"id":125},"export-at-the-right-scale","Export at the right scale",[16,128,129],{},"Use 2× for screens and 3× if the card will appear in a slide deck or print. Copy the image to the clipboard and paste it wherever code goes.",[131,132,133],"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":59,"searchDepth":112,"depth":112,"links":135},[136,137,138,139],{"id":13,"depth":96,"text":14},{"id":21,"depth":96,"text":22},{"id":48,"depth":96,"text":49},{"id":125,"depth":96,"text":126},"Guide",null,"2026-07-31","Code deserves better than a screenshot. Here is how to turn a snippet into a crisp, syntax-highlighted card image with the right template for the job.",false,"md",{},true,"\u002Fblog\u002Fbest-card-templates-code",5,{"title":5,"description":143},"blog\u002Fbest-card-templates-code",[153,154,155],"Code","Templates","Developers","Z45Y9c9gOUyy1Et2CvMq1SMumXGu-RPf1xq-DN1Uioc",1785582070062]