[{"data":1,"prerenderedAt":558},["ShallowReactive",2],{"guide-markdown-preview-guide":3},{"id":4,"title":5,"body":6,"date":548,"description":549,"extension":550,"meta":551,"navigation":552,"path":553,"readingTime":554,"seo":555,"stem":556,"__hash__":557},"guides\u002Fguides\u002Fmarkdown-preview-guide.md","Markdown Preview: Writing and Rendering Markdown in Real Time",{"type":7,"value":8,"toc":528},"minimark",[9,14,18,21,25,28,31,60,63,67,70,148,153,158,169,173,176,181,197,201,204,228,232,235,245,248,252,255,259,262,283,286,290,358,365,381,385,388,424,427,431,434,463,466,470,490,494,514,518,524],[10,11,13],"h2",{"id":12},"what-is-markdown-preview","What Is Markdown Preview?",[15,16,17],"p",{},"Markdown preview renders your plain-text Markdown into formatted HTML as you type. Instead of writing markup and guessing the output, you see the final result immediately — headings, bold text, lists, tables, and code blocks all appear in real time.",[15,19,20],{},"This instant feedback loop makes Markdown preview essential for documentation, blog posts, READMEs, and any content you publish on the web.",[10,22,24],{"id":23},"why-real-time-preview-matters","Why Real-Time Preview Matters",[15,26,27],{},"Writing without preview is like coding without running your program. You spot mistakes after the fact — a missing closing bracket, a broken table, an image that never loads.",[15,29,30],{},"Real-time preview eliminates that delay. Benefits include:",[32,33,34,42,48,54],"ul",{},[35,36,37,41],"li",{},[38,39,40],"strong",{},"Faster writing cycles"," — fix formatting errors the moment they appear",[35,43,44,47],{},[38,45,46],{},"Confidence in output"," — what you see is what your readers get",[35,49,50,53],{},[38,51,52],{},"Easier learning"," — beginners connect syntax to results instantly",[35,55,56,59],{},[38,57,58],{},"Fewer round trips"," — no need to save, build, and refresh",[15,61,62],{},"Studies on live-editing workflows show a 20–30% reduction in editing time compared to write-then-preview cycles.",[10,64,66],{"id":65},"editors-with-preview-a-comparison","Editors With Preview: A Comparison",[15,68,69],{},"Different tools offer Markdown preview in different ways. Here is how the main options stack up:",[71,72,73,89],"table",{},[74,75,76],"thead",{},[77,78,79,83,86],"tr",{},[80,81,82],"th",{},"Editor",[80,84,85],{},"Preview Type",[80,87,88],{},"Best For",[90,91,92,104,115,126,137],"tbody",{},[77,93,94,98,101],{},[95,96,97],"td",{},"Typora",[95,99,100],{},"Inline (WYSIWYG)",[95,102,103],{},"Long-form writing, notes",[77,105,106,109,112],{},[95,107,108],{},"VS Code",[95,110,111],{},"Side-by-side panel",[95,113,114],{},"Developer documentation",[77,116,117,120,123],{},[95,118,119],{},"Online tools",[95,121,122],{},"Split-pane live",[95,124,125],{},"Quick edits, sharing",[77,127,128,131,134],{},[95,129,130],{},"Obsidian",[95,132,133],{},"Inline + sidebar",[95,135,136],{},"Knowledge bases, Zettelkasten",[77,138,139,142,145],{},[95,140,141],{},"HackMD \u002F StackEdit",[95,143,144],{},"Collaborative live",[95,146,147],{},"Team documents, meeting notes",[15,149,150,152],{},[38,151,97],{}," replaces Markdown syntax with rendered output inline. It feels like a word processor — great for prose, less ideal when you need to see raw syntax.",[15,154,155,157],{},[38,156,108],{}," offers a dedicated preview panel. You edit raw Markdown on the left and see rendered HTML on the right. Extensions like \"Markdown Preview Enhanced\" add math, diagrams, and custom CSS.",[15,159,160,162,163,168],{},[38,161,119],{}," such as our ",[164,165,167],"a",{"href":166},"\u002Ftools\u002Fmarkdown-preview","Markdown Preview"," require zero setup. Open your browser, paste or type, and see the result instantly — perfect for quick checks and shared documents.",[10,170,172],{"id":171},"how-markdown-becomes-html","How Markdown Becomes HTML",[15,174,175],{},"Understanding the rendering pipeline helps you debug unexpected output. The process has three stages:",[177,178,180],"h3",{"id":179},"_1-parsing","1. Parsing",[15,182,183,184,188,189,192,193,196],{},"A Markdown parser (such as ",[185,186,187],"code",{},"marked",", ",[185,190,191],{},"remark",", or ",[185,194,195],{},"markdown-it",") reads your plain text and builds an abstract syntax tree (AST). Each node represents a structural element — heading, paragraph, code block, list item.",[177,198,200],{"id":199},"_2-transformation","2. Transformation",[15,202,203],{},"The AST can be modified before rendering. Common transformations include:",[32,205,206,212,222],{},[35,207,208,211],{},[38,209,210],{},"GFM extensions"," — tables, task lists, and strikethrough",[35,213,214,217,218,221],{},[38,215,216],{},"Syntax highlighting"," — code blocks get ",[185,219,220],{},"\u003Cspan>"," tags with language-specific classes (via Prism.js or highlight.js)",[35,223,224,227],{},[38,225,226],{},"Custom plugins"," — footnotes, math (KaTeX), and auto-generated heading IDs",[177,229,231],{"id":230},"_3-rendering","3. Rendering",[15,233,234],{},"The AST converts to HTML strings. The browser then applies CSS to style the output — fonts, spacing, code themes, and responsive layouts all happen at this stage.",[236,237,243],"pre",{"className":238,"code":240,"language":241,"meta":242},[239],"language-text","Raw Markdown → Parser → AST → Plugins → HTML → Browser CSS → Rendered Page\n","text","",[185,244,240],{"__ignoreMap":242},[15,246,247],{},"Each stage is a potential source of differences between editors. Two tools may parse the same file differently if they use different parser libraries or plugin configurations.",[10,249,251],{"id":250},"safe-markdown-rendering","Safe Markdown Rendering",[15,253,254],{},"When you render Markdown from user input, security becomes critical. Raw Markdown can include HTML, and unfiltered HTML opens the door to cross-site scripting (XSS).",[177,256,258],{"id":257},"the-xss-risk","The XSS Risk",[15,260,261],{},"A malicious user might submit:",[236,263,267],{"className":264,"code":265,"language":266,"meta":242,"style":242},"language-markdown shiki shiki-themes github-light github-dark","\u003Cimg src=\"x\" onerror=\"alert('XSS')\">\n\u003Cscript> stealCookies() \u003C\u002Fscript>\n","markdown",[185,268,269,277],{"__ignoreMap":242},[270,271,274],"span",{"class":272,"line":273},"line",1,[270,275,276],{},"\u003Cimg src=\"x\" onerror=\"alert('XSS')\">\n",[270,278,280],{"class":272,"line":279},2,[270,281,282],{},"\u003Cscript> stealCookies() \u003C\u002Fscript>\n",[15,284,285],{},"Without sanitization, these scripts execute in every visitor's browser.",[177,287,289],{"id":288},"defense-strategies","Defense Strategies",[71,291,292,305],{},[74,293,294],{},[77,295,296,299,302],{},[80,297,298],{},"Strategy",[80,300,301],{},"How It Works",[80,303,304],{},"Trade-off",[90,306,307,325,336,347],{},[77,308,309,312,322],{},[95,310,311],{},"HTML sanitization",[95,313,314,315,188,318,321],{},"Strip dangerous tags and attributes (",[185,316,317],{},"\u003Cscript>",[185,319,320],{},"onerror",")",[95,323,324],{},"May remove legitimate HTML",[77,326,327,330,333],{},[95,328,329],{},"Sandboxed iframe",[95,331,332],{},"Render output in an isolated frame with no access to parent",[95,334,335],{},"Complex, limited styling control",[77,337,338,341,344],{},[95,339,340],{},"Allowlist parser",[95,342,343],{},"Only emit HTML from recognized Markdown syntax",[95,345,346],{},"Safest, but restricts flexibility",[77,348,349,352,355],{},[95,350,351],{},"CSP headers",[95,353,354],{},"Browser blocks inline scripts via Content-Security-Policy",[95,356,357],{},"Requires server configuration",[15,359,360,361,364],{},"For most applications, ",[38,362,363],{},"HTML sanitization with DOMPurify"," is the practical choice. It removes dangerous content while preserving safe HTML elements.",[15,366,367,368,188,370,188,373,376,377,380],{},"GFM takes the allowlist approach: it explicitly disallows ",[185,369,317],{},[185,371,372],{},"\u003Ctitle>",[185,374,375],{},"\u003Cstyle>",", and ",[185,378,379],{},"\u003Ctextarea>"," tags. This prevents XSS without a separate sanitization step — but only if you use a GFM-compliant parser.",[10,382,384],{"id":383},"export-options","Export Options",[15,386,387],{},"Once your Markdown renders correctly, you likely need to share or publish it. Common export formats include:",[32,389,390,396,402,412,418],{},[35,391,392,395],{},[38,393,394],{},"HTML"," — paste into a CMS, email template, or static site",[35,397,398,401],{},[38,399,400],{},"PDF"," — render to HTML first, then print or use a headless browser (Puppeteer, Playwright)",[35,403,404,407,408,411],{},[38,405,406],{},"Markdown file"," — save the raw ",[185,409,410],{},".md"," for version control and future editing",[35,413,414,417],{},[38,415,416],{},"DOCX"," — convert via Pandoc for collaboration with non-technical teams",[35,419,420,423],{},[38,421,422],{},"Slides"," — tools like Marp and Slidev turn Markdown into presentation decks",[15,425,426],{},"The HTML export path is the most universal. Every Markdown tool produces HTML as an intermediate step, so exporting clean HTML gives you maximum flexibility — style it with CSS, embed it in pages, or convert it further.",[10,428,430],{"id":429},"choosing-the-right-tool","Choosing the Right Tool",[15,432,433],{},"Your ideal Markdown preview setup depends on your workflow:",[32,435,436,442,448,454],{},[35,437,438,441],{},[38,439,440],{},"Solo writer focusing on long-form content"," — Typora or Obsidian for inline editing",[35,443,444,447],{},[38,445,446],{},"Developer writing technical docs"," — VS Code with Markdown Preview Enhanced",[35,449,450,453],{},[38,451,452],{},"Team collaborating on documents"," — HackMD or an online preview tool",[35,455,456,459,460,462],{},[38,457,458],{},"Quick one-off checks"," — a browser-based tool like ",[164,461,167],{"href":166}," needs no installation",[15,464,465],{},"Pick the tool that fits your current task. Many writers use two or three depending on the context.",[10,467,469],{"id":468},"key-takeaways","Key Takeaways",[32,471,472,475,478,481,484,487],{},[35,473,474],{},"Real-time preview speeds up writing by eliminating the save-render-check cycle",[35,476,477],{},"Different editors offer inline, side-by-side, or collaborative preview modes",[35,479,480],{},"The Markdown-to-HTML pipeline involves parsing, transformation, and rendering",[35,482,483],{},"Always sanitize Markdown output to prevent XSS — DOMPurify or GFM's allowlist approach works well",[35,485,486],{},"Export to HTML for maximum flexibility; convert to PDF or DOCX as needed",[35,488,489],{},"Choose your tool based on the task — no single editor fits every workflow",[10,491,493],{"id":492},"related-guides","Related Guides",[32,495,496,502,508],{},[35,497,498],{},[164,499,501],{"href":500},"\u002Fguides\u002Fgithub-flavored-markdown","GitHub Flavored Markdown",[35,503,504],{},[164,505,507],{"href":506},"\u002Fguides\u002Fmarkdown-writing-workflow","Markdown Writing Workflow",[35,509,510],{},[164,511,513],{"href":512},"\u002Fguides\u002Fmarkdown-syntax-guide","Markdown Syntax Guide",[10,515,517],{"id":516},"try-it-yourself","Try It Yourself",[15,519,520,521,523],{},"Ready to experience real-time Markdown preview? Open our free ",[164,522,167],{"href":166}," tool — type or paste your Markdown and watch the rendered HTML appear instantly. No setup, no account, no friction.",[525,526,527],"style",{},"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":242,"searchDepth":279,"depth":279,"links":529},[530,531,532,533,539,543,544,545,546,547],{"id":12,"depth":279,"text":13},{"id":23,"depth":279,"text":24},{"id":65,"depth":279,"text":66},{"id":171,"depth":279,"text":172,"children":534},[535,537,538],{"id":179,"depth":536,"text":180},3,{"id":199,"depth":536,"text":200},{"id":230,"depth":536,"text":231},{"id":250,"depth":279,"text":251,"children":540},[541,542],{"id":257,"depth":536,"text":258},{"id":288,"depth":536,"text":289},{"id":383,"depth":279,"text":384},{"id":429,"depth":279,"text":430},{"id":468,"depth":279,"text":469},{"id":492,"depth":279,"text":493},{"id":516,"depth":279,"text":517},"2026-05-28","Learn how Markdown preview works, compare editors, understand the rendering pipeline, and explore safe output and export options.","md",{"immutable":552},true,"\u002Fguides\u002Fmarkdown-preview-guide",6,{"title":5,"description":549},"guides\u002Fmarkdown-preview-guide","G2sdzkKR9OqRlRk4vt0YWyt6HiDVZJvkkAFs4ygZdmE",1780401327448]