[{"data":1,"prerenderedAt":337},["ShallowReactive",2],{"blog-list-en":3},[4,158,234],{"id":5,"title":6,"author":7,"body":8,"category":141,"cover":142,"date":143,"description":144,"draft":145,"extension":146,"featured":145,"meta":147,"navigation":148,"path":149,"readingTime":150,"seo":151,"stem":152,"tags":153,"updated":142,"__hash__":157},"blog_en\u002Fblog\u002Fbest-card-templates-code.md","The Best Card Templates for Sharing Code Snippets","Chat2Card Team",{"type":9,"value":10,"toc":135},"minimark",[11,16,20,24,47,51,54,117,124,128,131],[12,13,15],"h2",{"id":14},"screenshots-of-code-age-badly","Screenshots of code age badly",[17,18,19],"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.",[12,21,23],{"id":22},"pick-the-template-by-context","Pick the template by context",[25,26,27,35,41],"ul",{},[28,29,30,34],"li",{},[31,32,33],"strong",{},"Midnight"," — dark background, highest contrast for syntax highlighting. Best for sharing on dark-mode feeds.",[28,36,37,40],{},[31,38,39],{},"Tech Blue"," — cool, corporate, reads well in docs and Slack.",[28,42,43,46],{},[31,44,45],{},"Classic"," — clean light card, safe default for almost anything.",[12,48,50],{"id":49},"keep-it-short","Keep it short",[17,52,53],{},"A card is not a file. Show the part that matters:",[55,56,61],"pre",{"className":57,"code":58,"language":59,"meta":60,"style":60},"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","",[62,63,64,95,111],"code",{"__ignoreMap":60},[65,66,69,73,77,81,85,88,92],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"szBVR","function",[65,74,76],{"class":75},"sScJk"," toCard",[65,78,80],{"class":79},"sVt8B","(",[65,82,84],{"class":83},"s4XuR","markdown",[65,86,87],{"class":71},":",[65,89,91],{"class":90},"sj4cs"," string",[65,93,94],{"class":79},") {\n",[65,96,98,101,104,107],{"class":67,"line":97},2,[65,99,100],{"class":71},"  return",[65,102,103],{"class":75}," render",[65,105,106],{"class":79},"(markdown) ",[65,108,110],{"class":109},"sJ8bj","\u002F\u002F parsed locally, never uploaded\n",[65,112,114],{"class":67,"line":113},3,[65,115,116],{"class":79},"}\n",[17,118,119,120,123],{},"Long files should be split across several cards with ",[62,121,122],{},"---"," between them, so each slide shows one coherent block.",[12,125,127],{"id":126},"export-at-the-right-scale","Export at the right scale",[17,129,130],{},"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.",[132,133,134],"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":60,"searchDepth":113,"depth":113,"links":136},[137,138,139,140],{"id":14,"depth":97,"text":15},{"id":22,"depth":97,"text":23},{"id":49,"depth":97,"text":50},{"id":126,"depth":97,"text":127},"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":6,"description":144},"blog\u002Fbest-card-templates-code",[154,155,156],"Code","Templates","Developers","Z45Y9c9gOUyy1Et2CvMq1SMumXGu-RPf1xq-DN1Uioc",{"id":159,"title":160,"author":7,"body":161,"category":141,"cover":142,"date":143,"description":224,"draft":145,"extension":146,"featured":145,"meta":225,"navigation":148,"path":226,"readingTime":150,"seo":227,"stem":228,"tags":229,"updated":142,"__hash__":233},"blog_en\u002Fblog\u002Fmarkdown-xiaohongshu-covers.md","Make Xiaohongshu Covers from Markdown in Minutes",{"type":9,"value":162,"toc":218},[163,167,170,174,181,192,196,207,211],[12,164,166],{"id":165},"what-a-good-xiaohongshu-cover-needs","What a good Xiaohongshu cover needs",[17,168,169],{},"The cover is the only thing most people see in the feed. It has to do three jobs at a glance: say what the post is about, look intentional, and stay readable on a phone.",[12,171,173],{"id":172},"build-it-from-an-outline","Build it from an outline",[17,175,176,177,180],{},"Start with the text you already have — a bullet list, a how-to, a quote. Paste it into Chat2Card and switch to the ",[31,178,179],{},"Xiaohongshu Cover"," template.",[25,182,183,186,189],{},[28,184,185],{},"Use the first card as the hook: a short, punchy title.",[28,187,188],{},"Let the body cards carry the steps or points.",[28,190,191],{},"Keep each card to one idea so the reader can screenshot a single slide.",[12,193,195],{"id":194},"layout-tips-that-survive-the-feed","Layout tips that survive the feed",[25,197,198,201,204],{},[28,199,200],{},"High contrast: dark text on a light card, or light text on a dark one.",[28,202,203],{},"One accent color, not five.",[28,205,206],{},"A title size that is still legible when the card is shrunk to a thumbnail.",[12,208,210],{"id":209},"export-and-post","Export and post",[17,212,213,214,217],{},"Choose ",[31,215,216],{},"Download PNG"," at 2× for social, or 3× if you will print. Copy the image straight to your clipboard and paste it into the Xiaohongshu editor. Because the image is generated locally, there is no queue and no watermark.",{"title":60,"searchDepth":113,"depth":113,"links":219},[220,221,222,223],{"id":165,"depth":97,"text":166},{"id":172,"depth":97,"text":173},{"id":194,"depth":97,"text":195},{"id":209,"depth":97,"text":210},"Xiaohongshu (RED) covers reward bold text and clean layout. Learn how to turn a Markdown outline into a scroll-stopping cover without opening a design tool.",{},"\u002Fblog\u002Fmarkdown-xiaohongshu-covers",{"title":160,"description":224},"blog\u002Fmarkdown-xiaohongshu-covers",[230,231,232],"Xiaohongshu","Cover design","Social","K7xPCHUNyNtrcjWnRgeSHvEgY_m-aSmTmSdcwwgr21I",{"id":235,"title":236,"author":7,"body":237,"category":141,"cover":142,"date":143,"description":326,"draft":145,"extension":146,"featured":148,"meta":327,"navigation":148,"path":328,"readingTime":329,"seo":330,"stem":331,"tags":332,"updated":142,"__hash__":336},"blog_en\u002Fblog\u002Fturn-chatgpt-into-cards.md","Turn ChatGPT Answers into Shareable Cards (Without Screenshots)",{"type":9,"value":238,"toc":320},[239,243,246,258,262,282,285,289,304,308,311,317],[12,240,242],{"id":241},"why-screenshots-fall-short","Why screenshots fall short",[17,244,245],{},"When you share a screenshot of a ChatGPT or Claude conversation, you also share the scrollbar, the sidebar, the thin interface chrome, and whatever else was on screen. The text becomes a flat image: nobody can copy it, search engines cannot read it, and on a phone it is tiny.",[17,247,248,249,253,254,257],{},"A card image keeps the ",[250,251,252],"em",{},"content"," but drops the ",[250,255,256],{},"interface",". That is the whole point of Chat2Card.",[12,259,261],{"id":260},"the-workflow-in-three-steps","The workflow in three steps",[263,264,265,268,275],"ol",{},[28,266,267],{},"Copy the reply from your AI assistant as Markdown. Most assistants let you copy the raw Markdown, not just an image.",[28,269,270,271,274],{},"Open Chat2Card (Alt + Shift + C, or the toolbar icon) and click ",[31,272,273],{},"Read clipboard",".",[28,276,277,278,281],{},"Pick a template and click ",[31,279,280],{},"Copy image",", then paste directly into WeChat, Slack, Notion, or a document.",[17,283,284],{},"No upload happens. The Markdown is parsed and rendered on your device, so the text stays yours.",[12,286,288],{"id":287},"when-a-card-beats-a-screenshot","When a card beats a screenshot",[25,290,291,294,301],{},[28,292,293],{},"You are posting to Xiaohongshu, Instagram, or a blog and want it to look designed, not grabbed.",[28,295,296,297,300],{},"You want the reader to ",[250,298,299],{},"see"," clean typography instead of a blurry screenshot.",[28,302,303],{},"You need consistent branding across many posts.",[12,305,307],{"id":306},"a-note-on-privacy","A note on privacy",[17,309,310],{},"Chat2Card asks for four browser permissions and uses each for exactly one job. It makes no network request to a server, because it has none. You can verify this by turning off your internet connection — it still works.",[312,313,314],"blockquote",{},[17,315,316],{},"The best privacy policy is not having a server to trust.",[17,318,319],{},"That is the short version. The full text lives in our Privacy Policy.",{"title":60,"searchDepth":113,"depth":113,"links":321},[322,323,324,325],{"id":241,"depth":97,"text":242},{"id":260,"depth":97,"text":261},{"id":287,"depth":97,"text":288},{"id":306,"depth":97,"text":307},"A screenshot of a chat window carries scrollbars and interface chrome. Here is how to convert AI answers into clean, readable card images you can paste anywhere.",{},"\u002Fblog\u002Fturn-chatgpt-into-cards",6,{"title":236,"description":326},"blog\u002Fturn-chatgpt-into-cards",[333,334,335],"ChatGPT","Sharing","Markdown","j7xV04cei6CXp816gTS6YMuyhldMelIml0ZXMEAjhUQ",1785582069499]