[{"data":1,"prerenderedAt":14},["ShallowReactive",2],{"clay-page:\u002F3.x\u002Fwriting\u002Fhtml":3},{"html":4,"toc":5,"description":10,"hero":11,"list":12,"socialImage":13},"\u003Ch1 id=\"html\">HTML\u003C\u002Fh1>\n\u003Cp>Markdown covers most needs, but sometimes HTML does the job better. You can write HTML directly in your pages:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">details\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">summary\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Show the full configuration\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">summary\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Everything in here is hidden until the reader opens it.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">details\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdetails>\n  \u003Csummary>Show the full configuration\u003C\u002Fsummary>\u003Cp>  Everything in here is hidden until the reader opens it.\u003C\u002Fp>\n\u003C\u002Fdetails>\u003Cp>Other useful elements:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>HTML\u003C\u002Fth>\n\u003Cth>Result\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode><kbd>Ctrl<\u002Fkbd> + <kbd>K<\u002Fkbd>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ckbd>Ctrl\u003C\u002Fkbd> + \u003Ckbd>K\u003C\u002Fkbd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>H<sub>2<\u002Fsub>O\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>H\u003Csub>2\u003C\u002Fsub>O\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>E = mc<sup>2<\u002Fsup>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>E = mc\u003Csup>2\u003C\u002Fsup>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><mark>marked<\u002Fmark>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cmark>marked\u003C\u002Fmark>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"what-clay-removes\">\u003Ca class=\"heading-anchor\" href=\"#what-clay-removes\" aria-label=\"Link to this section\" data-route=\"#what-clay-removes\">#\u003C\u002Fa>What Clay removes\u003C\u002Fh2>\n\u003Cp>Docs are often written by many people, including outside contributors. To keep a page from harming its readers, Clay cleans the HTML of every page with \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcure53\u002FDOMPurify\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>DOMPurify\u003C\u002Fa> when it builds the site. It removes:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode><script>\u003C\u002Fcode> elements and event handlers like \u003Ccode>onclick\u003C\u002Fcode> or \u003Ccode>onerror\u003C\u002Fcode>,\u003C\u002Fli>\n\u003Cli>\u003Ccode>javascript:\u003C\u002Fcode> links,\u003C\u002Fli>\n\u003Cli>forms and their fields (\u003Ccode><form>\u003C\u002Fcode>, \u003Ccode><input>\u003C\u002Fcode>, \u003Ccode><textarea>\u003C\u002Fcode>, \u003Ccode><select>\u003C\u002Fcode>), which could be used for phishing,\u003C\u002Fli>\n\u003Cli>\u003Ccode><style>\u003C\u002Fcode> elements and \u003Ccode>style\u003C\u002Fcode> attributes, which could lay content over the page.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Everything else, including tables, images, \u003Ccode><details>\u003C\u002Fcode> and inline formatting, stays as you wrote it.\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> onclick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">steal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">()\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">   <!-- becomes <p>Text<\u002Fp> -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">alert\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#076240;--shiki-dark:#B5CEA8\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">       <!-- removed -->\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"markdown-alert markdown-alert-note\">\n\u003Cp class=\"markdown-alert-title text-base-content\">\u003Ci class=\"fa-solid fa-sticky-note mr-2\">\u003C\u002Fi>Note\u003C\u002Fp>\n\u003Cp>Highlighted code keeps its colors: they are added by Clay itself, after your HTML has been cleaned.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6],{"id":7,"text":8,"level":9},"what-clay-removes","What Clay removes",2,"Using HTML inside Markdown, and what Clay removes to keep your site safe.",null,false,"\u002F_clay\u002Fsocial\u002F3.x\u002Fwriting\u002Fhtml.png",1792666368890]