[{"data":1,"prerenderedAt":1247},["ShallowReactive",2],{"/guides/syntax-highlighting-prismjs":3,"surround":1238},{"id":4,"title":5,"body":6,"date":1230,"description":1231,"extension":915,"meta":1232,"navigation":522,"path":1233,"seo":1234,"sitemap":1235,"stem":1236,"__hash__":1237},"guides/guides/syntax-highlighting-prismjs.md","How to add PrismJS syntax highlighting to HTML emails",{"type":7,"value":8,"toc":1210},"minimark",[9,13,19,27,30,35,38,61,68,71,74,77,87,98,102,113,118,127,143,150,257,261,264,371,381,394,398,409,412,441,448,451,455,464,472,488,610,617,697,701,704,708,711,725,729,732,737,889,893,896,964,968,971,975,986,991,1021,1025,1031,1037,1152,1156,1162,1172,1176,1206],[10,11,5],"h1",{"id":12},"how-to-add-prismjs-syntax-highlighting-to-html-emails",[14,15,18],"p",{"className":16},[17],"text-sm","Last updated: May 30, 2022",[14,20,21,22,26],{},"If you want to show a block of code in an HTML email ",[23,24,25],"em",{},"and"," have it look nice, it usually involves a lot of manual work: escaping, formatting, tokenizing, styling tokens...",[14,28,29],{},"With Maizzle however, we can use JavaScript libraries to do that work for us 💅",[31,32,34],"h2",{"id":33},"getting-started","Getting started",[14,36,37],{},"Let's create a new Maizzle project.",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-sh shiki shiki-themes tailwind-css tailwind-css","npx create-maizzle\n","sh","",[46,47,48],"code",{"__ignoreMap":44},[49,50,53,57],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sizJ4","npx",[49,58,60],{"class":59},"sfCc6"," create-maizzle\n",[14,62,63,64,67],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[46,65,66],{},"./example-syntax-highlight",", and select the Default Starter.",[14,69,70],{},"Choose Yes when prompted to Install dependencies.",[14,72,73],{},"Once it finishes installing dependencies open the project folder in your favorite code editor.",[14,75,76],{},"We'll be covering two different techniques:",[78,79,80,84],"ul",{},[81,82,83],"li",{},"with PostHTML",[81,85,86],{},"with Markdown",[14,88,89,90,97],{},"For both techniques we'll be using the ",[91,92,96],"a",{"href":93,"rel":94},"https://prismjs.com/",[95],"nofollow","PrismJS"," library to highlight code blocks.",[31,99,101],{"id":100},"posthtml","PostHTML",[14,103,104,105,108,109,112],{},"Using a PostHTML plugin, we can write our own ",[46,106,107],{},"\u003Cpre>\u003Ccode>"," markup and have the plugin highlight the contents of the ",[46,110,111],{},"\u003Ccode>"," element.",[114,115,117],"h3",{"id":116},"install-plugin","Install plugin",[14,119,120,121,126],{},"First, let's install the ",[91,122,125],{"href":123,"rel":124},"https://github.com/posthtml/posthtml-prism",[95],"posthtml-prism"," plugin, which we'll use to highlight code blocks:",[39,128,130],{"className":41,"code":129,"language":43,"meta":44,"style":44},"npm i posthtml-prism\n",[46,131,132],{"__ignoreMap":44},[49,133,134,137,140],{"class":51,"line":52},[49,135,136],{"class":55},"npm",[49,138,139],{"class":59}," i",[49,141,142],{"class":59}," posthtml-prism\n",[14,144,145,146,149],{},"Next, add it to the plugins list in your ",[46,147,148],{},"config.js",":",[39,151,161],{"className":152,"code":153,"filename":148,"highlights":154,"language":160,"meta":44,"style":44},"language-js shiki shiki-themes tailwind-css tailwind-css has-diff","module.exports = {\n  build: {\n    posthtml: { // [!code ++]\n      plugins: [ // [!code ++]\n        require('posthtml-prism')() // [!code ++]\n      ] // [!code ++]\n    } // [!code ++]\n  }\n}\n",[155,156,157,158,159],3,4,5,6,7,"js",[46,162,163,182,192,206,217,233,239,245,251],{"__ignoreMap":44},[49,164,165,168,172,175,179],{"class":51,"line":52},[49,166,167],{"class":55},"module",[49,169,171],{"class":170},"sprQ5",".",[49,173,174],{"class":55},"exports",[49,176,178],{"class":177},"sVevU"," =",[49,180,181],{"class":170}," {\n",[49,183,185,188,190],{"class":51,"line":184},2,[49,186,187],{"class":59},"  build",[49,189,149],{"class":170},[49,191,181],{"class":170},[49,193,198,201,203],{"class":194,"line":155},[51,195,196,197],"highlight","diff","add",[49,199,200],{"class":59},"    posthtml",[49,202,149],{"class":170},[49,204,205],{"class":170}," {",[49,207,209,212,214],{"class":208,"line":156},[51,195,196,197],[49,210,211],{"class":59},"      plugins",[49,213,149],{"class":170},[49,215,216],{"class":59}," [ ",[49,218,220,224,227,230],{"class":219,"line":157},[51,195,196,197],[49,221,223],{"class":222},"s2ImL","        require",[49,225,226],{"class":59},"(",[49,228,229],{"class":59},"'posthtml-prism'",[49,231,232],{"class":59},")() ",[49,234,236],{"class":235,"line":158},[51,195,196,197],[49,237,238],{"class":59},"      ] ",[49,240,242],{"class":241,"line":159},[51,195,196,197],[49,243,244],{"class":170},"    }",[49,246,248],{"class":51,"line":247},8,[49,249,250],{"class":170},"  }\n",[49,252,254],{"class":51,"line":253},9,[49,255,256],{"class":170},"}\n",[114,258,260],{"id":259},"add-code-block","Add code block",[14,262,263],{},"Add a block of code in your template, like so:",[39,265,270],{"className":266,"code":267,"filename":268,"language":269,"meta":44,"style":44},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cx-main>\n  \u003Cpre>\n    \u003Ccode class=\"language-javascript\">\n    function foo(bar) {\n      var a = 42,\n          b = 'Prism';\n      return a + bar(b);\n    }\n    \u003C/code>\n  \u003C/pre>\n\u003C/x-main>\n","emails/example.html","html",[46,271,272,284,293,317,322,327,332,337,342,351,361],{"__ignoreMap":44},[49,273,274,278,281],{"class":51,"line":52},[49,275,277],{"class":276},"soJEP","\u003C",[49,279,280],{"class":55},"x-main",[49,282,283],{"class":276},">\n",[49,285,286,289,291],{"class":51,"line":184},[49,287,288],{"class":276},"  \u003C",[49,290,39],{"class":55},[49,292,283],{"class":276},[49,294,295,298,300,304,307,310,313,315],{"class":51,"line":155},[49,296,297],{"class":276},"    \u003C",[49,299,46],{"class":55},[49,301,303],{"class":302},"sQMLp"," class",[49,305,306],{"class":276},"=",[49,308,309],{"class":302},"\"",[49,311,312],{"class":59},"language-javascript",[49,314,309],{"class":302},[49,316,283],{"class":276},[49,318,319],{"class":51,"line":156},[49,320,321],{"class":59},"    function foo(bar) {\n",[49,323,324],{"class":51,"line":157},[49,325,326],{"class":59},"      var a = 42,\n",[49,328,329],{"class":51,"line":158},[49,330,331],{"class":59},"          b = 'Prism';\n",[49,333,334],{"class":51,"line":159},[49,335,336],{"class":59},"      return a + bar(b);\n",[49,338,339],{"class":51,"line":247},[49,340,341],{"class":59},"    }\n",[49,343,344,347,349],{"class":51,"line":253},[49,345,346],{"class":276},"    \u003C/",[49,348,46],{"class":55},[49,350,283],{"class":276},[49,352,354,357,359],{"class":51,"line":353},10,[49,355,356],{"class":276},"  \u003C/",[49,358,39],{"class":55},[49,360,283],{"class":276},[49,362,364,367,369],{"class":51,"line":363},11,[49,365,366],{"class":276},"\u003C/",[49,368,280],{"class":55},[49,370,283],{"class":276},[372,373,374,375,377,378,380],"alert",{},"\nNotice how we added the \n",[46,376,312],{},"\n class on the \n",[46,379,111],{},"\n tag - this is required in order to get language-specific syntax highlighting.\n",[372,382,384,385,388,389,393],{"type":383},"warning","\nYou need to reset the indentation of code inside the \n",[46,386,387],{},"\u003Cpre>","\n tag yourself - see the \n",[91,390,392],{"href":391},"https://github.com/maizzle/example-syntax-highlight/blob/master/emails/posthtml.html","\nPostHTML example\n","\n in the tutorial repository.\n",[31,395,397],{"id":396},"build","Build",[14,399,400,401,404,405,408],{},"Run ",[46,402,403],{},"npm run dev"," to start the development server, open ",[46,406,407],{},"http://localhost:3000/"," in a browser, and navigate to the template.",[14,410,411],{},"You'll see something like this:",[39,413,415],{"className":266,"code":414,"language":269,"meta":44,"style":44},"function foo(bar) {\n  var a = 42,\n      b = 'Prism';\n  return a + bar(b);\n}\n",[46,416,417,422,427,432,437],{"__ignoreMap":44},[49,418,419],{"class":51,"line":52},[49,420,421],{"class":59},"function foo(bar) {\n",[49,423,424],{"class":51,"line":184},[49,425,426],{"class":59},"  var a = 42,\n",[49,428,429],{"class":51,"line":155},[49,430,431],{"class":59},"      b = 'Prism';\n",[49,433,434],{"class":51,"line":156},[49,435,436],{"class":59},"  return a + bar(b);\n",[49,438,439],{"class":51,"line":157},[49,440,256],{"class":59},[14,442,443,444,447],{},"If you view the source of your page, you'll notice a lot of ",[46,445,446],{},"\u003Cspan>"," tags. This means it worked, and PrismJS has tokenized our code block.",[14,449,450],{},"But it's not very pretty, is it? We need a theme!",[31,452,454],{"id":453},"theming","Theming",[14,456,457,458,463],{},"Choose one of the default themes, or see ",[91,459,462],{"href":460,"rel":461},"https://github.com/PrismJS/prism-themes",[95],"prism-themes"," for more.",[14,465,466,467,171],{},"For this tutorial, we'll go with a Tailwind adaptation the ",[91,468,471],{"href":469,"rel":470},"https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode",[95],"Synthwave '84 Theme",[14,473,474,475,480,481,484,485,149],{},"Save ",[91,476,479],{"href":477,"rel":478},"https://raw.githubusercontent.com/maizzle/starter-prismjs/master/src/css/prism-synthwave84.css",[95],"prism-synthwave84.css"," to the ",[46,482,483],{},"css"," directory in your project, and import it into your ",[46,486,487],{},"css/tailwind.css",[39,489,492],{"className":490,"code":491,"language":483,"meta":44,"style":44},"language-css shiki shiki-themes tailwind-css tailwind-css","/* Tailwind CSS components */\n@import \"tailwindcss/components\";\n\n/**\n * @import here any custom CSS components - that is, CSS that\n * you'd want loaded before the Tailwind utilities, so the\n * utilities can still override them.\n*/\n@import \"custom/prism-synthwave84\";\n\n/* Tailwind CSS utility classes */\n@import \"tailwindcss/utilities\";\n\n/* Your custom utility classes */\n@import \"utilities\";\n",[46,493,494,500,518,524,529,534,539,544,549,562,566,571,585,590,596],{"__ignoreMap":44},[49,495,496],{"class":51,"line":52},[49,497,499],{"class":498},"smVoC","/* Tailwind CSS components */\n",[49,501,502,506,509,513,515],{"class":51,"line":184},[49,503,505],{"class":504},"sO3Gh","@import",[49,507,508],{"class":59}," \"",[49,510,512],{"class":511},"sO1gY","tailwindcss/components",[49,514,309],{"class":59},[49,516,517],{"class":504},";\n",[49,519,520],{"class":51,"line":155},[49,521,523],{"emptyLinePlaceholder":522},true,"\n",[49,525,526],{"class":51,"line":156},[49,527,528],{"class":498},"/**\n",[49,530,531],{"class":51,"line":157},[49,532,533],{"class":498}," * @import here any custom CSS components - that is, CSS that\n",[49,535,536],{"class":51,"line":158},[49,537,538],{"class":498}," * you'd want loaded before the Tailwind utilities, so the\n",[49,540,541],{"class":51,"line":159},[49,542,543],{"class":498}," * utilities can still override them.\n",[49,545,546],{"class":51,"line":247},[49,547,548],{"class":498},"*/\n",[49,550,551,553,555,558,560],{"class":51,"line":253},[49,552,505],{"class":504},[49,554,508],{"class":59},[49,556,557],{"class":511},"custom/prism-synthwave84",[49,559,309],{"class":59},[49,561,517],{"class":504},[49,563,564],{"class":51,"line":353},[49,565,523],{"emptyLinePlaceholder":522},[49,567,568],{"class":51,"line":363},[49,569,570],{"class":498},"/* Tailwind CSS utility classes */\n",[49,572,574,576,578,581,583],{"class":51,"line":573},12,[49,575,505],{"class":504},[49,577,508],{"class":59},[49,579,580],{"class":511},"tailwindcss/utilities",[49,582,309],{"class":59},[49,584,517],{"class":504},[49,586,588],{"class":51,"line":587},13,[49,589,523],{"emptyLinePlaceholder":522},[49,591,593],{"class":51,"line":592},14,[49,594,595],{"class":498},"/* Your custom utility classes */\n",[49,597,599,601,603,606,608],{"class":51,"line":598},15,[49,600,505],{"class":504},[49,602,508],{"class":59},[49,604,605],{"class":511},"utilities",[49,607,309],{"class":59},[49,609,517],{"class":504},[14,611,612,613,616],{},"Now, running ",[46,614,615],{},"npm run build"," will yield the result we expected:",[618,619,623,627,628,632,635,639,627,642,645,646,627,649,627,652,627,655,659,662,663,627,666,627,668,672,645,675,627,678,627,680,627,683,685,687,689,691,693],"div",{"className":620,"style":622},[621],"rounded-md","padding: 24px; margin-bottom: 24px; overflow: auto; font-family: Menlo, Consolas, monospace; font-size: 16px; text-align: left; white-space: pre; background-image: linear-gradient(to bottom, #2a2139 75%, #34294f); color: #f92aad; hyphens: none; tab-size: 2; text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; word-break: normal; word-spacing: normal; word-wrap: normal; background-color: #2a2139;",[49,624,626],{"style":625},"color: #f4eee4; text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;","function"," ",[49,629,631],{"style":630},"color: #fdfdfd; text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;","foo",[49,633,226],{"style":634},"color: #cccccc;",[49,636,638],{"style":637},"color: #f92aad;","bar",[49,640,641],{"style":634},")",[49,643,644],{"style":634},"{","\n  ",[49,647,648],{"style":625},"var",[49,650,91],{"style":651},"color:#f92aad;",[49,653,306],{"style":654},"color: #67cdcc;",[49,656,658],{"style":657},"color: #e2777a;","42",[49,660,661],{"style":634},",","\n      ",[49,664,665],{"style":637},"b",[49,667,306],{"style":654},[49,669,671],{"style":670},"color: #f87c32;","'Prism'",[49,673,674],{"style":634},";",[49,676,677],{"style":625},"return",[49,679,91],{"style":637},[49,681,682],{"style":654},"+",[49,684,638],{"style":630},[49,686,226],{"style":634},[49,688,665],{"style":637},[49,690,641],{"style":634},[49,692,674],{"style":634},[49,694,696],{"style":695},"color: #cccccc;display:block","}",[31,698,700],{"id":699},"markdown","Markdown",[14,702,703],{},"Alternatively, we can also use Markdown to write fenced code blocks and have PrismJS automatically syntax-highlight them.",[114,705,707],{"id":706},"install-prismjs","Install PrismJS",[14,709,710],{},"First, we must install the PrismJS library:",[39,712,714],{"className":41,"code":713,"language":43,"meta":44,"style":44},"npm i prismjs\n",[46,715,716],{"__ignoreMap":44},[49,717,718,720,722],{"class":51,"line":52},[49,719,136],{"class":55},[49,721,139],{"class":59},[49,723,724],{"class":59}," prismjs\n",[114,726,728],{"id":727},"configure-markdown","Configure Markdown",[14,730,731],{},"Next, we need to configure Maizzle to use PrismJS as a custom highlight function for the Markdown renderer.",[14,733,734,735,149],{},"We do that in ",[46,736,148],{},[39,738,741],{"className":739,"code":740,"filename":148,"language":160,"meta":44,"style":44},"language-js shiki shiki-themes tailwind-css tailwind-css","const Prism = require('prismjs')\n\nmodule.exports = {\n  markdown: {\n    markdownit: {\n      highlight(code, lang) {\n        lang = lang || 'markup'\n        return Prism.highlight(code, Prism.languages[lang], lang)\n      }\n    }\n  }\n}\n",[46,742,743,765,769,781,790,799,817,832,872,877,881,885],{"__ignoreMap":44},[49,744,745,749,752,754,757,759,762],{"class":51,"line":52},[49,746,748],{"class":747},"s8qYB","const",[49,750,751],{"class":59}," Prism ",[49,753,306],{"class":177},[49,755,756],{"class":222}," require",[49,758,226],{"class":59},[49,760,761],{"class":59},"'prismjs'",[49,763,764],{"class":59},")\n",[49,766,767],{"class":51,"line":184},[49,768,523],{"emptyLinePlaceholder":522},[49,770,771,773,775,777,779],{"class":51,"line":155},[49,772,167],{"class":55},[49,774,171],{"class":170},[49,776,174],{"class":55},[49,778,178],{"class":177},[49,780,181],{"class":170},[49,782,783,786,788],{"class":51,"line":156},[49,784,785],{"class":59},"  markdown",[49,787,149],{"class":170},[49,789,181],{"class":170},[49,791,792,795,797],{"class":51,"line":157},[49,793,794],{"class":59},"    markdownit",[49,796,149],{"class":170},[49,798,181],{"class":170},[49,800,801,804,806,808,810,813,815],{"class":51,"line":158},[49,802,803],{"class":222},"      highlight",[49,805,226],{"class":170},[49,807,46],{"class":747},[49,809,661],{"class":170},[49,811,812],{"class":747}," lang",[49,814,641],{"class":170},[49,816,181],{"class":170},[49,818,819,822,824,826,829],{"class":51,"line":159},[49,820,821],{"class":747},"        lang",[49,823,178],{"class":177},[49,825,812],{"class":747},[49,827,828],{"class":55}," ||",[49,830,831],{"class":59}," 'markup'\n",[49,833,834,837,840,842,844,846,848,850,852,854,857,860,863,866,868,870],{"class":51,"line":247},[49,835,836],{"class":55},"        return",[49,838,839],{"class":747}," Prism",[49,841,171],{"class":170},[49,843,195],{"class":222},[49,845,226],{"class":59},[49,847,46],{"class":747},[49,849,661],{"class":170},[49,851,839],{"class":747},[49,853,171],{"class":170},[49,855,856],{"class":747},"languages",[49,858,859],{"class":59},"[",[49,861,862],{"class":747},"lang",[49,864,865],{"class":59},"]",[49,867,661],{"class":170},[49,869,812],{"class":747},[49,871,764],{"class":59},[49,873,874],{"class":51,"line":253},[49,875,876],{"class":170},"      }\n",[49,878,879],{"class":51,"line":353},[49,880,341],{"class":170},[49,882,883],{"class":51,"line":363},[49,884,250],{"class":170},[49,886,887],{"class":51,"line":573},[49,888,256],{"class":170},[114,890,892],{"id":891},"fenced-code-block","Fenced code block",[14,894,895],{},"We can now write code inside a fenced code block in our Template:",[39,897,899],{"className":266,"code":898,"filename":268,"language":269,"meta":44,"style":44},"\u003Cx-main>\n  \u003Cmd>\n    ```js\n    function foo(bar) {\n      var a = 42,\n          b = 'Prism';\n      return a + bar(b);\n    }\n    ```\n  \u003C/md>\n\u003C/x-main>\n",[46,900,901,909,918,923,927,931,935,939,943,948,956],{"__ignoreMap":44},[49,902,903,905,907],{"class":51,"line":52},[49,904,277],{"class":276},[49,906,280],{"class":55},[49,908,283],{"class":276},[49,910,911,913,916],{"class":51,"line":184},[49,912,288],{"class":276},[49,914,915],{"class":55},"md",[49,917,283],{"class":276},[49,919,920],{"class":51,"line":155},[49,921,922],{"class":59},"    ```js\n",[49,924,925],{"class":51,"line":156},[49,926,321],{"class":59},[49,928,929],{"class":51,"line":157},[49,930,326],{"class":59},[49,932,933],{"class":51,"line":158},[49,934,331],{"class":59},[49,936,937],{"class":51,"line":159},[49,938,336],{"class":59},[49,940,941],{"class":51,"line":247},[49,942,341],{"class":59},[49,944,945],{"class":51,"line":253},[49,946,947],{"class":59},"    ```\n",[49,949,950,952,954],{"class":51,"line":353},[49,951,356],{"class":276},[49,953,915],{"class":55},[49,955,283],{"class":276},[49,957,958,960,962],{"class":51,"line":363},[49,959,366],{"class":276},[49,961,280],{"class":55},[49,963,283],{"class":276},[31,965,967],{"id":966},"compatibility","Compatibility",[14,969,970],{},"Some email clients require  extra steps in order to render our code blocks properly.",[114,972,974],{"id":973},"gmail","Gmail",[14,976,977,978,981,982,985],{},"Gmail will change our inline ",[46,979,980],{},"white-space: pre;"," to ",[46,983,984],{},"white-space: pre-wrap;",". This results in code wrapping, instead of showing a horizontal scrollbar.",[14,987,988,989,149],{},"Fix it by adding the following CSS at the beginning of ",[46,990,479],{},[39,992,995],{"className":490,"code":993,"filename":994,"language":483,"meta":44,"style":44},"pre {\n  @apply whitespace-pre;\n}\n","css/prism-synthwave84.css",[46,996,997,1004,1017],{"__ignoreMap":44},[49,998,999,1001],{"class":51,"line":52},[49,1000,39],{"class":55},[49,1002,181],{"class":1003},"shy1k",[49,1005,1006,1009,1012,1015],{"class":51,"line":184},[49,1007,1008],{"class":504},"  @",[49,1010,1011],{"class":511},"apply",[49,1013,1014],{"class":511}," whitespace-pre",[49,1016,517],{"class":504},[49,1018,1019],{"class":51,"line":155},[49,1020,256],{"class":1003},[114,1022,1024],{"id":1023},"outlook","Outlook",[14,1026,1027,1028,1030],{},"Padding on ",[46,1029,387],{}," doesn't work in Outlook.",[14,1032,1033,1034,1036],{},"We can fix this by wrapping ",[46,1035,387],{}," inside a table that we only show in Outlook. We then style this table inline, like so:",[39,1038,1040],{"className":266,"code":1039,"filename":268,"language":269,"meta":44,"style":44},"\u003Cx-main>\n  \u003C!--[if mso]>\n  \u003Ctable style=\"width:100%;\">\n    \u003Ctr>\n      \u003Ctd style=\"background: #2a2139; padding: 24px;\">\n  \u003C![endif]-->\n  \u003Cpre>\n    \u003Ccode class=\"language-javascript\">\n    function foo(bar) {\n      var a = 42,\n          b = 'Prism';\n      return a + bar(b);\n    }\n    \u003C/code>\n  \u003C/pre>\n  \u003C!--[if mso]>\u003C/td>\u003C/tr>\u003C/table>\u003C![endif]-->\n\u003C/x-main>\n",[46,1041,1042,1050,1055,1060,1065,1070,1075,1083,1101,1105,1109,1113,1117,1121,1129,1137,1143],{"__ignoreMap":44},[49,1043,1044,1046,1048],{"class":51,"line":52},[49,1045,277],{"class":276},[49,1047,280],{"class":55},[49,1049,283],{"class":276},[49,1051,1052],{"class":51,"line":184},[49,1053,1054],{"class":498},"  \u003C!--[if mso]>\n",[49,1056,1057],{"class":51,"line":155},[49,1058,1059],{"class":498},"  \u003Ctable style=\"width:100%;\">\n",[49,1061,1062],{"class":51,"line":156},[49,1063,1064],{"class":498},"    \u003Ctr>\n",[49,1066,1067],{"class":51,"line":157},[49,1068,1069],{"class":498},"      \u003Ctd style=\"background: #2a2139; padding: 24px;\">\n",[49,1071,1072],{"class":51,"line":158},[49,1073,1074],{"class":498},"  \u003C![endif]-->\n",[49,1076,1077,1079,1081],{"class":51,"line":159},[49,1078,288],{"class":276},[49,1080,39],{"class":55},[49,1082,283],{"class":276},[49,1084,1085,1087,1089,1091,1093,1095,1097,1099],{"class":51,"line":247},[49,1086,297],{"class":276},[49,1088,46],{"class":55},[49,1090,303],{"class":302},[49,1092,306],{"class":276},[49,1094,309],{"class":302},[49,1096,312],{"class":59},[49,1098,309],{"class":302},[49,1100,283],{"class":276},[49,1102,1103],{"class":51,"line":253},[49,1104,321],{"class":59},[49,1106,1107],{"class":51,"line":353},[49,1108,326],{"class":59},[49,1110,1111],{"class":51,"line":363},[49,1112,331],{"class":59},[49,1114,1115],{"class":51,"line":573},[49,1116,336],{"class":59},[49,1118,1119],{"class":51,"line":587},[49,1120,341],{"class":59},[49,1122,1123,1125,1127],{"class":51,"line":592},[49,1124,346],{"class":276},[49,1126,46],{"class":55},[49,1128,283],{"class":276},[49,1130,1131,1133,1135],{"class":51,"line":598},[49,1132,356],{"class":276},[49,1134,39],{"class":55},[49,1136,283],{"class":276},[49,1138,1140],{"class":51,"line":1139},16,[49,1141,1142],{"class":498},"  \u003C!--[if mso]>\u003C/td>\u003C/tr>\u003C/table>\u003C![endif]-->\n",[49,1144,1146,1148,1150],{"class":51,"line":1145},17,[49,1147,366],{"class":276},[49,1149,280],{"class":55},[49,1151,283],{"class":276},[31,1153,1155],{"id":1154},"production-build","Production build",[14,1157,1158,1159,1161],{},"We've been developing locally so far, configuring PostHTML or Markdown in ",[46,1160,148],{},". This means CSS isn't inlined, and most email optimizations are off.",[14,1163,1164,1165,1167,1168,1171],{},"When you're satisfied with the dev preview, run ",[46,1166,615],{}," and use the template inside the ",[46,1169,1170],{},"build_production/"," directory for sending the email.",[31,1173,1175],{"id":1174},"resources","Resources",[78,1177,1178,1186,1192,1198],{},[81,1179,1180,1185],{},[91,1181,1184],{"href":1182,"rel":1183},"https://github.com/maizzle/starter-prismjs",[95],"GitHub repository"," for this tutorial",[81,1187,1188,1191],{},[91,1189,125],{"href":123,"rel":1190},[95]," plugin",[81,1193,1194,1197],{},[91,1195,96],{"href":93,"rel":1196},[95]," library",[81,1199,1200,1205],{},[91,1201,1204],{"href":1202,"rel":1203},"https://github.com/PrismJS/prism-themes/blob/master/themes/prism-synthwave84.css",[95],"Synthwave '84"," theme",[1207,1208,1209],"style",{},"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 .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}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 .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}",{"title":44,"searchDepth":184,"depth":184,"links":1211},[1212,1213,1217,1218,1219,1224,1228,1229],{"id":33,"depth":184,"text":34},{"id":100,"depth":184,"text":101,"children":1214},[1215,1216],{"id":116,"depth":155,"text":117},{"id":259,"depth":155,"text":260},{"id":396,"depth":184,"text":397},{"id":453,"depth":184,"text":454},{"id":699,"depth":184,"text":700,"children":1220},[1221,1222,1223],{"id":706,"depth":155,"text":707},{"id":727,"depth":155,"text":728},{"id":891,"depth":155,"text":892},{"id":966,"depth":184,"text":967,"children":1225},[1226,1227],{"id":973,"depth":155,"text":974},{"id":1023,"depth":155,"text":1024},{"id":1154,"depth":184,"text":1155},{"id":1174,"depth":184,"text":1175},"2020-02-05T00:00:00.000Z","Using PrismJS, Markdown fenced code blocks, and Events in Maizzle to add syntax highlighting to HTML emails.",{},"/guides/syntax-highlighting-prismjs",{"title":5,"description":1231},{"loc":1233},"guides/syntax-highlighting-prismjs","kueXGGPmitP3CsVqncxh-3l8qK4IJ76w9iIGE5fExm0",[1239,1243],{"title":1240,"path":1241,"stem":1242,"children":-1},"How to use CSS background gradients in HTML emails","/guides/gradients","guides/gradients",{"title":1244,"path":1245,"stem":1246,"children":-1},"Using custom web fonts in Maizzle email templates","/guides/custom-fonts","guides/custom-fonts",1780318597558]