[{"data":1,"prerenderedAt":38},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fwriting\u002Fmarkdown":3},{"html":4,"toc":5,"description":34,"hero":35,"list":36,"socialImage":37},"\u003Ch1 id=\"markdown\">Markdown\u003C\u002Fh1>\n\u003Cp>Clay reads \u003Cstrong>Clay Flavored Markdown\u003C\u002Fstrong> (CFM): \u003Ca href=\"https:\u002F\u002Fgithub.github.com\u002Fgfm\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>GitHub Flavored Markdown\u003C\u002Fa>, the Markdown you know from READMEs and issues on GitHub, plus \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Falerts\" data-route=\"\u002F4.x\u002Fwriting\u002Falerts\">alerts\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\">components\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fmath\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fmath\">math\u003C\u002Fa> and \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams\">diagrams\u003C\u002Fa>. Everything GitHub shows works in Clay too, and what Clay adds stays readable on GitHub. Each element below shows its result and its source; pick \u003Cstrong>Markdown\u003C\u002Fstrong> once to see the source everywhere.\u003C\u002Fp>\n\u003Ch2 id=\"headings\">\u003Ca class=\"heading-anchor\" href=\"#headings\" aria-label=\"Link to this section\" data-route=\"#headings\">#\u003C\u002Fa>Headings\u003C\u002Fh2>\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-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\">## A section\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\">### A subsection\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\u003Cp>\u003Ccode>#\u003C\u002Fcode> is the page heading; use it once per page. \u003Ccode>##\u003C\u002Fcode> and \u003Ccode>###\u003C\u002Fcode> headings appear in the contents of the page and become search results of their own. Every heading gets an anchor, built like GitHub builds them, so you can link to a section: the heading “Line breaks” below is reachable as \u003Ca href=\"#line-breaks\" data-route=\"#line-breaks\">\u003Ccode>#line-breaks\u003C\u002Fcode>\u003C\u002Fa>. Hover a section heading, and a \u003Ccode>#\u003C\u002Fcode> link to it appears on its left, ready to copy.\u003C\u002Fp>\n\u003Ch2 id=\"emphasis\">\u003Ca class=\"heading-anchor\" href=\"#emphasis\" aria-label=\"Link to this section\" data-route=\"#emphasis\">#\u003C\u002Fa>Emphasis\u003C\u002Fh2>\n\u003Cdiv class=\"clay-tabs\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-1-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-1-0-panel\" aria-selected=\"true\" tabindex=\"0\">Result\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-1-1\" class=\"tab\" aria-controls=\"clay-tabs-1-1-panel\" aria-selected=\"false\" tabindex=\"-1\">Markdown\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-1-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-1-0\" data-label=\"Result\">\u003Cp>\u003Cstrong>bold\u003C\u002Fstrong>, \u003Cem>italic\u003C\u002Fem>, \u003Cdel>strikethrough\u003C\u002Fdel> and \u003Ccode>inline code\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-1-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-1-1\" data-label=\"Markdown\" hidden=\"\">\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:#000080;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\">**bold**\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-font-style:italic;--shiki-dark:#D4D4D4;--shiki-dark-font-style:italic\">*italic*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:line-through;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:line-through\">~~strikethrough~~\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> and \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#CE9178\">`inline code`\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\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Ch2 id=\"line-breaks\">\u003Ca class=\"heading-anchor\" href=\"#line-breaks\" aria-label=\"Link to this section\" data-route=\"#line-breaks\">#\u003C\u002Fa>Line breaks\u003C\u002Fh2>\n\u003Cp>A line break in your text is a line break on the page, like in GitHub comments. Separate paragraphs with an empty line.\u003C\u002Fp>\n\u003Cdiv class=\"clay-tabs\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-2-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-2-0-panel\" aria-selected=\"true\" tabindex=\"0\">Result\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-2-1\" class=\"tab\" aria-controls=\"clay-tabs-2-1-panel\" aria-selected=\"false\" tabindex=\"-1\">Markdown\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-2-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-2-0\" data-label=\"Result\">\u003Cp>First line\u003Cbr>second line, in the same paragraph\u003C\u002Fp>\n\u003Cp>A new paragraph\u003C\u002Fp>\n\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-2-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-2-1\" data-label=\"Markdown\" hidden=\"\">\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:#000000;--shiki-dark:#D4D4D4\">First line\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">second line, in the same paragraph\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">A new paragraph\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\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tip\u003C\u002Fp>\n\u003Cp>Keep each paragraph on one line in your editor and let it wrap the text. Hard-wrapped paragraphs show their line breaks on the page.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"lists\">\u003Ca class=\"heading-anchor\" href=\"#lists\" aria-label=\"Link to this section\" data-route=\"#lists\">#\u003C\u002Fa>Lists\u003C\u002Fh2>\n\u003Cdiv class=\"clay-tabs\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-3-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-3-0-panel\" aria-selected=\"true\" tabindex=\"0\">Result\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-3-1\" class=\"tab\" aria-controls=\"clay-tabs-3-1-panel\" aria-selected=\"false\" tabindex=\"-1\">Markdown\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-3-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-3-0\" data-label=\"Result\">\u003Cul>\n\u003Cli>Coffee\u003C\u002Fli>\n\u003Cli>Tea\u003Cul>\n\u003Cli>Green tea\u003C\u002Fli>\n\u003Cli>Black tea\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Col>\n\u003Cli>Install\u003C\u002Fli>\n\u003Cli>Configure\u003C\u002Fli>\n\u003Cli>Build\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-3-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-3-1\" data-label=\"Markdown\" hidden=\"\">\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:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> Coffee\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> Tea\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">  -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> Green tea\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">  -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> Black tea\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">1.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> Install\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">2.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> Configure\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">3.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> Build\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\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>For instructions in order, \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\u002Fsteps\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\u002Fsteps\">steps\u003C\u002Fa> show a numbered list as a guide.\u003C\u002Fp>\n\u003Ch2 id=\"task-lists\">\u003Ca class=\"heading-anchor\" href=\"#task-lists\" aria-label=\"Link to this section\" data-route=\"#task-lists\">#\u003C\u002Fa>Task lists\u003C\u002Fh2>\n\u003Cdiv class=\"clay-tabs\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-4-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-4-0-panel\" aria-selected=\"true\" tabindex=\"0\">Result\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-4-1\" class=\"tab\" aria-controls=\"clay-tabs-4-1-panel\" aria-selected=\"false\" tabindex=\"-1\">Markdown\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-4-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-4-0\" data-label=\"Result\">\u003Cul>\n\u003Cli>\u003Clabel>\u003Cinput checked=\"\" type=\"checkbox\" disabled=\"\" class=\"clay-task\"> Write the docs\u003C\u002Flabel>\u003C\u002Fli>\n\u003Cli>\u003Clabel>\u003Cinput checked=\"\" type=\"checkbox\" disabled=\"\" class=\"clay-task\"> Build the site\u003C\u002Flabel>\u003C\u002Fli>\n\u003Cli>\u003Clabel>\u003Cinput type=\"checkbox\" disabled=\"\" class=\"clay-task\"> Publish it\u003C\u002Flabel>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-4-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-4-1\" data-label=\"Markdown\" hidden=\"\">\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:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">] Write the docs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">] Build the site\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> [ ] Publish it\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\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Ch2 id=\"tables\">\u003Ca class=\"heading-anchor\" href=\"#tables\" aria-label=\"Link to this section\" data-route=\"#tables\">#\u003C\u002Fa>Tables\u003C\u002Fh2>\n\u003Cp>Columns can be aligned left, centered or right with colons in the separator line:\u003C\u002Fp>\n\u003Cdiv class=\"clay-tabs\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-5-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-5-0-panel\" aria-selected=\"true\" tabindex=\"0\">Result\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-5-1\" class=\"tab\" aria-controls=\"clay-tabs-5-1-panel\" aria-selected=\"false\" tabindex=\"-1\">Markdown\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-5-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-5-0\" data-label=\"Result\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"left\">Command\u003C\u002Fth>\n\u003Cth align=\"center\">Port\u003C\u002Fth>\n\u003Cth align=\"right\">Purpose\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd align=\"left\">dev\u003C\u002Ftd>\n\u003Ctd align=\"center\">3000\u003C\u002Ftd>\n\u003Ctd align=\"right\">write\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">preview\u003C\u002Ftd>\n\u003Ctd align=\"center\">4173\u003C\u002Ftd>\n\u003Ctd align=\"right\">check\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-5-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-5-1\" data-label=\"Markdown\" hidden=\"\">\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:#000000;--shiki-dark:#D4D4D4\">| Command | Port | Purpose |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">|:--------|:----:|--------:|\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">| dev     | 3000 | write   |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">| preview | 4173 | check   |\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\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Ch2 id=\"quotes\">\u003Ca class=\"heading-anchor\" href=\"#quotes\" aria-label=\"Link to this section\" data-route=\"#quotes\">#\u003C\u002Fa>Quotes\u003C\u002Fh2>\n\u003Cdiv class=\"clay-tabs\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-6-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-6-0-panel\" aria-selected=\"true\" tabindex=\"0\">Result\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-6-1\" class=\"tab\" aria-controls=\"clay-tabs-6-1-panel\" aria-selected=\"false\" tabindex=\"-1\">Markdown\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-6-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-6-0\" data-label=\"Result\">\u003Cblockquote>\n\u003Cp>Documentation is a love letter that you write to your future self.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-6-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-6-1\" data-label=\"Markdown\" hidden=\"\">\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:#0451A5;--shiki-dark:#6A9955\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> Documentation is a love letter that you write to your future self.\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\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>A quote that starts with \u003Ccode>[!NOTE]\u003C\u002Fcode>, \u003Ccode>[!TIP]\u003C\u002Fcode> and similar becomes an \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Falerts\" data-route=\"\u002F4.x\u002Fwriting\u002Falerts\">alert\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2 id=\"horizontal-rules\">\u003Ca class=\"heading-anchor\" href=\"#horizontal-rules\" aria-label=\"Link to this section\" data-route=\"#horizontal-rules\">#\u003C\u002Fa>Horizontal rules\u003C\u002Fh2>\n\u003Cp>Three hyphens on their own line draw a line across the page:\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:#000000;--shiki-dark:#D4D4D4\">---\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\u003Chr>\n\u003Ch2 id=\"more-than-markdown\">\u003Ca class=\"heading-anchor\" href=\"#more-than-markdown\" aria-label=\"Link to this section\" data-route=\"#more-than-markdown\">#\u003C\u002Fa>More than Markdown\u003C\u002Fh2>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Flinks-and-images\" data-route=\"\u002F4.x\u002Fwriting\u002Flinks-and-images\">\u003Ci class=\"clay-card-icon fa-solid fa-link\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Links & Images\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Linking between pages like on GitHub, linking to sections, adding images and offering downloads.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcode-blocks\" data-route=\"\u002F4.x\u002Fwriting\u002Fcode-blocks\">\u003Ci class=\"clay-card-icon fa-solid fa-code\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Code Blocks\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Syntax highlighting for over 200 languages, file names, highlighted lines, diffs, focus and a copy button.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Falerts\" data-route=\"\u002F4.x\u002Fwriting\u002Falerts\">\u003Ci class=\"clay-card-icon fa-solid fa-circle-exclamation\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Alerts\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Six kinds of callouts for notes, tips and warnings, written with GitHub's alert syntax.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fcomponents\" data-route=\"\u002F4.x\u002Fwriting\u002Fcomponents\">\u003Ci class=\"clay-card-icon fa-solid fa-puzzle-piece\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Components\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Tabs, steps, cards, folded sections, prompts, badges, math, diagrams and file trees, written in plain Markdown.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fhtml\" data-route=\"\u002F4.x\u002Fwriting\u002Fhtml\">\u003Ci class=\"clay-card-icon fa-brands fa-html5\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">HTML\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Using HTML inside Markdown, videos and embeds, and what Clay removes to keep your site safe.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n",[6,10,13,16,19,22,25,28,31],{"id":7,"text":8,"level":9},"headings","Headings",2,{"id":11,"text":12,"level":9},"emphasis","Emphasis",{"id":14,"text":15,"level":9},"line-breaks","Line breaks",{"id":17,"text":18,"level":9},"lists","Lists",{"id":20,"text":21,"level":9},"task-lists","Task lists",{"id":23,"text":24,"level":9},"tables","Tables",{"id":26,"text":27,"level":9},"quotes","Quotes",{"id":29,"text":30,"level":9},"horizontal-rules","Horizontal rules",{"id":32,"text":33,"level":9},"more-than-markdown","More than Markdown","Clay Flavored Markdown - GitHub's Markdown plus alerts, components, math and diagrams - from headings and lists to tables and task lists, with examples.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fwriting\u002Fmarkdown.png",1792666369288]