[{"data":1,"prerenderedAt":489},["ShallowReactive",2],{"guide-markdown-preview-vs-code-ides":3},{"id":4,"title":5,"body":6,"date":480,"description":481,"extension":482,"meta":483,"navigation":292,"path":484,"readingTime":485,"seo":486,"stem":487,"__hash__":488},"guides\u002Fguides\u002Fmarkdown-preview-vs-code-ides.md","Markdown Preview in VS Code and Other IDEs",{"type":7,"value":8,"toc":470},"minimark",[9,13,18,38,41,93,100,127,130,153,157,167,170,196,203,207,210,266,271,305,309,312,315,344,347,351,354,381,384,402,406,426,430,451,455,466],[10,11,12],"p",{},"Writing Markdown is only half the workflow. You also need to see how it renders — headings, lists, code blocks, tables, and embedded images. Most modern editors include a built-in Markdown preview, and third-party extensions add features like live reload, custom styling, and GFM support.",[14,15,17],"h2",{"id":16},"vs-code-built-in-preview","VS Code Built-In Preview",[10,19,20,21,25,26,29,30,33,34,37],{},"VS Code ships with a Markdown preview out of the box. Open a ",[22,23,24],"code",{},".md"," file and press ",[22,27,28],{},"Ctrl+Shift+V"," (Windows\u002FLinux) or ",[22,31,32],{},"Cmd+Shift+V"," (macOS) to open a preview tab. For a side-by-side view, use ",[22,35,36],{},"Ctrl+K V"," — the editor sits on the left, and the preview updates on the right as you type.",[10,39,40],{},"The built-in preview supports CommonMark by default. You can enable GitHub Flavored Markdown (GFM) — tables, task lists, strikethrough — through workspace settings:",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-json shiki shiki-themes github-light github-dark","{\n  \"markdown.preview.breaks\": \"on\",\n  \"markdown.preview.typographer\": true\n}\n","json","",[22,49,50,59,76,87],{"__ignoreMap":47},[51,52,55],"span",{"class":53,"line":54},"line",1,[51,56,58],{"class":57},"sVt8B","{\n",[51,60,62,66,69,73],{"class":53,"line":61},2,[51,63,65],{"class":64},"sj4cs","  \"markdown.preview.breaks\"",[51,67,68],{"class":57},": ",[51,70,72],{"class":71},"sZZnC","\"on\"",[51,74,75],{"class":57},",\n",[51,77,79,82,84],{"class":53,"line":78},3,[51,80,81],{"class":64},"  \"markdown.preview.typographer\"",[51,83,68],{"class":57},[51,85,86],{"class":64},"true\n",[51,88,90],{"class":53,"line":89},4,[51,91,92],{"class":57},"}\n",[10,94,95,96,99],{},"Custom CSS lets you match the preview to your documentation site's actual styling. Create a ",[22,97,98],{},".vscode\u002Fmarkdown.css"," file and reference it in settings:",[42,101,103],{"className":44,"code":102,"language":46,"meta":47,"style":47},"{\n  \"markdown.styles\": [\".vscode\u002Fmarkdown.css\"]\n}\n",[22,104,105,109,123],{"__ignoreMap":47},[51,106,107],{"class":53,"line":54},[51,108,58],{"class":57},[51,110,111,114,117,120],{"class":53,"line":61},[51,112,113],{"class":64},"  \"markdown.styles\"",[51,115,116],{"class":57},": [",[51,118,119],{"class":71},"\".vscode\u002Fmarkdown.css\"",[51,121,122],{"class":57},"]\n",[51,124,125],{"class":53,"line":78},[51,126,92],{"class":57},[10,128,129],{},"Popular VS Code Markdown extensions:",[131,132,133,141,147],"ul",{},[134,135,136,140],"li",{},[137,138,139],"strong",{},"Markdown All in One"," — keyboard shortcuts, table of contents, auto-preview",[134,142,143,146],{},[137,144,145],{},"Markdown Preview Enhanced"," — Mermaid diagrams, MathJax, presentation mode",[134,148,149,152],{},[137,150,151],{},"markdownlint"," — linting and style enforcement as you write",[14,154,156],{"id":155},"jetbrains-ides-intellij-webstorm-pycharm","JetBrains IDEs (IntelliJ, WebStorm, PyCharm)",[10,158,159,160,162,163,166],{},"JetBrains IDEs include a Markdown preview panel that opens automatically when you edit ",[22,161,24],{}," files. Click the ",[137,164,165],{},"Preview"," tab in the editor's bottom-right corner.",[10,168,169],{},"Key features:",[131,171,172,178,184,190],{},[134,173,174,177],{},[137,175,176],{},"Split editor\u002Fpreview"," — drag the divider to adjust the layout",[134,179,180,183],{},[137,181,182],{},"Multiple preview providers"," — switch between JavaFX, JCEF, and Jupyter renderers in Settings → Languages & Frameworks → Markdown",[134,185,186,189],{},[137,187,188],{},"Custom CSS"," — add your own stylesheet under the preview provider settings",[134,191,192,195],{},[137,193,194],{},"GFM support"," — tables, task lists, and syntax highlighting in fenced code blocks work by default",[10,197,198,199,202],{},"The IntelliJ Markdown plugin also supports navigation — ",[22,200,201],{},"Ctrl+Click"," a relative link to jump to the target file, and auto-complete for link paths.",[14,204,206],{"id":205},"vim-and-neovim","Vim and Neovim",[10,208,209],{},"Vim has no built-in preview, but several plugins fill the gap:",[211,212,213,229],"table",{},[214,215,216],"thead",{},[217,218,219,223,226],"tr",{},[220,221,222],"th",{},"Plugin",[220,224,225],{},"Preview Method",[220,227,228],{},"Features",[230,231,232,244,255],"tbody",{},[217,233,234,238,241],{},[235,236,237],"td",{},"markdown-preview.nvim",[235,239,240],{},"Browser (live)",[235,242,243],{},"Live reload, Mermaid, MathJax",[217,245,246,249,252],{},[235,247,248],{},"vim-markdown",[235,250,251],{},"Inline rendering",[235,253,254],{},"Folding, conceal, syntax",[217,256,257,260,263],{},[235,258,259],{},"glow.nvim",[235,261,262],{},"Terminal (glow)",[235,264,265],{},"Renders in floating window",[10,267,268,270],{},[22,269,237],{}," is the most popular choice. It starts a local server and opens your default browser. Every save triggers a live reload — the browser tab updates instantly.",[42,272,276],{"className":273,"code":274,"language":275,"meta":47,"style":47},"language-vim shiki shiki-themes github-light github-dark","\" Install with vim-plug\nPlug 'iamcco\u002Fmarkdown-preview.nvim', { 'do': 'cd app && npm install' }\n\n\" Keybindings\nnmap \u003CC-p> \u003CPlug>MarkdownPreviewToggle\n","vim",[22,277,278,283,288,294,299],{"__ignoreMap":47},[51,279,280],{"class":53,"line":54},[51,281,282],{},"\" Install with vim-plug\n",[51,284,285],{"class":53,"line":61},[51,286,287],{},"Plug 'iamcco\u002Fmarkdown-preview.nvim', { 'do': 'cd app && npm install' }\n",[51,289,290],{"class":53,"line":78},[51,291,293],{"emptyLinePlaceholder":292},true,"\n",[51,295,296],{"class":53,"line":89},[51,297,298],{},"\" Keybindings\n",[51,300,302],{"class":53,"line":301},5,[51,303,304],{},"nmap \u003CC-p> \u003CPlug>MarkdownPreviewToggle\n",[14,306,308],{"id":307},"browser-based-preview-tools","Browser-Based Preview Tools",[10,310,311],{},"Sometimes you need to preview Markdown outside your editor — when reviewing a file on a shared drive, checking a README before committing, or collaborating with non-technical teammates.",[10,313,314],{},"Online Markdown preview tools offer:",[131,316,317,326,332,338],{},[134,318,319,322,323,325],{},[137,320,321],{},"Instant rendering"," — paste or drag a ",[22,324,24],{}," file and see the result",[134,327,328,331],{},[137,329,330],{},"GFM compatibility"," — tables, task lists, autolinks, and footnotes",[134,333,334,337],{},[137,335,336],{},"Export options"," — copy rendered HTML, download as PDF",[134,339,340,343],{},[137,341,342],{},"No installation"," — works on any device with a browser",[10,345,346],{},"This is where a dedicated preview tool adds value beyond what editors provide. You get a consistent, portable preview without installing plugins or configuring CSS.",[14,348,350],{"id":349},"preview-consistency-tips","Preview Consistency Tips",[10,352,353],{},"Your editor's preview may not match your production site. These discrepancies cause formatting surprises after publishing:",[355,356,357,363,369,375],"ol",{},[134,358,359,362],{},[137,360,361],{},"CSS differences"," — editor previews use generic styles; your site uses custom fonts, spacing, and colors",[134,364,365,368],{},[137,366,367],{},"Markdown dialect"," — GFM adds tables and task lists that CommonMark lacks",[134,370,371,374],{},[137,372,373],{},"Plugin rendering"," — Mermaid diagrams, math blocks, and custom shortcodes may render differently",[134,376,377,380],{},[137,378,379],{},"Image paths"," — relative image URLs that work locally may break in production",[10,382,383],{},"To minimize surprises:",[131,385,386,389,396,399],{},[134,387,388],{},"Configure your editor preview CSS to match your production stylesheet",[134,390,391,392,395],{},"Use the same Markdown parser in preview and production (e.g., ",[22,393,394],{},"remark"," with matching plugins)",[134,397,398],{},"Test with the same GFM dialect your hosting platform uses",[134,400,401],{},"Validate image paths against your deployment directory structure",[14,403,405],{"id":404},"key-takeaways","Key Takeaways",[131,407,408,411,414,420,423],{},[134,409,410],{},"VS Code includes a built-in Markdown preview with split-view and custom CSS support",[134,412,413],{},"JetBrains IDEs offer multiple preview renderers and inline link navigation",[134,415,416,417,419],{},"Vim users rely on plugins like ",[22,418,237],{}," for browser-based live preview",[134,421,422],{},"Browser-based tools provide a portable preview option without editor configuration",[134,424,425],{},"Match your preview CSS and Markdown dialect to your production site to avoid formatting surprises",[14,427,429],{"id":428},"related-guides","Related Guides",[131,431,432,439,445],{},[134,433,434],{},[435,436,438],"a",{"href":437},"\u002Fguides\u002Fmarkdown-preview-guide","Markdown Preview: Real-Time Rendering for Your Documents",[134,440,441],{},[435,442,444],{"href":443},"\u002Fguides\u002Fgithub-flavored-markdown","GitHub Flavored Markdown: Extensions and Syntax Guide",[134,446,447],{},[435,448,450],{"href":449},"\u002Fguides\u002Fmarkdown-writing-workflow","Markdown Writing Workflow: From Draft to Published",[14,452,454],{"id":453},"try-it-yourself","Try It Yourself",[10,456,457,458,462,463,465],{},"Preview your Markdown files instantly with our free ",[435,459,461],{"href":460},"\u002Ftools\u002Fmarkdown-preview","Markdown Preview"," tool. Paste your content or upload a ",[22,464,24],{}," file — see GFM-rendered output with tables, code blocks, and links in seconds.",[467,468,469],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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":47,"searchDepth":61,"depth":61,"links":471},[472,473,474,475,476,477,478,479],{"id":16,"depth":61,"text":17},{"id":155,"depth":61,"text":156},{"id":205,"depth":61,"text":206},{"id":307,"depth":61,"text":308},{"id":349,"depth":61,"text":350},{"id":404,"depth":61,"text":405},{"id":428,"depth":61,"text":429},{"id":453,"depth":61,"text":454},"2026-05-28","Learn how to preview Markdown files in VS Code, JetBrains IDEs, Vim, and other editors — with tips on live reload, custom CSS, and extensions.","md",{"immutable":292},"\u002Fguides\u002Fmarkdown-preview-vs-code-ides",6,{"title":5,"description":481},"guides\u002Fmarkdown-preview-vs-code-ides","5NUpOToild-gwFgNDz1y6MHoQ-RtWTsF-eVGLidlc9k",1780401335115]