[{"data":1,"prerenderedAt":1189},["ShallowReactive",2],{"guide-markdown-to-email-html":3},{"id":4,"title":5,"body":6,"date":1181,"description":1182,"extension":1183,"meta":1184,"navigation":89,"path":1185,"readingTime":118,"seo":1186,"stem":1187,"__hash__":1188},"guides\u002Fguides\u002Fmarkdown-to-email-html.md","Converting Markdown to Email HTML: A Practical Guide",{"type":7,"value":8,"toc":1163},"minimark",[9,14,23,26,30,35,38,200,204,214,362,366,370,385,491,495,498,623,627,630,664,668,675,770,774,777,963,967,970,1071,1075,1110,1114,1142,1146,1154,1159],[10,11,13],"h2",{"id":12},"email-html-is-not-web-html","Email HTML Is Not Web HTML",[15,16,17,18,22],"p",{},"Web browsers render standards-compliant HTML consistently. Email clients do not. Gmail strips ",[19,20,21],"code",{},"\u003Cstyle>"," blocks, Outlook uses Microsoft Word for rendering, and mobile clients impose their own constraints. When you convert Markdown to HTML for email, you must account for these limitations.",[15,24,25],{},"The conversion itself is straightforward. Making the output render reliably across 50+ email clients is the real challenge.",[10,27,29],{"id":28},"the-conversion-pipeline","The Conversion Pipeline",[31,32,34],"h3",{"id":33},"step-1-markdown-to-standard-html","Step 1: Markdown to Standard HTML",[15,36,37],{},"Use a Markdown parser to produce clean HTML. Most parsers generate semantic markup that works fine for web but needs adjustment for email.",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-javascript shiki shiki-themes github-light github-dark","const { marked } = require('marked');\n\nconst markdown = `\n# Welcome to Our Newsletter\n\nThis week we cover:\n\n- New feature release\n- Performance improvements\n- Upcoming events\n\n## Feature Release\n\nThe **dashboard** now supports custom widgets. [Learn more](https:\u002F\u002Fexample.com\u002Ffeatures).\n`;\n\nconst html = marked.parse(markdown);\n","javascript","",[19,46,47,84,91,105,111,116,122,127,133,139,145,150,156,161,167,176,181],{"__ignoreMap":44},[48,49,52,56,60,64,67,70,74,77,81],"span",{"class":50,"line":51},"line",1,[48,53,55],{"class":54},"szBVR","const",[48,57,59],{"class":58},"sVt8B"," { ",[48,61,63],{"class":62},"sj4cs","marked",[48,65,66],{"class":58}," } ",[48,68,69],{"class":54},"=",[48,71,73],{"class":72},"sScJk"," require",[48,75,76],{"class":58},"(",[48,78,80],{"class":79},"sZZnC","'marked'",[48,82,83],{"class":58},");\n",[48,85,87],{"class":50,"line":86},2,[48,88,90],{"emptyLinePlaceholder":89},true,"\n",[48,92,94,96,99,102],{"class":50,"line":93},3,[48,95,55],{"class":54},[48,97,98],{"class":62}," markdown",[48,100,101],{"class":54}," =",[48,103,104],{"class":79}," `\n",[48,106,108],{"class":50,"line":107},4,[48,109,110],{"class":79},"# Welcome to Our Newsletter\n",[48,112,114],{"class":50,"line":113},5,[48,115,90],{"emptyLinePlaceholder":89},[48,117,119],{"class":50,"line":118},6,[48,120,121],{"class":79},"This week we cover:\n",[48,123,125],{"class":50,"line":124},7,[48,126,90],{"emptyLinePlaceholder":89},[48,128,130],{"class":50,"line":129},8,[48,131,132],{"class":79},"- New feature release\n",[48,134,136],{"class":50,"line":135},9,[48,137,138],{"class":79},"- Performance improvements\n",[48,140,142],{"class":50,"line":141},10,[48,143,144],{"class":79},"- Upcoming events\n",[48,146,148],{"class":50,"line":147},11,[48,149,90],{"emptyLinePlaceholder":89},[48,151,153],{"class":50,"line":152},12,[48,154,155],{"class":79},"## Feature Release\n",[48,157,159],{"class":50,"line":158},13,[48,160,90],{"emptyLinePlaceholder":89},[48,162,164],{"class":50,"line":163},14,[48,165,166],{"class":79},"The **dashboard** now supports custom widgets. [Learn more](https:\u002F\u002Fexample.com\u002Ffeatures).\n",[48,168,170,173],{"class":50,"line":169},15,[48,171,172],{"class":79},"`",[48,174,175],{"class":58},";\n",[48,177,179],{"class":50,"line":178},16,[48,180,90],{"emptyLinePlaceholder":89},[48,182,184,186,189,191,194,197],{"class":50,"line":183},17,[48,185,55],{"class":54},[48,187,188],{"class":62}," html",[48,190,101],{"class":54},[48,192,193],{"class":58}," marked.",[48,195,196],{"class":72},"parse",[48,198,199],{"class":58},"(markdown);\n",[31,201,203],{"id":202},"step-2-inline-all-styles","Step 2: Inline All Styles",[15,205,206,207,209,210,213],{},"Email clients like Gmail remove ",[19,208,21],{}," blocks from the ",[19,211,212],{},"\u003Chead>",". Every CSS property must be inlined on each element.",[39,215,217],{"className":41,"code":216,"language":43,"meta":44,"style":44},"const juice = require('juice');\n\nconst styledHtml = `\n\u003Chtml>\n\u003Chead>\n\u003Cstyle>\n  h1 { color: #1a1a1a; font-size: 24px; font-family: Arial, sans-serif; }\n  p { color: #333333; font-size: 16px; line-height: 1.5; }\n  a { color: #0066cc; text-decoration: underline; }\n  ul { padding-left: 20px; }\n  li { margin-bottom: 8px; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  ${html}\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n`;\n\nconst inlinedHtml = juice(styledHtml);\n\u002F\u002F All styles are now inline on each element\n",[19,218,219,237,241,252,257,262,267,272,277,282,287,292,297,302,307,318,323,328,335,340,355],{"__ignoreMap":44},[48,220,221,223,226,228,230,232,235],{"class":50,"line":51},[48,222,55],{"class":54},[48,224,225],{"class":62}," juice",[48,227,101],{"class":54},[48,229,73],{"class":72},[48,231,76],{"class":58},[48,233,234],{"class":79},"'juice'",[48,236,83],{"class":58},[48,238,239],{"class":50,"line":86},[48,240,90],{"emptyLinePlaceholder":89},[48,242,243,245,248,250],{"class":50,"line":93},[48,244,55],{"class":54},[48,246,247],{"class":62}," styledHtml",[48,249,101],{"class":54},[48,251,104],{"class":79},[48,253,254],{"class":50,"line":107},[48,255,256],{"class":79},"\u003Chtml>\n",[48,258,259],{"class":50,"line":113},[48,260,261],{"class":79},"\u003Chead>\n",[48,263,264],{"class":50,"line":118},[48,265,266],{"class":79},"\u003Cstyle>\n",[48,268,269],{"class":50,"line":124},[48,270,271],{"class":79},"  h1 { color: #1a1a1a; font-size: 24px; font-family: Arial, sans-serif; }\n",[48,273,274],{"class":50,"line":129},[48,275,276],{"class":79},"  p { color: #333333; font-size: 16px; line-height: 1.5; }\n",[48,278,279],{"class":50,"line":135},[48,280,281],{"class":79},"  a { color: #0066cc; text-decoration: underline; }\n",[48,283,284],{"class":50,"line":141},[48,285,286],{"class":79},"  ul { padding-left: 20px; }\n",[48,288,289],{"class":50,"line":147},[48,290,291],{"class":79},"  li { margin-bottom: 8px; }\n",[48,293,294],{"class":50,"line":152},[48,295,296],{"class":79},"\u003C\u002Fstyle>\n",[48,298,299],{"class":50,"line":158},[48,300,301],{"class":79},"\u003C\u002Fhead>\n",[48,303,304],{"class":50,"line":163},[48,305,306],{"class":79},"\u003Cbody>\n",[48,308,309,312,315],{"class":50,"line":169},[48,310,311],{"class":79},"  ${",[48,313,314],{"class":58},"html",[48,316,317],{"class":79},"}\n",[48,319,320],{"class":50,"line":178},[48,321,322],{"class":79},"\u003C\u002Fbody>\n",[48,324,325],{"class":50,"line":183},[48,326,327],{"class":79},"\u003C\u002Fhtml>\n",[48,329,331,333],{"class":50,"line":330},18,[48,332,172],{"class":79},[48,334,175],{"class":58},[48,336,338],{"class":50,"line":337},19,[48,339,90],{"emptyLinePlaceholder":89},[48,341,343,345,348,350,352],{"class":50,"line":342},20,[48,344,55],{"class":54},[48,346,347],{"class":62}," inlinedHtml",[48,349,101],{"class":54},[48,351,225],{"class":72},[48,353,354],{"class":58},"(styledHtml);\n",[48,356,358],{"class":50,"line":357},21,[48,359,361],{"class":360},"sJ8bj","\u002F\u002F All styles are now inline on each element\n",[10,363,365],{"id":364},"handling-markdown-elements-for-email","handling Markdown Elements for Email",[31,367,369],{"id":368},"headings","Headings",[15,371,372,373,376,377,380,381,384],{},"Avoid ",[19,374,375],{},"\u003Ch1>"," tags in email — some clients override heading styles unpredictably. Use styled ",[19,378,379],{},"\u003Cp>"," or ",[19,382,383],{},"\u003Cdiv>"," tags instead.",[39,386,389],{"className":387,"code":388,"language":314,"meta":44,"style":44},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Instead of \u003Ch1> -->\n\u003Ctable width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">\n  \u003Ctr>\n    \u003Ctd style=\"font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color: #1a1a1a; padding-bottom: 16px;\">\n      Welcome to Our Newsletter\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n",[19,390,391,396,431,441,459,464,473,482],{"__ignoreMap":44},[48,392,393],{"class":50,"line":51},[48,394,395],{"class":360},"\u003C!-- Instead of \u003Ch1> -->\n",[48,397,398,401,405,408,410,413,416,418,421,424,426,428],{"class":50,"line":86},[48,399,400],{"class":58},"\u003C",[48,402,404],{"class":403},"s9eBZ","table",[48,406,407],{"class":72}," width",[48,409,69],{"class":58},[48,411,412],{"class":79},"\"100%\"",[48,414,415],{"class":72}," cellpadding",[48,417,69],{"class":58},[48,419,420],{"class":79},"\"0\"",[48,422,423],{"class":72}," cellspacing",[48,425,69],{"class":58},[48,427,420],{"class":79},[48,429,430],{"class":58},">\n",[48,432,433,436,439],{"class":50,"line":93},[48,434,435],{"class":58},"  \u003C",[48,437,438],{"class":403},"tr",[48,440,430],{"class":58},[48,442,443,446,449,452,454,457],{"class":50,"line":107},[48,444,445],{"class":58},"    \u003C",[48,447,448],{"class":403},"td",[48,450,451],{"class":72}," style",[48,453,69],{"class":58},[48,455,456],{"class":79},"\"font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color: #1a1a1a; padding-bottom: 16px;\"",[48,458,430],{"class":58},[48,460,461],{"class":50,"line":113},[48,462,463],{"class":58},"      Welcome to Our Newsletter\n",[48,465,466,469,471],{"class":50,"line":118},[48,467,468],{"class":58},"    \u003C\u002F",[48,470,448],{"class":403},[48,472,430],{"class":58},[48,474,475,478,480],{"class":50,"line":124},[48,476,477],{"class":58},"  \u003C\u002F",[48,479,438],{"class":403},[48,481,430],{"class":58},[48,483,484,487,489],{"class":50,"line":129},[48,485,486],{"class":58},"\u003C\u002F",[48,488,404],{"class":403},[48,490,430],{"class":58},[31,492,494],{"id":493},"lists","Lists",[15,496,497],{},"Unordered and ordered lists render inconsistently across clients. Convert them to table-based layouts for reliable indentation and bullet display.",[39,499,501],{"className":387,"code":500,"language":314,"meta":44,"style":44},"\u003C!-- Instead of \u003Cul>\u003Cli> -->\n\u003Ctable cellpadding=\"0\" cellspacing=\"0\">\n  \u003Ctr>\n    \u003Ctd style=\"font-family: Arial, sans-serif; font-size: 16px; color: #333333; padding-bottom: 8px;\">\n      • New feature release\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd style=\"font-family: Arial, sans-serif; font-size: 16px; color: #333333; padding-bottom: 8px;\">\n      • Performance improvements\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n",[19,502,503,508,528,536,551,556,564,572,580,594,599,607,615],{"__ignoreMap":44},[48,504,505],{"class":50,"line":51},[48,506,507],{"class":360},"\u003C!-- Instead of \u003Cul>\u003Cli> -->\n",[48,509,510,512,514,516,518,520,522,524,526],{"class":50,"line":86},[48,511,400],{"class":58},[48,513,404],{"class":403},[48,515,415],{"class":72},[48,517,69],{"class":58},[48,519,420],{"class":79},[48,521,423],{"class":72},[48,523,69],{"class":58},[48,525,420],{"class":79},[48,527,430],{"class":58},[48,529,530,532,534],{"class":50,"line":93},[48,531,435],{"class":58},[48,533,438],{"class":403},[48,535,430],{"class":58},[48,537,538,540,542,544,546,549],{"class":50,"line":107},[48,539,445],{"class":58},[48,541,448],{"class":403},[48,543,451],{"class":72},[48,545,69],{"class":58},[48,547,548],{"class":79},"\"font-family: Arial, sans-serif; font-size: 16px; color: #333333; padding-bottom: 8px;\"",[48,550,430],{"class":58},[48,552,553],{"class":50,"line":113},[48,554,555],{"class":58},"      • New feature release\n",[48,557,558,560,562],{"class":50,"line":118},[48,559,468],{"class":58},[48,561,448],{"class":403},[48,563,430],{"class":58},[48,565,566,568,570],{"class":50,"line":124},[48,567,477],{"class":58},[48,569,438],{"class":403},[48,571,430],{"class":58},[48,573,574,576,578],{"class":50,"line":129},[48,575,435],{"class":58},[48,577,438],{"class":403},[48,579,430],{"class":58},[48,581,582,584,586,588,590,592],{"class":50,"line":135},[48,583,445],{"class":58},[48,585,448],{"class":403},[48,587,451],{"class":72},[48,589,69],{"class":58},[48,591,548],{"class":79},[48,593,430],{"class":58},[48,595,596],{"class":50,"line":141},[48,597,598],{"class":58},"      • Performance improvements\n",[48,600,601,603,605],{"class":50,"line":147},[48,602,468],{"class":58},[48,604,448],{"class":403},[48,606,430],{"class":58},[48,608,609,611,613],{"class":50,"line":152},[48,610,477],{"class":58},[48,612,438],{"class":403},[48,614,430],{"class":58},[48,616,617,619,621],{"class":50,"line":158},[48,618,486],{"class":58},[48,620,404],{"class":403},[48,622,430],{"class":58},[31,624,626],{"id":625},"links","Links",[15,628,629],{},"Always use absolute URLs and include both color and underline styles inline:",[39,631,633],{"className":387,"code":632,"language":314,"meta":44,"style":44},"\u003Ca href=\"https:\u002F\u002Fexample.com\u002Ffeatures\" style=\"color: #0066cc; text-decoration: underline;\">Learn more\u003C\u002Fa>\n",[19,634,635],{"__ignoreMap":44},[48,636,637,639,642,645,647,650,652,654,657,660,662],{"class":50,"line":51},[48,638,400],{"class":58},[48,640,641],{"class":403},"a",[48,643,644],{"class":72}," href",[48,646,69],{"class":58},[48,648,649],{"class":79},"\"https:\u002F\u002Fexample.com\u002Ffeatures\"",[48,651,451],{"class":72},[48,653,69],{"class":58},[48,655,656],{"class":79},"\"color: #0066cc; text-decoration: underline;\"",[48,658,659],{"class":58},">Learn more\u003C\u002F",[48,661,641],{"class":403},[48,663,430],{"class":58},[31,665,667],{"id":666},"code-blocks","Code Blocks",[15,669,670,671,674],{},"Code blocks are particularly tricky. Most Markdown parsers wrap code in ",[19,672,673],{},"\u003Cpre>\u003Ccode>"," tags, which many email clients render poorly or not at all.",[39,676,678],{"className":387,"code":677,"language":314,"meta":44,"style":44},"\u003C!-- Email-safe code block -->\n\u003Ctable width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"background-color: #f5f5f5; border-radius: 4px;\">\n  \u003Ctr>\n    \u003Ctd style=\"font-family: 'Courier New', monospace; font-size: 14px; color: #333333; padding: 16px; white-space: pre-wrap; word-break: break-all;\">\nnpm install @example\u002Fsdk\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n",[19,679,680,685,718,726,741,746,754,762],{"__ignoreMap":44},[48,681,682],{"class":50,"line":51},[48,683,684],{"class":360},"\u003C!-- Email-safe code block -->\n",[48,686,687,689,691,693,695,697,699,701,703,705,707,709,711,713,716],{"class":50,"line":86},[48,688,400],{"class":58},[48,690,404],{"class":403},[48,692,407],{"class":72},[48,694,69],{"class":58},[48,696,412],{"class":79},[48,698,415],{"class":72},[48,700,69],{"class":58},[48,702,420],{"class":79},[48,704,423],{"class":72},[48,706,69],{"class":58},[48,708,420],{"class":79},[48,710,451],{"class":72},[48,712,69],{"class":58},[48,714,715],{"class":79},"\"background-color: #f5f5f5; border-radius: 4px;\"",[48,717,430],{"class":58},[48,719,720,722,724],{"class":50,"line":93},[48,721,435],{"class":58},[48,723,438],{"class":403},[48,725,430],{"class":58},[48,727,728,730,732,734,736,739],{"class":50,"line":107},[48,729,445],{"class":58},[48,731,448],{"class":403},[48,733,451],{"class":72},[48,735,69],{"class":58},[48,737,738],{"class":79},"\"font-family: 'Courier New', monospace; font-size: 14px; color: #333333; padding: 16px; white-space: pre-wrap; word-break: break-all;\"",[48,740,430],{"class":58},[48,742,743],{"class":50,"line":113},[48,744,745],{"class":58},"npm install @example\u002Fsdk\n",[48,747,748,750,752],{"class":50,"line":118},[48,749,468],{"class":58},[48,751,448],{"class":403},[48,753,430],{"class":58},[48,755,756,758,760],{"class":50,"line":124},[48,757,477],{"class":58},[48,759,438],{"class":403},[48,761,430],{"class":58},[48,763,764,766,768],{"class":50,"line":129},[48,765,486],{"class":58},[48,767,404],{"class":403},[48,769,430],{"class":58},[10,771,773],{"id":772},"layout-structure","Layout Structure",[15,775,776],{},"Email layouts should use nested tables with explicit widths. CSS Flexbox and Grid are not supported in many email clients.",[39,778,780],{"className":387,"code":779,"language":314,"meta":44,"style":44},"\u003Ctable width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"background-color: #ffffff;\">\n  \u003Ctr>\n    \u003Ctd align=\"center\" style=\"padding: 20px;\">\n      \u003Ctable width=\"600\" cellpadding=\"0\" cellspacing=\"0\" style=\"max-width: 600px;\">\n        \u003Ctr>\n          \u003Ctd style=\"font-family: Arial, sans-serif; font-size: 16px; color: #333333; line-height: 1.5;\">\n            \u003C!-- Email content here -->\n          \u003C\u002Ftd>\n        \u003C\u002Ftr>\n      \u003C\u002Ftable>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n",[19,781,782,815,823,847,882,891,907,912,921,930,939,947,955],{"__ignoreMap":44},[48,783,784,786,788,790,792,794,796,798,800,802,804,806,808,810,813],{"class":50,"line":51},[48,785,400],{"class":58},[48,787,404],{"class":403},[48,789,407],{"class":72},[48,791,69],{"class":58},[48,793,412],{"class":79},[48,795,415],{"class":72},[48,797,69],{"class":58},[48,799,420],{"class":79},[48,801,423],{"class":72},[48,803,69],{"class":58},[48,805,420],{"class":79},[48,807,451],{"class":72},[48,809,69],{"class":58},[48,811,812],{"class":79},"\"background-color: #ffffff;\"",[48,814,430],{"class":58},[48,816,817,819,821],{"class":50,"line":86},[48,818,435],{"class":58},[48,820,438],{"class":403},[48,822,430],{"class":58},[48,824,825,827,829,833,835,838,840,842,845],{"class":50,"line":93},[48,826,445],{"class":58},[48,828,448],{"class":403},[48,830,832],{"class":831},"s7hpK"," align",[48,834,69],{"class":58},[48,836,837],{"class":79},"\"center\"",[48,839,451],{"class":72},[48,841,69],{"class":58},[48,843,844],{"class":79},"\"padding: 20px;\"",[48,846,430],{"class":58},[48,848,849,852,854,856,858,861,863,865,867,869,871,873,875,877,880],{"class":50,"line":107},[48,850,851],{"class":58},"      \u003C",[48,853,404],{"class":403},[48,855,407],{"class":72},[48,857,69],{"class":58},[48,859,860],{"class":79},"\"600\"",[48,862,415],{"class":72},[48,864,69],{"class":58},[48,866,420],{"class":79},[48,868,423],{"class":72},[48,870,69],{"class":58},[48,872,420],{"class":79},[48,874,451],{"class":72},[48,876,69],{"class":58},[48,878,879],{"class":79},"\"max-width: 600px;\"",[48,881,430],{"class":58},[48,883,884,887,889],{"class":50,"line":113},[48,885,886],{"class":58},"        \u003C",[48,888,438],{"class":403},[48,890,430],{"class":58},[48,892,893,896,898,900,902,905],{"class":50,"line":118},[48,894,895],{"class":58},"          \u003C",[48,897,448],{"class":403},[48,899,451],{"class":72},[48,901,69],{"class":58},[48,903,904],{"class":79},"\"font-family: Arial, sans-serif; font-size: 16px; color: #333333; line-height: 1.5;\"",[48,906,430],{"class":58},[48,908,909],{"class":50,"line":124},[48,910,911],{"class":360},"            \u003C!-- Email content here -->\n",[48,913,914,917,919],{"class":50,"line":129},[48,915,916],{"class":58},"          \u003C\u002F",[48,918,448],{"class":403},[48,920,430],{"class":58},[48,922,923,926,928],{"class":50,"line":135},[48,924,925],{"class":58},"        \u003C\u002F",[48,927,438],{"class":403},[48,929,430],{"class":58},[48,931,932,935,937],{"class":50,"line":141},[48,933,934],{"class":58},"      \u003C\u002F",[48,936,404],{"class":403},[48,938,430],{"class":58},[48,940,941,943,945],{"class":50,"line":147},[48,942,468],{"class":58},[48,944,448],{"class":403},[48,946,430],{"class":58},[48,948,949,951,953],{"class":50,"line":152},[48,950,477],{"class":58},[48,952,438],{"class":403},[48,954,430],{"class":58},[48,956,957,959,961],{"class":50,"line":158},[48,958,486],{"class":58},[48,960,404],{"class":403},[48,962,430],{"class":58},[10,964,966],{"id":965},"outlook-specific-fixes","Outlook-Specific Fixes",[15,968,969],{},"Outlook for Windows uses Word's HTML rendering engine, which lacks support for many CSS properties:",[404,971,972,987],{},[973,974,975],"thead",{},[438,976,977,981,984],{},[978,979,980],"th",{},"CSS Property",[978,982,983],{},"Outlook Support",[978,985,986],{},"Workaround",[988,989,990,1006,1026,1041,1053],"tbody",{},[438,991,992,997,1000],{},[448,993,994],{},[19,995,996],{},"max-width",[448,998,999],{},"No",[448,1001,1002,1003],{},"Use ",[19,1004,1005],{},"\u003Ctable width=\"600\">",[438,1007,1008,1016,1019],{},[448,1009,1010,1013,1014],{},[19,1011,1012],{},"padding"," on ",[19,1015,383],{},[448,1017,1018],{},"Partial",[448,1020,1002,1021,1013,1023],{},[19,1022,1012],{},[19,1024,1025],{},"\u003Ctd>",[438,1027,1028,1033,1035],{},[448,1029,1030],{},[19,1031,1032],{},"background-image",[448,1034,999],{},[448,1036,1002,1037,1040],{},[19,1038,1039],{},"\u003Cimg>"," with absolute URL",[438,1042,1043,1048,1050],{},[448,1044,1045],{},[19,1046,1047],{},"border-radius",[448,1049,999],{},[448,1051,1052],{},"Accept square corners or VML",[438,1054,1055,1060,1062],{},[448,1056,1057],{},[19,1058,1059],{},"margin",[448,1061,1018],{},[448,1063,1002,1064,1067,1068],{},[19,1065,1066],{},"cellpadding"," and ",[19,1069,1070],{},"cellspacing",[10,1072,1074],{"id":1073},"testing-workflow","Testing Workflow",[1076,1077,1078,1086,1092,1098,1104],"ol",{},[1079,1080,1081,1085],"li",{},[1082,1083,1084],"strong",{},"Convert"," Markdown to HTML with your parser",[1079,1087,1088,1091],{},[1082,1089,1090],{},"Inline"," all CSS styles",[1079,1093,1094,1097],{},[1082,1095,1096],{},"Wrap"," content in table-based email layout",[1079,1099,1100,1103],{},[1082,1101,1102],{},"Test"," with email preview tools (Litmus, Email on Acid)",[1079,1105,1106,1109],{},[1082,1107,1108],{},"Send"," a test to yourself across Gmail, Outlook, and Apple Mail",[10,1111,1113],{"id":1112},"key-takeaways","Key Takeaways",[1115,1116,1117,1123,1126,1129,1136,1139],"ul",{},[1079,1118,1119,1120,1122],{},"Email HTML requires inline styles — ",[19,1121,21],{}," blocks get stripped by major clients",[1079,1124,1125],{},"Use table-based layouts instead of Flexbox or Grid",[1079,1127,1128],{},"Convert Markdown lists and headings to table rows for reliable rendering",[1079,1130,1131,1132,1135],{},"Code blocks need monospace fonts and ",[19,1133,1134],{},"white-space: pre-wrap"," for email",[1079,1137,1138],{},"Outlook for Windows is the most problematic client — test early and often",[1079,1140,1141],{},"Always use absolute URLs for links and images in email",[10,1143,1145],{"id":1144},"try-it-yourself","Try It Yourself",[15,1147,1148,1149,1153],{},"Convert Markdown to clean HTML instantly with our free ",[641,1150,1152],{"href":1151},"\u002Ftools\u002Fmarkdown-to-html","Markdown to HTML Converter",". Paste any Markdown text to get properly formatted HTML output — all processing happens locally in your browser.",[15,1155,1156],{},[641,1157,1158],{"href":1151},"Try the Markdown to HTML Converter →",[1160,1161,1162],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":44,"searchDepth":86,"depth":86,"links":1164},[1165,1166,1170,1176,1177,1178,1179,1180],{"id":12,"depth":86,"text":13},{"id":28,"depth":86,"text":29,"children":1167},[1168,1169],{"id":33,"depth":93,"text":34},{"id":202,"depth":93,"text":203},{"id":364,"depth":86,"text":365,"children":1171},[1172,1173,1174,1175],{"id":368,"depth":93,"text":369},{"id":493,"depth":93,"text":494},{"id":625,"depth":93,"text":626},{"id":666,"depth":93,"text":667},{"id":772,"depth":86,"text":773},{"id":965,"depth":86,"text":966},{"id":1073,"depth":86,"text":1074},{"id":1112,"depth":86,"text":1113},{"id":1144,"depth":86,"text":1145},"2026-05-28","Learn how to convert Markdown to email-compatible HTML. Handle inline styles, table layouts, and Outlook quirks for reliable email rendering.","md",{"immutable":89},"\u002Fguides\u002Fmarkdown-to-email-html",{"title":5,"description":1182},"guides\u002Fmarkdown-to-email-html","jGY5GomptzQkU3XId0ZyZWJBgzWbe3t2GofkkeD3eQ8",1780401335158]