[{"data":1,"prerenderedAt":3115},["ShallowReactive",2],{"/guides/markdown-emails":3,"surround":3106},{"id":4,"title":5,"body":6,"date":3098,"description":3099,"extension":143,"meta":3100,"navigation":159,"path":3101,"seo":3102,"sitemap":3103,"stem":3104,"__hash__":3105},"guides/guides/markdown-emails.md","How to create an HTML email newsletter from Markdown files",{"type":7,"value":8,"toc":3077},"minimark",[9,13,17,20,31,36,39,62,69,72,75,80,87,123,131,138,166,170,177,180,1071,1075,1078,1099,1102,1121,1125,1128,1138,1201,1205,1220,1223,1234,1355,1358,1397,1409,1413,1420,1537,1544,1606,1611,1668,1672,1675,1681,1686,1770,1773,1811,1814,1817,1878,1882,1893,1896,1899,1903,1918,1921,1924,1938,1952,2210,2213,2217,2224,2271,2275,2278,2285,2382,2389,2392,2463,2467,2470,2541,2555,2644,2651,2738,2742,2745,2754,2766,2775,2916,2919,2960,2966,2970,2973,2980,2983,2989,3031,3047,3051,3074],[10,11,5],"h1",{"id":12},"how-to-create-an-html-email-newsletter-from-markdown-files",[14,15,16],"p",{},"In this tutorial, you'll learn how to create HTML emails from Markdown files in Maizzle.",[14,18,19],{},"You'll be able to compile Markdown files from a folder into responsive HTML emails, use components, expressions, and even style them with Tailwind CSS.",[14,21,22,23,30],{},"If you want to dive right in, check out the ",[24,25,29],"a",{"href":26,"rel":27},"https://github.com/maizzle/starter-markdown",[28],"nofollow","Markdown Starter",".",[32,33,35],"h2",{"id":34},"project-setup","Project setup",[14,37,38],{},"Scaffold a new project using the Markdown Starter:",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-sh shiki shiki-themes tailwind-css tailwind-css","npx create-maizzle\n","sh","",[47,48,49],"code",{"__ignoreMap":45},[50,51,54,58],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sizJ4","npx",[50,59,61],{"class":60},"sfCc6"," create-maizzle\n",[14,63,64,65,68],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[47,66,67],{},"./markdown-project",", and select the Default Starter.",[14,70,71],{},"Choose Yes when prompted to Install dependencies.",[14,73,74],{},"Once it finishes installing dependencies, open the project folder in your favorite code editor.",[76,77,79],"h3",{"id":78},"structure","Structure",[14,81,82,83,86],{},"We'll be using the ",[47,84,85],{},"content"," folder to store our Markdown files:",[40,88,92],{"className":89,"code":90,"language":91,"meta":45,"style":45},"language-html shiki shiki-themes tailwind-css tailwind-css","src\n└── content\n    └── newsletter-1.md\n    └── newsletter-2.md\n    └── ...\n","html",[47,93,94,99,105,111,117],{"__ignoreMap":45},[50,95,96],{"class":52,"line":53},[50,97,98],{"class":60},"src\n",[50,100,102],{"class":52,"line":101},2,[50,103,104],{"class":60},"└── content\n",[50,106,108],{"class":52,"line":107},3,[50,109,110],{"class":60},"    └── newsletter-1.md\n",[50,112,114],{"class":52,"line":113},4,[50,115,116],{"class":60},"    └── newsletter-2.md\n",[50,118,120],{"class":52,"line":119},5,[50,121,122],{"class":60},"    └── ...\n",[124,125,126,127,130],"alert",{},"\nYou can remove the \n",[47,128,129],{},"emails","\n directory, we won't need it.\n",[14,132,133,134,137],{},"Next, create ",[47,135,136],{},"content/newsletter-1.md"," and add some markdown to it:",[40,139,144],{"className":140,"code":141,"filename":142,"language":143,"meta":45,"style":45},"language-md shiki shiki-themes tailwind-css tailwind-css","# Hello world\n\nThis is the first newsletter.\n","newsletter-1.md","md",[47,145,146,155,161],{"__ignoreMap":45},[50,147,148,152],{"class":52,"line":53},[50,149,151],{"class":150},"soJEP","#",[50,153,154],{"class":56}," Hello world\n",[50,156,157],{"class":52,"line":101},[50,158,160],{"emptyLinePlaceholder":159},true,"\n",[50,162,163],{"class":52,"line":107},[50,164,165],{"class":60},"This is the first newsletter.\n",[76,167,169],{"id":168},"layout","Layout",[14,171,172,173,176],{},"Since we just want to write Markdown and not have to deal with any tables and such, we need to update ",[47,174,175],{},"layouts/main.html"," to contain the entire HTML boilerplate.",[14,178,179],{},"Replace its contents with the following:",[40,181,185],{"className":182,"code":183,"filename":175,"language":184,"meta":45,"style":45},"language-hbs shiki shiki-themes tailwind-css tailwind-css","\u003C!doctype {{{ page.doctype || 'html' }}}>\n\u003Chtml lang=\"{{ page.language || 'en' }}\" xmlns:v=\"urn:schemas-microsoft-com:vml\">\n\u003Chead>\n  \u003Cmeta charset=\"{{ page.charset || 'utf-8' }}\">\n  \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  \u003Cmeta name=\"format-detection\" content=\"telephone=no, date=no, address=no, email=no, url=no\">\n  \u003C!--[if mso]>\n  \u003Cnoscript>\n    \u003Cxml>\n      \u003Co:OfficeDocumentSettings xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n        \u003Co:PixelsPerInch>96\u003C/o:PixelsPerInch>\n      \u003C/o:OfficeDocumentSettings>\n    \u003C/xml>\n  \u003C/noscript>\n  \u003Cstyle>\n    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif; mso-line-height-rule: exactly;}\n  \u003C/style>\n  \u003C![endif]-->\n  \u003Cif condition=\"page.title\">\n    \u003Ctitle>{{{ page.title }}}\u003C/title>\n  \u003C/if>\n  \u003Cstyle>\n    @tailwind utilities;\n    @tailwind components;\n  \u003C/style>\n  \u003Cstack name=\"head\" />\n\u003C/head>\n\u003Cbody class=\"m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased] {{ page.bodyClass || 'bg-slate-100' }}\">\n  \u003Cif condition=\"page.preheader\">\n    \u003Cdiv class=\"hidden\">\n      {{{ page.preheader }}}\n      \u003Ceach loop=\"item in Array.from(Array(150))\">͏ \u003C/each>\n    \u003C/div>\n  \u003C/if>\n\n  \u003Cdiv\n    align=\"center\"\n    role=\"article\"\n    aria-roledescription=\"email\"\n    lang=\"{{ page.language || 'en' }}\"\n    class=\"{{ page.bodyClass || 'bg-slate-100' }}\"\n    aria-label=\"{{{ page.title || '' }}}\"\n  >\n    \u003Ctable class=\"font-sans\">\n      \u003Ctr>\n        \u003Ctd class=\"w-[600px] max-w-full bg-white rounded-xl\">\n          \u003Ctable class=\"w-full\">\n            \u003Ctr>\n              \u003Ctd class=\"p-0 px-8 sm:px-4 text-base/6 text-slate-700\">\n                \u003Cyield />\n              \u003C/td>\n            \u003C/tr>\n          \u003C/table>\n        \u003C/td>\n      \u003C/tr>\n    \u003C/table>\n  \u003C/div>\n\u003C/body>\n\u003C/html>\n","hbs",[47,186,187,199,254,263,298,318,350,381,388,394,400,406,412,418,424,430,436,442,448,454,476,503,513,523,536,546,555,578,587,623,643,664,675,708,718,727,732,740,756,771,786,812,838,861,867,888,898,920,941,951,972,985,995,1005,1015,1025,1035,1044,1053,1062],{"__ignoreMap":45},[50,188,189,193,196],{"class":52,"line":53},[50,190,192],{"class":191},"shy1k","\u003C!",[50,194,195],{"class":56},"doctype",[50,197,198],{"class":191}," {{{ page.doctype || 'html' }}}>\n",[50,200,201,204,206,210,213,216,219,223,226,229,232,234,237,239,242,244,246,249,251],{"class":52,"line":101},[50,202,203],{"class":150},"\u003C",[50,205,91],{"class":56},[50,207,209],{"class":208},"sQMLp"," lang",[50,211,212],{"class":150},"=",[50,214,215],{"class":208},"\"",[50,217,218],{"class":60},"{{ ",[50,220,222],{"class":221},"s8qYB","page.language",[50,224,225],{"class":60}," || ",[50,227,228],{"class":208},"'",[50,230,231],{"class":60},"en",[50,233,228],{"class":208},[50,235,236],{"class":60}," }}",[50,238,215],{"class":208},[50,240,241],{"class":208}," xmlns:v",[50,243,212],{"class":150},[50,245,215],{"class":208},[50,247,248],{"class":60},"urn:schemas-microsoft-com:vml",[50,250,215],{"class":208},[50,252,253],{"class":150},">\n",[50,255,256,258,261],{"class":52,"line":107},[50,257,203],{"class":150},[50,259,260],{"class":56},"head",[50,262,253],{"class":150},[50,264,265,268,271,274,276,278,280,283,285,287,290,292,294,296],{"class":52,"line":113},[50,266,267],{"class":150},"  \u003C",[50,269,270],{"class":56},"meta",[50,272,273],{"class":208}," charset",[50,275,212],{"class":150},[50,277,215],{"class":208},[50,279,218],{"class":60},[50,281,282],{"class":221},"page.charset",[50,284,225],{"class":60},[50,286,228],{"class":208},[50,288,289],{"class":60},"utf-8",[50,291,228],{"class":208},[50,293,236],{"class":60},[50,295,215],{"class":208},[50,297,253],{"class":150},[50,299,300,302,304,307,309,311,314,316],{"class":52,"line":119},[50,301,267],{"class":150},[50,303,270],{"class":56},[50,305,306],{"class":208}," name",[50,308,212],{"class":150},[50,310,215],{"class":208},[50,312,313],{"class":60},"x-apple-disable-message-reformatting",[50,315,215],{"class":208},[50,317,253],{"class":150},[50,319,321,323,325,327,329,331,334,336,339,341,343,346,348],{"class":52,"line":320},6,[50,322,267],{"class":150},[50,324,270],{"class":56},[50,326,306],{"class":208},[50,328,212],{"class":150},[50,330,215],{"class":208},[50,332,333],{"class":60},"viewport",[50,335,215],{"class":208},[50,337,338],{"class":208}," content",[50,340,212],{"class":150},[50,342,215],{"class":208},[50,344,345],{"class":60},"width=device-width, initial-scale=1",[50,347,215],{"class":208},[50,349,253],{"class":150},[50,351,353,355,357,359,361,363,366,368,370,372,374,377,379],{"class":52,"line":352},7,[50,354,267],{"class":150},[50,356,270],{"class":56},[50,358,306],{"class":208},[50,360,212],{"class":150},[50,362,215],{"class":208},[50,364,365],{"class":60},"format-detection",[50,367,215],{"class":208},[50,369,338],{"class":208},[50,371,212],{"class":150},[50,373,215],{"class":208},[50,375,376],{"class":60},"telephone=no, date=no, address=no, email=no, url=no",[50,378,215],{"class":208},[50,380,253],{"class":150},[50,382,384],{"class":52,"line":383},8,[50,385,387],{"class":386},"smVoC","  \u003C!--[if mso]>\n",[50,389,391],{"class":52,"line":390},9,[50,392,393],{"class":386},"  \u003Cnoscript>\n",[50,395,397],{"class":52,"line":396},10,[50,398,399],{"class":386},"    \u003Cxml>\n",[50,401,403],{"class":52,"line":402},11,[50,404,405],{"class":386},"      \u003Co:OfficeDocumentSettings xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n",[50,407,409],{"class":52,"line":408},12,[50,410,411],{"class":386},"        \u003Co:PixelsPerInch>96\u003C/o:PixelsPerInch>\n",[50,413,415],{"class":52,"line":414},13,[50,416,417],{"class":386},"      \u003C/o:OfficeDocumentSettings>\n",[50,419,421],{"class":52,"line":420},14,[50,422,423],{"class":386},"    \u003C/xml>\n",[50,425,427],{"class":52,"line":426},15,[50,428,429],{"class":386},"  \u003C/noscript>\n",[50,431,433],{"class":52,"line":432},16,[50,434,435],{"class":386},"  \u003Cstyle>\n",[50,437,439],{"class":52,"line":438},17,[50,440,441],{"class":386},"    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif; mso-line-height-rule: exactly;}\n",[50,443,445],{"class":52,"line":444},18,[50,446,447],{"class":386},"  \u003C/style>\n",[50,449,451],{"class":52,"line":450},19,[50,452,453],{"class":386},"  \u003C![endif]-->\n",[50,455,457,459,462,465,467,469,472,474],{"class":52,"line":456},20,[50,458,267],{"class":150},[50,460,461],{"class":56},"if",[50,463,464],{"class":208}," condition",[50,466,212],{"class":150},[50,468,215],{"class":208},[50,470,471],{"class":60},"page.title",[50,473,215],{"class":208},[50,475,253],{"class":150},[50,477,479,482,485,488,491,493,496,499,501],{"class":52,"line":478},21,[50,480,481],{"class":150},"    \u003C",[50,483,484],{"class":56},"title",[50,486,487],{"class":150},">",[50,489,490],{"class":60},"{{{ ",[50,492,471],{"class":221},[50,494,495],{"class":60}," }}}",[50,497,498],{"class":150},"\u003C/",[50,500,484],{"class":56},[50,502,253],{"class":150},[50,504,506,509,511],{"class":52,"line":505},22,[50,507,508],{"class":150},"  \u003C/",[50,510,461],{"class":56},[50,512,253],{"class":150},[50,514,516,518,521],{"class":52,"line":515},23,[50,517,267],{"class":150},[50,519,520],{"class":56},"style",[50,522,253],{"class":150},[50,524,526,530,533],{"class":52,"line":525},24,[50,527,529],{"class":528},"sO3Gh","    @tailwind",[50,531,532],{"class":60}," utilities",[50,534,535],{"class":528},";\n",[50,537,539,541,544],{"class":52,"line":538},25,[50,540,529],{"class":528},[50,542,543],{"class":60}," components",[50,545,535],{"class":528},[50,547,549,551,553],{"class":52,"line":548},26,[50,550,508],{"class":150},[50,552,520],{"class":56},[50,554,253],{"class":150},[50,556,558,560,563,565,567,569,571,573,576],{"class":52,"line":557},27,[50,559,267],{"class":150},[50,561,562],{"class":56},"stack",[50,564,306],{"class":208},[50,566,212],{"class":150},[50,568,215],{"class":208},[50,570,260],{"class":60},[50,572,215],{"class":208},[50,574,575],{"class":208}," /",[50,577,253],{"class":150},[50,579,581,583,585],{"class":52,"line":580},28,[50,582,498],{"class":150},[50,584,260],{"class":56},[50,586,253],{"class":150},[50,588,590,592,595,598,600,602,605,608,610,612,615,617,619,621],{"class":52,"line":589},29,[50,591,203],{"class":150},[50,593,594],{"class":56},"body",[50,596,597],{"class":208}," class",[50,599,212],{"class":150},[50,601,215],{"class":208},[50,603,604],{"class":60},"m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased] {{ ",[50,606,607],{"class":221},"page.bodyClass",[50,609,225],{"class":60},[50,611,228],{"class":208},[50,613,614],{"class":60},"bg-slate-100",[50,616,228],{"class":208},[50,618,236],{"class":60},[50,620,215],{"class":208},[50,622,253],{"class":150},[50,624,626,628,630,632,634,636,639,641],{"class":52,"line":625},30,[50,627,267],{"class":150},[50,629,461],{"class":56},[50,631,464],{"class":208},[50,633,212],{"class":150},[50,635,215],{"class":208},[50,637,638],{"class":60},"page.preheader",[50,640,215],{"class":208},[50,642,253],{"class":150},[50,644,646,648,651,653,655,657,660,662],{"class":52,"line":645},31,[50,647,481],{"class":150},[50,649,650],{"class":56},"div",[50,652,597],{"class":208},[50,654,212],{"class":150},[50,656,215],{"class":208},[50,658,659],{"class":60},"hidden",[50,661,215],{"class":208},[50,663,253],{"class":150},[50,665,667,670,672],{"class":52,"line":666},32,[50,668,669],{"class":60},"      {{{ ",[50,671,638],{"class":221},[50,673,674],{"class":60}," }}}\n",[50,676,678,681,684,687,689,691,694,696,698,701,704,706],{"class":52,"line":677},33,[50,679,680],{"class":150},"      \u003C",[50,682,683],{"class":56},"each",[50,685,686],{"class":208}," loop",[50,688,212],{"class":150},[50,690,215],{"class":208},[50,692,693],{"class":60},"item in Array.from(Array(150))",[50,695,215],{"class":208},[50,697,487],{"class":150},[50,699,700],{"class":56},"͏",[50,702,703],{"class":150}," \u003C/",[50,705,683],{"class":56},[50,707,253],{"class":150},[50,709,711,714,716],{"class":52,"line":710},34,[50,712,713],{"class":150},"    \u003C/",[50,715,650],{"class":56},[50,717,253],{"class":150},[50,719,721,723,725],{"class":52,"line":720},35,[50,722,508],{"class":150},[50,724,461],{"class":56},[50,726,253],{"class":150},[50,728,730],{"class":52,"line":729},36,[50,731,160],{"emptyLinePlaceholder":159},[50,733,735,737],{"class":52,"line":734},37,[50,736,267],{"class":150},[50,738,739],{"class":56},"div\n",[50,741,743,746,748,750,753],{"class":52,"line":742},38,[50,744,745],{"class":208},"    align",[50,747,212],{"class":150},[50,749,215],{"class":208},[50,751,752],{"class":60},"center",[50,754,755],{"class":208},"\"\n",[50,757,759,762,764,766,769],{"class":52,"line":758},39,[50,760,761],{"class":208},"    role",[50,763,212],{"class":150},[50,765,215],{"class":208},[50,767,768],{"class":60},"article",[50,770,755],{"class":208},[50,772,774,777,779,781,784],{"class":52,"line":773},40,[50,775,776],{"class":208},"    aria-roledescription",[50,778,212],{"class":150},[50,780,215],{"class":208},[50,782,783],{"class":60},"email",[50,785,755],{"class":208},[50,787,789,792,794,796,798,800,802,804,806,808,810],{"class":52,"line":788},41,[50,790,791],{"class":208},"    lang",[50,793,212],{"class":150},[50,795,215],{"class":208},[50,797,218],{"class":60},[50,799,222],{"class":221},[50,801,225],{"class":60},[50,803,228],{"class":208},[50,805,231],{"class":60},[50,807,228],{"class":208},[50,809,236],{"class":60},[50,811,755],{"class":208},[50,813,815,818,820,822,824,826,828,830,832,834,836],{"class":52,"line":814},42,[50,816,817],{"class":208},"    class",[50,819,212],{"class":150},[50,821,215],{"class":208},[50,823,218],{"class":60},[50,825,607],{"class":221},[50,827,225],{"class":60},[50,829,228],{"class":208},[50,831,614],{"class":60},[50,833,228],{"class":208},[50,835,236],{"class":60},[50,837,755],{"class":208},[50,839,841,844,846,848,850,852,854,857,859],{"class":52,"line":840},43,[50,842,843],{"class":208},"    aria-label",[50,845,212],{"class":150},[50,847,215],{"class":208},[50,849,490],{"class":60},[50,851,471],{"class":221},[50,853,225],{"class":60},[50,855,856],{"class":208},"''",[50,858,495],{"class":60},[50,860,755],{"class":208},[50,862,864],{"class":52,"line":863},44,[50,865,866],{"class":150},"  >\n",[50,868,870,872,875,877,879,881,884,886],{"class":52,"line":869},45,[50,871,481],{"class":150},[50,873,874],{"class":56},"table",[50,876,597],{"class":208},[50,878,212],{"class":150},[50,880,215],{"class":208},[50,882,883],{"class":60},"font-sans",[50,885,215],{"class":208},[50,887,253],{"class":150},[50,889,891,893,896],{"class":52,"line":890},46,[50,892,680],{"class":150},[50,894,895],{"class":56},"tr",[50,897,253],{"class":150},[50,899,901,904,907,909,911,913,916,918],{"class":52,"line":900},47,[50,902,903],{"class":150},"        \u003C",[50,905,906],{"class":56},"td",[50,908,597],{"class":208},[50,910,212],{"class":150},[50,912,215],{"class":208},[50,914,915],{"class":60},"w-[600px] max-w-full bg-white rounded-xl",[50,917,215],{"class":208},[50,919,253],{"class":150},[50,921,923,926,928,930,932,934,937,939],{"class":52,"line":922},48,[50,924,925],{"class":150},"          \u003C",[50,927,874],{"class":56},[50,929,597],{"class":208},[50,931,212],{"class":150},[50,933,215],{"class":208},[50,935,936],{"class":60},"w-full",[50,938,215],{"class":208},[50,940,253],{"class":150},[50,942,944,947,949],{"class":52,"line":943},49,[50,945,946],{"class":150},"            \u003C",[50,948,895],{"class":56},[50,950,253],{"class":150},[50,952,954,957,959,961,963,965,968,970],{"class":52,"line":953},50,[50,955,956],{"class":150},"              \u003C",[50,958,906],{"class":56},[50,960,597],{"class":208},[50,962,212],{"class":150},[50,964,215],{"class":208},[50,966,967],{"class":60},"p-0 px-8 sm:px-4 text-base/6 text-slate-700",[50,969,215],{"class":208},[50,971,253],{"class":150},[50,973,975,978,981,983],{"class":52,"line":974},51,[50,976,977],{"class":150},"                \u003C",[50,979,980],{"class":56},"yield",[50,982,575],{"class":208},[50,984,253],{"class":150},[50,986,988,991,993],{"class":52,"line":987},52,[50,989,990],{"class":150},"              \u003C/",[50,992,906],{"class":56},[50,994,253],{"class":150},[50,996,998,1001,1003],{"class":52,"line":997},53,[50,999,1000],{"class":150},"            \u003C/",[50,1002,895],{"class":56},[50,1004,253],{"class":150},[50,1006,1008,1011,1013],{"class":52,"line":1007},54,[50,1009,1010],{"class":150},"          \u003C/",[50,1012,874],{"class":56},[50,1014,253],{"class":150},[50,1016,1018,1021,1023],{"class":52,"line":1017},55,[50,1019,1020],{"class":150},"        \u003C/",[50,1022,906],{"class":56},[50,1024,253],{"class":150},[50,1026,1028,1031,1033],{"class":52,"line":1027},56,[50,1029,1030],{"class":150},"      \u003C/",[50,1032,895],{"class":56},[50,1034,253],{"class":150},[50,1036,1038,1040,1042],{"class":52,"line":1037},57,[50,1039,713],{"class":150},[50,1041,874],{"class":56},[50,1043,253],{"class":150},[50,1045,1047,1049,1051],{"class":52,"line":1046},58,[50,1048,508],{"class":150},[50,1050,650],{"class":56},[50,1052,253],{"class":150},[50,1054,1056,1058,1060],{"class":52,"line":1055},59,[50,1057,498],{"class":150},[50,1059,594],{"class":56},[50,1061,253],{"class":150},[50,1063,1065,1067,1069],{"class":52,"line":1064},60,[50,1066,498],{"class":150},[50,1068,91],{"class":56},[50,1070,253],{"class":150},[76,1072,1074],{"id":1073},"dependencies","Dependencies",[14,1076,1077],{},"We'll need a couple of extra dependencies to parse the Markdown files:",[1079,1080,1081,1093],"ul",{},[1082,1083,1084,1087,1088,1092],"li",{},[47,1085,1086],{},"front-matter"," to be able to use ",[24,1089,1091],{"href":1090},"/docs/templates#front-matter","Front Matter"," in our Markdown files",[1082,1094,1095,1098],{},[47,1096,1097],{},"markdown-it-attrs"," to be able to add Tailwind CSS classes right in Markdown",[14,1100,1101],{},"Let's install them:",[40,1103,1105],{"className":42,"code":1104,"language":44,"meta":45,"style":45},"npm install front-matter markdown-it-attrs\n",[47,1106,1107],{"__ignoreMap":45},[50,1108,1109,1112,1115,1118],{"class":52,"line":53},[50,1110,1111],{"class":56},"npm",[50,1113,1114],{"class":60}," install",[50,1116,1117],{"class":60}," front-matter",[50,1119,1120],{"class":60}," markdown-it-attrs\n",[76,1122,1124],{"id":1123},"configjs","config.js",[14,1126,1127],{},"Since we're not using the default setup anymore, we need to tell Maizzle where to look for 'templates' to compile.",[14,1129,1130,1131,1134,1135,1137],{},"Update ",[47,1132,1133],{},"build.templates"," to use .md files from the ",[47,1136,85],{}," folder:",[40,1139,1144],{"className":1140,"code":1141,"filename":1124,"highlights":1142,"language":1143,"meta":45,"style":45},"language-js shiki shiki-themes tailwind-css tailwind-css has-diff","export default {\n  build: {\n    content: ['content/**/*.md'], // [!code ++]\n  },\n}\n",[107],"js",[47,1145,1146,1158,1168,1191,1196],{"__ignoreMap":45},[50,1147,1148,1151,1154],{"class":52,"line":53},[50,1149,1150],{"class":56},"export",[50,1152,1153],{"class":56}," default",[50,1155,1157],{"class":1156},"sprQ5"," {\n",[50,1159,1160,1163,1166],{"class":52,"line":101},[50,1161,1162],{"class":60},"  build",[50,1164,1165],{"class":1156},":",[50,1167,1157],{"class":1156},[50,1169,1174,1177,1179,1182,1185,1188],{"class":1170,"line":107},[52,1171,1172,1173],"highlight","diff","add",[50,1175,1176],{"class":60},"    content",[50,1178,1165],{"class":1156},[50,1180,1181],{"class":60}," [",[50,1183,1184],{"class":60},"'content/**/*.md'",[50,1186,1187],{"class":60},"]",[50,1189,1190],{"class":1156},",",[50,1192,1193],{"class":52,"line":113},[50,1194,1195],{"class":1156},"  },\n",[50,1197,1198],{"class":52,"line":119},[50,1199,1200],{"class":1156},"}\n",[32,1202,1204],{"id":1203},"compile-markdown","Compile Markdown",[14,1206,1207,1208,1211,1212,1215,1216,1219],{},"If you run ",[47,1209,1210],{},"npm run build"," now, you'll notice the files output to ",[47,1213,1214],{},"build_production"," only include the raw, unparsed content of your Markdown files: they were not compiled to HTML, neither did they use our ",[47,1217,1218],{},"main.html"," layout.",[14,1221,1222],{},"Maizzle doesn't know what layout to use or that the content of our .md files is Markdown that needs parsing, so we need to instruct it to do that.",[14,1224,1225,1226,1233],{},"We can use the ",[24,1227,1229,1232],{"href":1228},"/docs/events#beforerender",[47,1230,1231],{},"beforeRender"," event"," for this:",[40,1235,1238],{"className":1236,"code":1237,"filename":1124,"language":1143,"meta":45,"style":45},"language-js shiki shiki-themes tailwind-css tailwind-css","import fm from 'front-matter'\n\nexport default {\n  beforeRender(html) {\n    const { body } = fm(html)\n\n    return `\n      \u003Cx-main>\n        \u003Cmd>${body}\u003C/md>\n      \u003C/x-main>`\n  },\n}\n",[47,1239,1240,1255,1259,1267,1283,1310,1314,1322,1327,1342,1347,1351],{"__ignoreMap":45},[50,1241,1242,1245,1249,1252],{"class":52,"line":53},[50,1243,1244],{"class":221},"import",[50,1246,1248],{"class":1247},"sO1gY"," fm",[50,1250,1251],{"class":1156}," from",[50,1253,1254],{"class":221}," 'front-matter'\n",[50,1256,1257],{"class":52,"line":101},[50,1258,160],{"emptyLinePlaceholder":159},[50,1260,1261,1263,1265],{"class":52,"line":107},[50,1262,1150],{"class":56},[50,1264,1153],{"class":56},[50,1266,1157],{"class":1156},[50,1268,1269,1273,1276,1278,1281],{"class":52,"line":113},[50,1270,1272],{"class":1271},"s2ImL","  beforeRender",[50,1274,1275],{"class":1156},"(",[50,1277,91],{"class":221},[50,1279,1280],{"class":1156},")",[50,1282,1157],{"class":1156},[50,1284,1285,1288,1291,1294,1297,1301,1303,1305,1307],{"class":52,"line":119},[50,1286,1287],{"class":221},"    const",[50,1289,1290],{"class":1156}," {",[50,1292,1293],{"class":60}," body ",[50,1295,1296],{"class":1156},"}",[50,1298,1300],{"class":1299},"sVevU"," =",[50,1302,1248],{"class":1271},[50,1304,1275],{"class":60},[50,1306,91],{"class":221},[50,1308,1309],{"class":60},")\n",[50,1311,1312],{"class":52,"line":320},[50,1313,160],{"emptyLinePlaceholder":159},[50,1315,1316,1319],{"class":52,"line":352},[50,1317,1318],{"class":56},"    return",[50,1320,1321],{"class":60}," `\n",[50,1323,1324],{"class":52,"line":383},[50,1325,1326],{"class":60},"      \u003Cx-main>\n",[50,1328,1329,1332,1335,1337,1339],{"class":52,"line":390},[50,1330,1331],{"class":60},"        \u003Cmd>",[50,1333,1334],{"class":1156},"${",[50,1336,594],{"class":221},[50,1338,1296],{"class":1156},[50,1340,1341],{"class":60},"\u003C/md>\n",[50,1343,1344],{"class":52,"line":396},[50,1345,1346],{"class":60},"      \u003C/x-main>`\n",[50,1348,1349],{"class":52,"line":402},[50,1350,1195],{"class":1156},[50,1352,1353],{"class":52,"line":408},[50,1354,1200],{"class":1156},[14,1356,1357],{},"Here's a step-by-step explanation of what's happening:",[1359,1360,1361,1367,1376],"ol",{},[1082,1362,1363,1364,1366],{},"We're hooking into the ",[47,1365,1231],{}," event to alter the HTML before it's compiled.",[1082,1368,1369,1370,1372,1373,1375],{},"We use ",[47,1371,1086],{}," to extract the Markdown content from the file into a ",[47,1374,594],{}," variable. This ensures that we only parse Markdown content, and not the Front Matter too.",[1082,1377,1378,1379,1381,1382,1385,1386,1390,1391,1394,1395,1219],{},"We're returning a string that includes the contents of the ",[47,1380,594],{}," property wrapped in ",[47,1383,1384],{},"\u003Cmd>"," tags, so Maizzle can parse them as Markdown. See the ",[24,1387,1389],{"href":1388},"/docs/markdown","Markdown documentation"," for more info on this tag. Finally, the ",[47,1392,1393],{},"\u003Cx-main>"," tag tells Maizzle to use our ",[47,1396,1218],{},[14,1398,1399,1400,1402,1403,1405,1406,1408],{},"Run ",[47,1401,1210],{}," again and you'll see that the files in the ",[47,1404,1214],{}," folder are now compiled to HTML using our ",[47,1407,1218],{}," layout 🥳",[32,1410,1412],{"id":1411},"styling","Styling",[14,1414,1415,1416,1419],{},"Let's create a ",[47,1417,1418],{},"css/markdown.css"," file so we can add some global styles for our Markdown content:",[40,1421,1425],{"className":1422,"code":1423,"filename":1418,"language":1424,"meta":45,"style":45},"language-css shiki shiki-themes tailwind-css tailwind-css","h1 {\n  @apply text-3xl leading-9;\n}\n\np {\n  @apply m-0 mb-8;\n}\n\nimg {\n  @apply max-w-full leading-full align-middle;\n  border: 0;\n}\n","css",[47,1426,1427,1433,1456,1460,1464,1470,1488,1492,1496,1503,1520,1533],{"__ignoreMap":45},[50,1428,1429,1431],{"class":52,"line":53},[50,1430,10],{"class":56},[50,1432,1157],{"class":191},[50,1434,1435,1438,1441,1444,1447,1450,1453],{"class":52,"line":101},[50,1436,1437],{"class":528},"  @",[50,1439,1440],{"class":1247},"apply",[50,1442,1443],{"class":1247}," text-",[50,1445,1446],{"class":528},"3",[50,1448,1449],{"class":1247},"xl",[50,1451,1452],{"class":1247}," leading-",[50,1454,1455],{"class":528},"9;\n",[50,1457,1458],{"class":52,"line":107},[50,1459,1200],{"class":191},[50,1461,1462],{"class":52,"line":113},[50,1463,160],{"emptyLinePlaceholder":159},[50,1465,1466,1468],{"class":52,"line":119},[50,1467,14],{"class":56},[50,1469,1157],{"class":191},[50,1471,1472,1474,1476,1479,1482,1485],{"class":52,"line":320},[50,1473,1437],{"class":528},[50,1475,1440],{"class":1247},[50,1477,1478],{"class":1247}," m-",[50,1480,1481],{"class":528},"0 ",[50,1483,1484],{"class":1247},"mb-",[50,1486,1487],{"class":528},"8;\n",[50,1489,1490],{"class":52,"line":352},[50,1491,1200],{"class":191},[50,1493,1494],{"class":52,"line":383},[50,1495,160],{"emptyLinePlaceholder":159},[50,1497,1498,1501],{"class":52,"line":390},[50,1499,1500],{"class":56},"img",[50,1502,1157],{"class":191},[50,1504,1505,1507,1509,1512,1515,1518],{"class":52,"line":396},[50,1506,1437],{"class":528},[50,1508,1440],{"class":1247},[50,1510,1511],{"class":1247}," max-w-full",[50,1513,1514],{"class":1247}," leading-full",[50,1516,1517],{"class":1247}," align-middle",[50,1519,535],{"class":528},[50,1521,1522,1525,1528,1531],{"class":52,"line":402},[50,1523,1524],{"class":1247},"  border",[50,1526,1527],{"class":528},": ",[50,1529,1530],{"class":60},"0",[50,1532,535],{"class":528},[50,1534,1535],{"class":52,"line":408},[50,1536,1200],{"class":191},[14,1538,1539,1540,1543],{},"Make sure to import this file in the ",[47,1541,1542],{},"\u003Cstyle>"," tag:",[40,1545,1547],{"className":89,"code":1546,"filename":175,"language":91,"meta":45,"style":45},"\u003Cstyle>\n  @import \"css/markdown.css\";\n  @import 'tailwindcss/components';\n  @import 'tailwindcss/utilities';\n\u003C/style>\n",[47,1548,1549,1557,1571,1585,1598],{"__ignoreMap":45},[50,1550,1551,1553,1555],{"class":52,"line":53},[50,1552,203],{"class":150},[50,1554,520],{"class":56},[50,1556,253],{"class":150},[50,1558,1559,1562,1565,1567,1569],{"class":52,"line":101},[50,1560,1561],{"class":528},"  @import",[50,1563,1564],{"class":208}," \"",[50,1566,1418],{"class":60},[50,1568,215],{"class":208},[50,1570,535],{"class":528},[50,1572,1573,1575,1578,1581,1583],{"class":52,"line":107},[50,1574,1561],{"class":528},[50,1576,1577],{"class":208}," '",[50,1579,1580],{"class":60},"tailwindcss/components",[50,1582,228],{"class":208},[50,1584,535],{"class":528},[50,1586,1587,1589,1591,1594,1596],{"class":52,"line":113},[50,1588,1561],{"class":528},[50,1590,1577],{"class":208},[50,1592,1593],{"class":60},"tailwindcss/utilities",[50,1595,228],{"class":208},[50,1597,535],{"class":528},[50,1599,1600,1602,1604],{"class":52,"line":119},[50,1601,498],{"class":150},[50,1603,520],{"class":56},[50,1605,253],{"class":150},[14,1607,1399,1608,1610],{},[47,1609,1210],{}," again and you'll see that the styles are now applied:",[40,1612,1618],{"className":1613,"code":1614,"filename":1615,"highlights":1616,"language":91,"meta":1617,"style":45},"language-html shiki shiki-themes tailwind-css tailwind-css has-diff","  \u003Ch1>Hello world\u003C/h1> \u003C!-- [!code --]-->\n  \u003Ch1 style=\"font-size: 30px; line-height: 36px;\">Hello world\u003C/h1> \u003C!-- [!code ++]-->\n","build_production/newsletter-1.html",[101],"no-copy",[47,1619,1620,1639],{"__ignoreMap":45},[50,1621,1624,1626,1628,1630,1633,1635,1637],{"class":1622,"line":53},[52,1172,1623],"remove",[50,1625,267],{"class":150},[50,1627,10],{"class":56},[50,1629,487],{"class":150},[50,1631,1632],{"class":60},"Hello world",[50,1634,498],{"class":150},[50,1636,10],{"class":56},[50,1638,487],{"class":150},[50,1640,1642,1644,1646,1649,1651,1653,1656,1658,1660,1662,1664,1666],{"class":1641,"line":101},[52,1171,1172,1173],[50,1643,267],{"class":150},[50,1645,10],{"class":56},[50,1647,1648],{"class":208}," style",[50,1650,212],{"class":150},[50,1652,215],{"class":208},[50,1654,1655],{"class":60},"font-size: 30px; line-height: 36px;",[50,1657,215],{"class":208},[50,1659,487],{"class":150},[50,1661,1632],{"class":60},[50,1663,498],{"class":150},[50,1665,10],{"class":56},[50,1667,487],{"class":150},[76,1669,1671],{"id":1670},"tailwind-css","Tailwind CSS",[14,1673,1674],{},"We can also use Tailwind CSS classes directly in our Markdown files.",[14,1676,1677,1678,1680],{},"To do this, we'll use the ",[47,1679,1097],{}," plugin, which allows us to add attributes like class names to elements right when writing Markdown.",[14,1682,1130,1683,1685],{},[47,1684,1124],{}," to have Maizzle use the plugin:",[40,1687,1690],{"className":1140,"code":1688,"filename":1124,"highlights":1689,"language":1143,"meta":45,"style":45},"import mdAttrs from 'markdown-it-attrs'\n\nexport default {\n  markdown: {\n    plugins: [\n      {\n        plugin: mdAttrs, // [!code ++]\n      }\n    ]\n  },\n}\n",[352],[47,1691,1692,1704,1708,1716,1725,1735,1740,1752,1757,1762,1766],{"__ignoreMap":45},[50,1693,1694,1696,1699,1701],{"class":52,"line":53},[50,1695,1244],{"class":221},[50,1697,1698],{"class":1247}," mdAttrs",[50,1700,1251],{"class":1156},[50,1702,1703],{"class":221}," 'markdown-it-attrs'\n",[50,1705,1706],{"class":52,"line":101},[50,1707,160],{"emptyLinePlaceholder":159},[50,1709,1710,1712,1714],{"class":52,"line":107},[50,1711,1150],{"class":56},[50,1713,1153],{"class":56},[50,1715,1157],{"class":1156},[50,1717,1718,1721,1723],{"class":52,"line":113},[50,1719,1720],{"class":60},"  markdown",[50,1722,1165],{"class":1156},[50,1724,1157],{"class":1156},[50,1726,1727,1730,1732],{"class":52,"line":119},[50,1728,1729],{"class":60},"    plugins",[50,1731,1165],{"class":1156},[50,1733,1734],{"class":60}," [\n",[50,1736,1737],{"class":52,"line":320},[50,1738,1739],{"class":1156},"      {\n",[50,1741,1743,1746,1748,1750],{"class":1742,"line":352},[52,1171,1172,1173],[50,1744,1745],{"class":60},"        plugin",[50,1747,1165],{"class":1156},[50,1749,1698],{"class":221},[50,1751,1190],{"class":1156},[50,1753,1754],{"class":52,"line":383},[50,1755,1756],{"class":1156},"      }\n",[50,1758,1759],{"class":52,"line":390},[50,1760,1761],{"class":60},"    ]\n",[50,1763,1764],{"class":52,"line":396},[50,1765,1195],{"class":1156},[50,1767,1768],{"class":52,"line":402},[50,1769,1200],{"class":1156},[14,1771,1772],{},"You can now add Tailwind CSS classes to your Markdown elements by adding them inside curly braces after the content:",[40,1774,1776],{"className":140,"code":1775,"filename":136,"language":143,"meta":45,"style":45},"---\ntitle: \"Edition #1\"\n---\n\n# Hello world {.m-0 .mb-10 .text-slate-900}\n",[47,1777,1778,1783,1796,1800,1804],{"__ignoreMap":45},[50,1779,1780],{"class":52,"line":53},[50,1781,1782],{"class":150},"---\n",[50,1784,1785,1787,1789,1791,1794],{"class":52,"line":101},[50,1786,484],{"class":56},[50,1788,1165],{"class":150},[50,1790,1564],{"class":208},[50,1792,1793],{"class":60},"Edition #1",[50,1795,755],{"class":208},[50,1797,1798],{"class":52,"line":107},[50,1799,1782],{"class":150},[50,1801,1802],{"class":52,"line":113},[50,1803,160],{"emptyLinePlaceholder":159},[50,1805,1806,1808],{"class":52,"line":119},[50,1807,151],{"class":150},[50,1809,1810],{"class":56}," Hello world {.m-0 .mb-10 .text-slate-900}\n",[14,1812,1813],{},"Notice how classes include the leading dot, and are separated by spaces.",[14,1815,1816],{},"Result:",[40,1818,1821],{"className":1613,"code":1819,"filename":1615,"highlights":1820,"language":91,"meta":1617,"style":45},"  \u003Ch1 style=\"font-size: 30px; line-height: 36px;\">Hello world\u003C/h1> \u003C!-- [!code --]-->\n  \u003Ch1 style=\"font-size: 30px; line-height: 36px; margin: 0 0 40px; color: #0f172a\">Hello world\u003C/h1> \u003C!-- [!code ++]-->\n",[101],[47,1822,1823,1850],{"__ignoreMap":45},[50,1824,1826,1828,1830,1832,1834,1836,1838,1840,1842,1844,1846,1848],{"class":1825,"line":53},[52,1172,1623],[50,1827,267],{"class":150},[50,1829,10],{"class":56},[50,1831,1648],{"class":208},[50,1833,212],{"class":150},[50,1835,215],{"class":208},[50,1837,1655],{"class":60},[50,1839,215],{"class":208},[50,1841,487],{"class":150},[50,1843,1632],{"class":60},[50,1845,498],{"class":150},[50,1847,10],{"class":56},[50,1849,487],{"class":150},[50,1851,1853,1855,1857,1859,1861,1863,1866,1868,1870,1872,1874,1876],{"class":1852,"line":101},[52,1171,1172,1173],[50,1854,267],{"class":150},[50,1856,10],{"class":56},[50,1858,1648],{"class":208},[50,1860,212],{"class":150},[50,1862,215],{"class":208},[50,1864,1865],{"class":60},"font-size: 30px; line-height: 36px; margin: 0 0 40px; color: #0f172a",[50,1867,215],{"class":208},[50,1869,487],{"class":150},[50,1871,1632],{"class":60},[50,1873,498],{"class":150},[50,1875,10],{"class":56},[50,1877,487],{"class":150},[76,1879,1881],{"id":1880},"tailwindcsstypography","@tailwindcss/typography",[14,1883,1884,1885,1889,1890,30],{},"Although it's the obvious choice for styling Markdown content with Tailwind, we don't recommend using ",[24,1886,1881],{"href":1887,"rel":1888},"https://tailwindcss.com/docs/typography-plugin",[28]," for Markdown ",[1891,1892,129],"em",{},[14,1894,1895],{},"The plugin is great for the web, but it contains complex CSS selectors that are not fully supported by most email clients, and cannot be properly inlined either.",[14,1897,1898],{},"Feel free to experiment with it, but consider yourself warned.",[32,1900,1902],{"id":1901},"syntax-highlighting","Syntax highlighting",[14,1904,1905,1906,1911,1912,1917],{},"You can use syntax highlighters like ",[24,1907,1910],{"href":1908,"rel":1909},"https://shiki.matsu.io/",[28],"Shiki"," or ",[24,1913,1916],{"href":1914,"rel":1915},"https://prismjs.com/",[28],"Prism"," to add syntax highlighting to fenced code blocks in your markdown.",[14,1919,1920],{},"For example, here's how you'd use Shiki.",[14,1922,1923],{},"First, install the library:",[40,1925,1927],{"className":42,"code":1926,"language":44,"meta":45,"style":45},"npm install shiki\n",[47,1928,1929],{"__ignoreMap":45},[50,1930,1931,1933,1935],{"class":52,"line":53},[50,1932,1111],{"class":56},[50,1934,1114],{"class":60},[50,1936,1937],{"class":60}," shiki\n",[14,1939,1940,1941,1943,1944,1947,1948,1951],{},"Next, define a custom ",[47,1942,1171],{}," method for ",[47,1945,1946],{},"markdown-it",". Add it in the ",[47,1949,1950],{},"beforeCreate"," event so that the highlighter is retrieved once, before templates are compiled:",[40,1953,1955],{"className":1236,"code":1954,"filename":1124,"language":1143,"meta":45,"style":45},"import { createHighlighter } from 'shiki'\n\nexport default {\n  async beforeCreate(config) {\n    const highlighter = await createHighlighter({\n      themes: ['nord'],\n      langs: ['html'],\n    })\n\n    config = Object.assign(config, {\n      markdown: {\n        markdownit: {\n          highlight: (code, lang) => {\n            lang = lang || 'html'\n            return highlighter.codeToHtml(code, { lang, theme: 'nord' })\n          }\n        }\n      }\n    })\n  },\n}\n",[47,1956,1957,1974,1978,1986,2003,2022,2039,2055,2062,2066,2089,2098,2107,2130,2145,2182,2187,2192,2196,2202,2206],{"__ignoreMap":45},[50,1958,1959,1961,1963,1966,1969,1971],{"class":52,"line":53},[50,1960,1244],{"class":221},[50,1962,1290],{"class":1156},[50,1964,1965],{"class":1247}," createHighlighter",[50,1967,1968],{"class":1156}," }",[50,1970,1251],{"class":1156},[50,1972,1973],{"class":221}," 'shiki'\n",[50,1975,1976],{"class":52,"line":101},[50,1977,160],{"emptyLinePlaceholder":159},[50,1979,1980,1982,1984],{"class":52,"line":107},[50,1981,1150],{"class":56},[50,1983,1153],{"class":56},[50,1985,1157],{"class":1156},[50,1987,1988,1991,1994,1996,1999,2001],{"class":52,"line":113},[50,1989,1990],{"class":221},"  async",[50,1992,1993],{"class":1271}," beforeCreate",[50,1995,1275],{"class":1156},[50,1997,1998],{"class":221},"config",[50,2000,1280],{"class":1156},[50,2002,1157],{"class":1156},[50,2004,2005,2007,2010,2012,2015,2017,2019],{"class":52,"line":119},[50,2006,1287],{"class":221},[50,2008,2009],{"class":60}," highlighter ",[50,2011,212],{"class":1299},[50,2013,2014],{"class":56}," await",[50,2016,1965],{"class":1271},[50,2018,1275],{"class":60},[50,2020,2021],{"class":1156},"{\n",[50,2023,2024,2027,2029,2031,2034,2036],{"class":52,"line":320},[50,2025,2026],{"class":60},"      themes",[50,2028,1165],{"class":1156},[50,2030,1181],{"class":60},[50,2032,2033],{"class":60},"'nord'",[50,2035,1187],{"class":60},[50,2037,2038],{"class":1156},",\n",[50,2040,2041,2044,2046,2048,2051,2053],{"class":52,"line":352},[50,2042,2043],{"class":60},"      langs",[50,2045,1165],{"class":1156},[50,2047,1181],{"class":60},[50,2049,2050],{"class":60},"'html'",[50,2052,1187],{"class":60},[50,2054,2038],{"class":1156},[50,2056,2057,2060],{"class":52,"line":383},[50,2058,2059],{"class":1156},"    }",[50,2061,1309],{"class":60},[50,2063,2064],{"class":52,"line":390},[50,2065,160],{"emptyLinePlaceholder":159},[50,2067,2068,2071,2073,2076,2078,2081,2083,2085,2087],{"class":52,"line":396},[50,2069,2070],{"class":221},"    config",[50,2072,1300],{"class":1299},[50,2074,2075],{"class":221}," Object",[50,2077,30],{"class":1156},[50,2079,2080],{"class":1271},"assign",[50,2082,1275],{"class":60},[50,2084,1998],{"class":221},[50,2086,1190],{"class":1156},[50,2088,1157],{"class":1156},[50,2090,2091,2094,2096],{"class":52,"line":402},[50,2092,2093],{"class":60},"      markdown",[50,2095,1165],{"class":1156},[50,2097,1157],{"class":1156},[50,2099,2100,2103,2105],{"class":52,"line":408},[50,2101,2102],{"class":60},"        markdownit",[50,2104,1165],{"class":1156},[50,2106,1157],{"class":1156},[50,2108,2109,2112,2114,2117,2119,2121,2123,2125,2128],{"class":52,"line":414},[50,2110,2111],{"class":1271},"          highlight",[50,2113,1165],{"class":1156},[50,2115,2116],{"class":1156}," (",[50,2118,47],{"class":221},[50,2120,1190],{"class":1156},[50,2122,209],{"class":221},[50,2124,1280],{"class":1156},[50,2126,2127],{"class":221}," =>",[50,2129,1157],{"class":1156},[50,2131,2132,2135,2137,2139,2142],{"class":52,"line":420},[50,2133,2134],{"class":221},"            lang",[50,2136,1300],{"class":1299},[50,2138,209],{"class":221},[50,2140,2141],{"class":56}," ||",[50,2143,2144],{"class":60}," 'html'\n",[50,2146,2147,2150,2153,2155,2158,2160,2162,2164,2166,2168,2170,2173,2175,2178,2180],{"class":52,"line":426},[50,2148,2149],{"class":56},"            return",[50,2151,2152],{"class":221}," highlighter",[50,2154,30],{"class":1156},[50,2156,2157],{"class":1271},"codeToHtml",[50,2159,1275],{"class":60},[50,2161,47],{"class":221},[50,2163,1190],{"class":1156},[50,2165,1290],{"class":1156},[50,2167,209],{"class":221},[50,2169,1190],{"class":1156},[50,2171,2172],{"class":60}," theme",[50,2174,1165],{"class":1156},[50,2176,2177],{"class":60}," 'nord'",[50,2179,1968],{"class":1156},[50,2181,1309],{"class":60},[50,2183,2184],{"class":52,"line":432},[50,2185,2186],{"class":1156},"          }\n",[50,2188,2189],{"class":52,"line":438},[50,2190,2191],{"class":1156},"        }\n",[50,2193,2194],{"class":52,"line":444},[50,2195,1756],{"class":1156},[50,2197,2198,2200],{"class":52,"line":450},[50,2199,2059],{"class":1156},[50,2201,1309],{"class":60},[50,2203,2204],{"class":52,"line":456},[50,2205,1195],{"class":1156},[50,2207,2208],{"class":52,"line":478},[50,2209,1200],{"class":1156},[14,2211,2212],{},"Now all your markdown code blocks will be highlighted with the Nord theme.",[32,2214,2216],{"id":2215},"expressions","Expressions",[14,2218,2219,2220,2223],{},"You can use ",[24,2221,2215],{"href":2222},"/docs/templates#expressions"," in Markdown files just as you would in any Maizzle template:",[40,2225,2227],{"className":182,"code":2226,"filename":136,"language":184,"meta":45,"style":45},"---\ntitle: \"Edition #1\"\n---\n\n# {{ page.title }}\n\nThis is the first newsletter.\n",[47,2228,2229,2233,2245,2249,2253,2263,2267],{"__ignoreMap":45},[50,2230,2231],{"class":52,"line":53},[50,2232,1782],{"class":60},[50,2234,2235,2237,2239,2241,2243],{"class":52,"line":101},[50,2236,484],{"class":56},[50,2238,1165],{"class":150},[50,2240,1564],{"class":208},[50,2242,1793],{"class":60},[50,2244,755],{"class":208},[50,2246,2247],{"class":52,"line":107},[50,2248,1782],{"class":60},[50,2250,2251],{"class":52,"line":113},[50,2252,160],{"emptyLinePlaceholder":159},[50,2254,2255,2258,2260],{"class":52,"line":119},[50,2256,2257],{"class":60},"# {{ ",[50,2259,471],{"class":221},[50,2261,2262],{"class":60}," }}\n",[50,2264,2265],{"class":52,"line":320},[50,2266,160],{"emptyLinePlaceholder":159},[50,2268,2269],{"class":52,"line":352},[50,2270,165],{"class":60},[32,2272,2274],{"id":2273},"components","Components",[14,2276,2277],{},"You can also import Maizzle components in your Markdown files.",[14,2279,2280,2281,2284],{},"For example, let's create an ",[47,2282,2283],{},"\u003Cx-alert>"," component:",[40,2286,2289],{"className":89,"code":2287,"filename":2288,"language":91,"meta":45,"style":45},"\u003Ctable class=\"w-full mb-8\">\n  \u003Ctr>\n    \u003Ctd\n      attributes\n      class=\"py-2 px-4 bg-blue-100 text-blue-600 rounded\"\n    >\n      \u003Cyield />\n    \u003C/td>\n  \u003C/tr>\n\u003C/table>\n","components/alert.html",[47,2290,2291,2310,2318,2325,2330,2344,2349,2358,2366,2374],{"__ignoreMap":45},[50,2292,2293,2295,2297,2299,2301,2303,2306,2308],{"class":52,"line":53},[50,2294,203],{"class":150},[50,2296,874],{"class":56},[50,2298,597],{"class":208},[50,2300,212],{"class":150},[50,2302,215],{"class":208},[50,2304,2305],{"class":60},"w-full mb-8",[50,2307,215],{"class":208},[50,2309,253],{"class":150},[50,2311,2312,2314,2316],{"class":52,"line":101},[50,2313,267],{"class":150},[50,2315,895],{"class":56},[50,2317,253],{"class":150},[50,2319,2320,2322],{"class":52,"line":107},[50,2321,481],{"class":150},[50,2323,2324],{"class":56},"td\n",[50,2326,2327],{"class":52,"line":113},[50,2328,2329],{"class":208},"      attributes\n",[50,2331,2332,2335,2337,2339,2342],{"class":52,"line":119},[50,2333,2334],{"class":208},"      class",[50,2336,212],{"class":150},[50,2338,215],{"class":208},[50,2340,2341],{"class":60},"py-2 px-4 bg-blue-100 text-blue-600 rounded",[50,2343,755],{"class":208},[50,2345,2346],{"class":52,"line":320},[50,2347,2348],{"class":150},"    >\n",[50,2350,2351,2353,2355],{"class":52,"line":352},[50,2352,680],{"class":150},[50,2354,980],{"class":56},[50,2356,2357],{"class":150}," />\n",[50,2359,2360,2362,2364],{"class":52,"line":383},[50,2361,713],{"class":150},[50,2363,906],{"class":56},[50,2365,253],{"class":150},[50,2367,2368,2370,2372],{"class":52,"line":390},[50,2369,508],{"class":150},[50,2371,895],{"class":56},[50,2373,253],{"class":150},[50,2375,2376,2378,2380],{"class":52,"line":396},[50,2377,498],{"class":150},[50,2379,874],{"class":56},[50,2381,253],{"class":150},[14,2383,2384,2385,2388],{},"Notice the ",[47,2386,2387],{},"attributes"," attribute - this indicates that any attributes passed to the component should be added to this element, instead of the root element.",[14,2390,2391],{},"We can use it like this:",[40,2393,2395],{"className":182,"code":2394,"filename":136,"language":184,"meta":45,"style":45},"---\ntitle: \"Edition #1\"\n---\n\n# {{ page.title }}\n\nThis is the first newsletter.\n\n\u003Cx-alert>\n  Notice: this is an alert.\n\u003C/x-alert>\n",[47,2396,2397,2401,2413,2417,2421,2429,2433,2437,2441,2450,2455],{"__ignoreMap":45},[50,2398,2399],{"class":52,"line":53},[50,2400,1782],{"class":60},[50,2402,2403,2405,2407,2409,2411],{"class":52,"line":101},[50,2404,484],{"class":56},[50,2406,1165],{"class":150},[50,2408,1564],{"class":208},[50,2410,1793],{"class":60},[50,2412,755],{"class":208},[50,2414,2415],{"class":52,"line":107},[50,2416,1782],{"class":60},[50,2418,2419],{"class":52,"line":113},[50,2420,160],{"emptyLinePlaceholder":159},[50,2422,2423,2425,2427],{"class":52,"line":119},[50,2424,2257],{"class":60},[50,2426,471],{"class":221},[50,2428,2262],{"class":60},[50,2430,2431],{"class":52,"line":320},[50,2432,160],{"emptyLinePlaceholder":159},[50,2434,2435],{"class":52,"line":352},[50,2436,165],{"class":60},[50,2438,2439],{"class":52,"line":383},[50,2440,160],{"emptyLinePlaceholder":159},[50,2442,2443,2445,2448],{"class":52,"line":390},[50,2444,203],{"class":150},[50,2446,2447],{"class":56},"x-alert",[50,2449,253],{"class":150},[50,2451,2452],{"class":52,"line":396},[50,2453,2454],{"class":60},"  Notice: this is an alert.\n",[50,2456,2457,2459,2461],{"class":52,"line":402},[50,2458,498],{"class":150},[50,2460,2447],{"class":56},[50,2462,253],{"class":150},[76,2464,2466],{"id":2465},"markdown-in-components","Markdown in components",[14,2468,2469],{},"To use Markdown inside a component, add an empty line before and after the content that you pass inside:",[40,2471,2473],{"className":182,"code":2472,"filename":136,"language":184,"meta":45,"style":45},"---\ntitle: \"Edition #1\"\n---\n\n\u003Cx-alert>\n\n  # {{ page.title }}\n\n  This is the first newsletter.\n\n\u003C/x-alert>\n",[47,2474,2475,2479,2491,2495,2499,2507,2511,2520,2524,2529,2533],{"__ignoreMap":45},[50,2476,2477],{"class":52,"line":53},[50,2478,1782],{"class":60},[50,2480,2481,2483,2485,2487,2489],{"class":52,"line":101},[50,2482,484],{"class":56},[50,2484,1165],{"class":150},[50,2486,1564],{"class":208},[50,2488,1793],{"class":60},[50,2490,755],{"class":208},[50,2492,2493],{"class":52,"line":107},[50,2494,1782],{"class":60},[50,2496,2497],{"class":52,"line":113},[50,2498,160],{"emptyLinePlaceholder":159},[50,2500,2501,2503,2505],{"class":52,"line":119},[50,2502,203],{"class":150},[50,2504,2447],{"class":56},[50,2506,253],{"class":150},[50,2508,2509],{"class":52,"line":320},[50,2510,160],{"emptyLinePlaceholder":159},[50,2512,2513,2516,2518],{"class":52,"line":352},[50,2514,2515],{"class":60},"  # {{ ",[50,2517,471],{"class":221},[50,2519,2262],{"class":60},[50,2521,2522],{"class":52,"line":383},[50,2523,160],{"emptyLinePlaceholder":159},[50,2525,2526],{"class":52,"line":390},[50,2527,2528],{"class":60},"  This is the first newsletter.\n",[50,2530,2531],{"class":52,"line":396},[50,2532,160],{"emptyLinePlaceholder":159},[50,2534,2535,2537,2539],{"class":52,"line":402},[50,2536,498],{"class":150},[50,2538,2447],{"class":56},[50,2540,253],{"class":150},[14,2542,2543,2544,2546,2547,2550,2551,2554],{},"To prevent an issue with code indentation in ",[47,2545,1946],{}," that would result in ",[47,2548,2549],{},"\u003Cpre>"," tags being added to the rendered HTML, simply don't indent the closing tags after ",[47,2552,2553],{},"\u003Cyield />",". A bit of a workaround, but it works:",[40,2556,2558],{"className":89,"code":2557,"filename":2288,"language":91,"meta":45,"style":45},"\u003Ctable class=\"w-full mb-8\">\n  \u003Ctr>\n    \u003Ctd\n      attributes\n      class=\"py-2 px-4 bg-blue-100 text-blue-600 rounded\"\n    >\n      \u003Cyield />\n\u003C/td>\n\u003C/tr>\n\u003C/table>\n",[47,2559,2560,2578,2586,2592,2596,2608,2612,2620,2628,2636],{"__ignoreMap":45},[50,2561,2562,2564,2566,2568,2570,2572,2574,2576],{"class":52,"line":53},[50,2563,203],{"class":150},[50,2565,874],{"class":56},[50,2567,597],{"class":208},[50,2569,212],{"class":150},[50,2571,215],{"class":208},[50,2573,2305],{"class":60},[50,2575,215],{"class":208},[50,2577,253],{"class":150},[50,2579,2580,2582,2584],{"class":52,"line":101},[50,2581,267],{"class":150},[50,2583,895],{"class":56},[50,2585,253],{"class":150},[50,2587,2588,2590],{"class":52,"line":107},[50,2589,481],{"class":150},[50,2591,2324],{"class":56},[50,2593,2594],{"class":52,"line":113},[50,2595,2329],{"class":208},[50,2597,2598,2600,2602,2604,2606],{"class":52,"line":119},[50,2599,2334],{"class":208},[50,2601,212],{"class":150},[50,2603,215],{"class":208},[50,2605,2341],{"class":60},[50,2607,755],{"class":208},[50,2609,2610],{"class":52,"line":320},[50,2611,2348],{"class":150},[50,2613,2614,2616,2618],{"class":52,"line":352},[50,2615,680],{"class":150},[50,2617,980],{"class":56},[50,2619,2357],{"class":150},[50,2621,2622,2624,2626],{"class":52,"line":383},[50,2623,498],{"class":150},[50,2625,906],{"class":56},[50,2627,253],{"class":150},[50,2629,2630,2632,2634],{"class":52,"line":390},[50,2631,498],{"class":150},[50,2633,895],{"class":56},[50,2635,253],{"class":150},[50,2637,2638,2640,2642],{"class":52,"line":396},[50,2639,498],{"class":150},[50,2641,874],{"class":56},[50,2643,253],{"class":150},[14,2645,2646,2647,2650],{},"Alternatively, you may use the ",[47,2648,2649],{},"prettify"," transformer to remove the indentation:",[40,2652,2654],{"className":1236,"code":2653,"filename":1124,"language":1143,"meta":45,"style":45},"import { prettify } from '@maizzle/framework'\n\nexport default {\n  afterRender(html) {\n    return prettify(html, {\n      indent_size: 0,\n    })\n  }\n}\n",[47,2655,2656,2672,2676,2684,2697,2711,2723,2729,2734],{"__ignoreMap":45},[50,2657,2658,2660,2662,2665,2667,2669],{"class":52,"line":53},[50,2659,1244],{"class":221},[50,2661,1290],{"class":1156},[50,2663,2664],{"class":1247}," prettify",[50,2666,1968],{"class":1156},[50,2668,1251],{"class":1156},[50,2670,2671],{"class":221}," '@maizzle/framework'\n",[50,2673,2674],{"class":52,"line":101},[50,2675,160],{"emptyLinePlaceholder":159},[50,2677,2678,2680,2682],{"class":52,"line":107},[50,2679,1150],{"class":56},[50,2681,1153],{"class":56},[50,2683,1157],{"class":1156},[50,2685,2686,2689,2691,2693,2695],{"class":52,"line":113},[50,2687,2688],{"class":1271},"  afterRender",[50,2690,1275],{"class":1156},[50,2692,91],{"class":221},[50,2694,1280],{"class":1156},[50,2696,1157],{"class":1156},[50,2698,2699,2701,2703,2705,2707,2709],{"class":52,"line":119},[50,2700,1318],{"class":56},[50,2702,2664],{"class":1271},[50,2704,1275],{"class":60},[50,2706,91],{"class":221},[50,2708,1190],{"class":1156},[50,2710,1157],{"class":1156},[50,2712,2713,2716,2718,2721],{"class":52,"line":320},[50,2714,2715],{"class":60},"      indent_size",[50,2717,1165],{"class":1156},[50,2719,2720],{"class":60}," 0",[50,2722,2038],{"class":1156},[50,2724,2725,2727],{"class":52,"line":352},[50,2726,2059],{"class":1156},[50,2728,1309],{"class":60},[50,2730,2731],{"class":52,"line":383},[50,2732,2733],{"class":1156},"  }\n",[50,2735,2736],{"class":52,"line":390},[50,2737,1200],{"class":1156},[32,2739,2741],{"id":2740},"custom-layouts","Custom layouts",[14,2743,2744],{},"You may need to use different designs for your newsletters. We can use Front Matter to do this, by defining a custom layout name for each Markdown file to use.",[14,2746,2747,2748,2751,2752,30],{},"Go ahead and create ",[47,2749,2750],{},"layouts/secondary.html"," based on ",[47,2753,1218],{},[14,2755,2756,2757,2759,2760,2762,2763,30],{},"For the purpose of this tutorial, we'll just change the body background color to differentiate it from the ",[47,2758,1218],{}," layout: replace both occurrences of ",[47,2761,614],{}," with ",[47,2764,2765],{},"bg-indigo-200",[14,2767,2768,2769,2771,2772,2774],{},"Next, update the ",[47,2770,1231],{}," event in ",[47,2773,1124],{}," to use the layout name from Front Matter:",[40,2776,2778],{"className":1236,"code":2777,"filename":1124,"language":1143,"meta":45,"style":45},"import fm from 'front-matter'\n\nexport default {\n  beforeRender(html) {\n    const { attributes, body } = fm(html)\n    const layout = attributes.layout || 'main'\n\n    return `\n      \u003Cx-${layout}>\n        \u003Cmd>${body}\u003C/md>\n      \u003C/x-${layout}>`\n  }\n}\n",[47,2779,2780,2790,2794,2802,2814,2839,2859,2863,2869,2882,2894,2908,2912],{"__ignoreMap":45},[50,2781,2782,2784,2786,2788],{"class":52,"line":53},[50,2783,1244],{"class":221},[50,2785,1248],{"class":1247},[50,2787,1251],{"class":1156},[50,2789,1254],{"class":221},[50,2791,2792],{"class":52,"line":101},[50,2793,160],{"emptyLinePlaceholder":159},[50,2795,2796,2798,2800],{"class":52,"line":107},[50,2797,1150],{"class":56},[50,2799,1153],{"class":56},[50,2801,1157],{"class":1156},[50,2803,2804,2806,2808,2810,2812],{"class":52,"line":113},[50,2805,1272],{"class":1271},[50,2807,1275],{"class":1156},[50,2809,91],{"class":221},[50,2811,1280],{"class":1156},[50,2813,1157],{"class":1156},[50,2815,2816,2818,2820,2823,2825,2827,2829,2831,2833,2835,2837],{"class":52,"line":119},[50,2817,1287],{"class":221},[50,2819,1290],{"class":1156},[50,2821,2822],{"class":60}," attributes",[50,2824,1190],{"class":1156},[50,2826,1293],{"class":60},[50,2828,1296],{"class":1156},[50,2830,1300],{"class":1299},[50,2832,1248],{"class":1271},[50,2834,1275],{"class":60},[50,2836,91],{"class":221},[50,2838,1309],{"class":60},[50,2840,2841,2843,2846,2848,2850,2852,2854,2856],{"class":52,"line":320},[50,2842,1287],{"class":221},[50,2844,2845],{"class":60}," layout ",[50,2847,212],{"class":1299},[50,2849,2822],{"class":221},[50,2851,30],{"class":1156},[50,2853,168],{"class":221},[50,2855,2141],{"class":56},[50,2857,2858],{"class":60}," 'main'\n",[50,2860,2861],{"class":52,"line":352},[50,2862,160],{"emptyLinePlaceholder":159},[50,2864,2865,2867],{"class":52,"line":383},[50,2866,1318],{"class":56},[50,2868,1321],{"class":60},[50,2870,2871,2874,2876,2878,2880],{"class":52,"line":390},[50,2872,2873],{"class":60},"      \u003Cx-",[50,2875,1334],{"class":1156},[50,2877,168],{"class":221},[50,2879,1296],{"class":1156},[50,2881,253],{"class":60},[50,2883,2884,2886,2888,2890,2892],{"class":52,"line":396},[50,2885,1331],{"class":60},[50,2887,1334],{"class":1156},[50,2889,594],{"class":221},[50,2891,1296],{"class":1156},[50,2893,1341],{"class":60},[50,2895,2896,2899,2901,2903,2905],{"class":52,"line":402},[50,2897,2898],{"class":60},"      \u003C/x-",[50,2900,1334],{"class":1156},[50,2902,168],{"class":221},[50,2904,1296],{"class":1156},[50,2906,2907],{"class":60},">`\n",[50,2909,2910],{"class":52,"line":408},[50,2911,2733],{"class":1156},[50,2913,2914],{"class":52,"line":414},[50,2915,1200],{"class":1156},[14,2917,2918],{},"You can now specify a custom layout for each Markdown file, via Front Matter:",[40,2920,2922],{"className":140,"code":2921,"filename":136,"language":143,"meta":45,"style":45},"---\nlayout: secondary\n---\n\n# Hello world\n\nWelcome to our first newsletter.\n",[47,2923,2924,2928,2937,2941,2945,2951,2955],{"__ignoreMap":45},[50,2925,2926],{"class":52,"line":53},[50,2927,1782],{"class":150},[50,2929,2930,2932,2934],{"class":52,"line":101},[50,2931,168],{"class":56},[50,2933,1165],{"class":150},[50,2935,2936],{"class":60}," secondary\n",[50,2938,2939],{"class":52,"line":107},[50,2940,1782],{"class":150},[50,2942,2943],{"class":52,"line":113},[50,2944,160],{"emptyLinePlaceholder":159},[50,2946,2947,2949],{"class":52,"line":119},[50,2948,151],{"class":150},[50,2950,154],{"class":56},[50,2952,2953],{"class":52,"line":320},[50,2954,160],{"emptyLinePlaceholder":159},[50,2956,2957],{"class":52,"line":352},[50,2958,2959],{"class":60},"Welcome to our first newsletter.\n",[14,2961,2962,2963,2965],{},"You'll notice that the compiled HTML file at ",[47,2964,1615],{}," now has an indigo background color, which means it's using our custom layout.",[32,2967,2969],{"id":2968},"outlook-note","Outlook note",[14,2971,2972],{},"Your markdown may include retina-sized images that will very likely be larger in natural size than the 600px width of the layout.",[14,2974,2975,2976,2979],{},"By default, compiling Markdown to HTML will not add a ",[47,2977,2978],{},"width"," attribute to images.",[14,2981,2982],{},"While this is fine in browsers and modern email clients because you can control it through CSS, it will be an issue in Outlook for Windows: not specifying the width of an image will render it at its natural size, blowing up the layout in case of retina images.",[14,2984,2985,2986,2988],{},"To fix this, we can use ",[47,2987,1097],{}," to manually add our image width in Markdown:",[40,2990,2992],{"className":140,"code":2991,"filename":136,"language":143,"meta":45,"style":45},"# Hello world\n\nWelcome to our first newsletter.\n\n![Image description](/images/retina-image.jpg){width=600}\n",[47,2993,2994,3000,3004,3008,3012],{"__ignoreMap":45},[50,2995,2996,2998],{"class":52,"line":53},[50,2997,151],{"class":150},[50,2999,154],{"class":56},[50,3001,3002],{"class":52,"line":101},[50,3003,160],{"emptyLinePlaceholder":159},[50,3005,3006],{"class":52,"line":107},[50,3007,2959],{"class":60},[50,3009,3010],{"class":52,"line":113},[50,3011,160],{"emptyLinePlaceholder":159},[50,3013,3014,3017,3020,3023,3026,3028],{"class":52,"line":119},[50,3015,3016],{"class":150},"![",[50,3018,3019],{"class":60},"Image description",[50,3021,3022],{"class":150},"](",[50,3024,3025],{"class":60},"/images/retina-image.jpg",[50,3027,1280],{"class":150},[50,3029,3030],{"class":60},"{width=600}\n",[14,3032,3033,3034,3036,3037,3040,3041,3043,3044,3046],{},"Notice how there's no space between the last ",[47,3035,1280],{}," and the opening ",[47,3038,3039],{},"{"," where we specify the attribute. This ensures the attribute is added to the ",[47,3042,1500],{}," tag, and not the ",[47,3045,14],{}," tag wrapping it.",[32,3048,3050],{"id":3049},"resources","Resources",[1079,3052,3053,3060,3068],{},[1082,3054,3055,3059],{},[24,3056,3058],{"href":26,"rel":3057},[28],"GitHub repository"," for this guide",[1082,3061,3062,3063],{},"For the new components syntax, see the Maizzle 4.4.0-beta ",[24,3064,3067],{"href":3065,"rel":3066},"https://github.com/maizzle/framework/releases/tag/v4.4.0-beta.1",[28],"release notes",[1082,3069,3070,3071],{},"Docs for ",[24,3072,3073],{"href":1388},"Markdown in Maizzle",[520,3075,3076],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-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 .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}",{"title":45,"searchDepth":101,"depth":101,"links":3078},[3079,3085,3086,3090,3091,3092,3095,3096,3097],{"id":34,"depth":101,"text":35,"children":3080},[3081,3082,3083,3084],{"id":78,"depth":107,"text":79},{"id":168,"depth":107,"text":169},{"id":1073,"depth":107,"text":1074},{"id":1123,"depth":107,"text":1124},{"id":1203,"depth":101,"text":1204},{"id":1411,"depth":101,"text":1412,"children":3087},[3088,3089],{"id":1670,"depth":107,"text":1671},{"id":1880,"depth":107,"text":1881},{"id":1901,"depth":101,"text":1902},{"id":2215,"depth":101,"text":2216},{"id":2273,"depth":101,"text":2274,"children":3093},[3094],{"id":2465,"depth":107,"text":2466},{"id":2740,"depth":101,"text":2741},{"id":2968,"depth":101,"text":2969},{"id":3049,"depth":101,"text":3050},"2022-12-05T00:00:00.000Z","Learn how to create responsive HTML emails from Markdown files in Maizzle. Write your newsletter in .md files, import components and style it all with Tailwind CSS.",{},"/guides/markdown-emails",{"title":5,"description":3099},{"loc":3101},"guides/markdown-emails","YHwknycDPMFa23ey1KDKOMduF6frluWp1KguG80_-uM",[3107,3111],{"title":3108,"path":3109,"stem":3110,"children":-1},"Automating Mailchimp template zip packaging with Maizzle","/guides/mailchimp-package","guides/mailchimp-package",{"title":3112,"path":3113,"stem":3114,"children":-1},"How to create an AMP for Email template","/guides/amp-email","guides/amp-email",1780318597344]