P. Moss Drouin Portfolio built with Zola. Zola 2026-03-12T00:00:00+00:00 https://folio.drouin.website/atom.xml Style Guide 2026-03-12T00:00:00+00:00 2026-03-12T00:00:00+00:00 P. Moss Drouin https://folio.drouin.website/blog/style-guide/ <blockquote class="tip"> <p class="alert-title"> <i class="icon"></i>Tip</p> <p>Recommended banner dimensions are 2:1 aspect ratio and 1920x960 resolution.<br /> Other sizes will also work, but will be cut off at the bottom/won’t be high enough.</p> </blockquote> <h1 id="heading-1">Heading 1</h1> <p>This is a paragraph with some body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <h2 id="heading-2">Heading 2</h2> <p>This is another paragraph. You can have <strong>bold text</strong>, <em>italic text</em>, <em><strong>bold and italic</strong></em>, and <code>inline code</code> mixed in with regular text.</p> <h3 id="heading-3">Heading 3</h3> <h4 id="heading-4">Heading 4</h4> <h5 id="heading-5">Heading 5</h5> <h6 id="heading-6">Heading 6</h6> <h2 id="emphasis-and-links">Emphasis and Links</h2> <p>Here’s a <a href="https://google.com">link to Google</a> and here’s one to an <a href="https://folio.drouin.website/blog/">internal page</a>.</p> <p>You can also use <strong>strong emphasis</strong> and <em>regular emphasis</em> throughout your text.</p> <h2 id="unordered-lists">Unordered Lists</h2> <ul> <li>Item one</li> <li>Item two</li> <li>Item three <ul> <li>Nested item 3a</li> <li>Nested item 3b <ul> <li>Deeply nested item</li> </ul> </li> </ul> </li> <li>Item four</li> </ul> <h2 id="ordered-lists">Ordered Lists</h2> <ol> <li>First item</li> <li>Second item</li> <li>Third item <ol> <li>Nested item 3a</li> <li>Nested item 3b</li> </ol> </li> <li>Fourth item</li> </ol> <h2 id="checklists">Checklists</h2> <ul> <li><input disabled="" type="checkbox" checked=""/> Completed task</li> <li><input disabled="" type="checkbox" checked=""/> Another completed task</li> <li><input disabled="" type="checkbox"/> Incomplete task</li> <li><input disabled="" type="checkbox"/> Another incomplete task</li> </ul> <h2 id="code-blocks">Code Blocks</h2> <h3 id="rust">Rust</h3> <pre data-lang="rust" class="language-rust z-code"><code class="language-rust" data-lang="rust"><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-function z-rust"><span class="z-storage z-type z-function z-rust">fn</span> </span><span class="z-entity z-name z-function z-rust">main</span></span><span class="z-meta z-function z-rust"><span class="z-meta z-function z-parameters z-rust"><span class="z-punctuation z-section z-parameters z-begin z-rust">(</span></span><span class="z-meta z-function z-rust"><span class="z-meta z-function z-parameters z-rust"><span class="z-punctuation z-section z-parameters z-end z-rust">)</span></span></span></span><span class="z-meta z-function z-rust"> </span><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"><span class="z-punctuation z-section z-block z-begin z-rust">{</span> </span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"> <span class="z-storage z-type z-rust">let</span> greeting <span class="z-keyword z-operator z-assignment z-rust">=</span> <span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span>Hello, world!<span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span><span class="z-punctuation z-terminator z-rust">;</span> </span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"> <span class="z-support z-macro z-rust">println!</span><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">(</span></span><span class="z-meta z-group z-rust"><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span><span class="z-constant z-other z-placeholder z-rust">{}</span><span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span></span><span class="z-meta z-group z-rust"><span class="z-punctuation z-separator z-rust">,</span> greeting<span class="z-punctuation z-section z-group z-end z-rust">)</span></span><span class="z-punctuation z-terminator z-rust">;</span> </span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"> </span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"> <span class="z-keyword z-control z-rust">for</span> i <span class="z-keyword z-operator z-rust">in</span> <span class="z-constant z-numeric z-integer z-decimal z-rust">1</span><span class="z-keyword z-operator z-range z-rust">..</span><span class="z-keyword z-operator z-assignment z-rust">=</span><span class="z-constant z-numeric z-integer z-decimal z-rust">5</span> <span class="z-meta z-block z-rust"><span class="z-punctuation z-section z-block z-begin z-rust">{</span> </span></span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"><span class="z-meta z-block z-rust"> <span class="z-support z-macro z-rust">println!</span><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">(</span></span><span class="z-meta z-group z-rust"><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span>Count: <span class="z-constant z-other z-placeholder z-rust">{}</span><span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span></span><span class="z-meta z-group z-rust"><span class="z-punctuation z-separator z-rust">,</span> i<span class="z-punctuation z-section z-group z-end z-rust">)</span></span><span class="z-punctuation z-terminator z-rust">;</span> </span></span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"><span class="z-meta z-block z-rust"> </span><span class="z-meta z-block z-rust"><span class="z-punctuation z-section z-block z-end z-rust">}</span></span> </span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"></span><span class="z-meta z-block z-rust"><span class="z-punctuation z-section z-block z-end z-rust">}</span></span></span> </span><span class="z-source z-rust"> </span><span class="z-source z-rust">Image by <span class="z-keyword z-operator z-comparison z-rust">&lt;</span>a href<span class="z-keyword z-operator z-assignment z-rust">=</span><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span>https://pixabay.com/users/noname_13-2364555/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1685924<span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span><span class="z-keyword z-operator z-comparison z-rust">&gt;</span><span class="z-meta z-generic z-rust">NoName_13<span class="z-punctuation z-definition z-generic z-begin z-rust">&lt;</span><span class="z-invalid z-illegal z-rust">/</span></span>a<span class="z-keyword z-operator z-comparison z-rust">&gt;</span> from <span class="z-keyword z-operator z-comparison z-rust">&lt;</span>a href<span class="z-keyword z-operator z-assignment z-rust">=</span><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span>https://pixabay.com//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1685924<span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span><span class="z-keyword z-operator z-comparison z-rust">&gt;</span><span class="z-meta z-generic z-rust">Pixabay<span class="z-punctuation z-definition z-generic z-begin z-rust">&lt;</span><span class="z-invalid z-illegal z-rust">/</span></span>a<span class="z-keyword z-operator z-comparison z-rust">&gt;</span> </span><span class="z-source z-rust"> </span><span class="z-source z-rust"><span class="z-keyword z-operator z-arithmetic z-rust">+</span><span class="z-keyword z-operator z-arithmetic z-rust">+</span><span class="z-keyword z-operator z-arithmetic z-rust">+</span> </span><span class="z-source z-rust">title <span class="z-keyword z-operator z-assignment z-rust">=</span> <span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span>Demo Page<span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span> </span><span class="z-source z-rust"><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">[</span>extra<span class="z-punctuation z-section z-group z-end z-rust">]</span></span> </span><span class="z-source z-rust">go_to_top <span class="z-keyword z-operator z-assignment z-rust">=</span> <span class="z-constant z-language z-rust">true</span> </span><span class="z-source z-rust">styles <span class="z-keyword z-operator z-assignment z-rust">=</span> <span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">[</span><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span>demo/demo.css<span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span><span class="z-punctuation z-section z-group z-end z-rust">]</span></span> </span><span class="z-source z-rust">scripts <span class="z-keyword z-operator z-assignment z-rust">=</span> <span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">[</span><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span>demo/demo.js<span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span><span class="z-punctuation z-section z-group z-end z-rust">]</span></span> </span><span class="z-source z-rust">katex <span class="z-keyword z-operator z-assignment z-rust">=</span> <span class="z-constant z-language z-rust">true</span> </span><span class="z-source z-rust">archive <span class="z-keyword z-operator z-assignment z-rust">=</span> <span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span>This page is in fact not archived. It is only here to demonstrate the archival statement.<span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span> </span><span class="z-source z-rust">trigger <span class="z-keyword z-operator z-assignment z-rust">=</span> <span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span>This page contains blackjack and hookers, and bad jokes such as this one.<span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span> </span><span class="z-source z-rust">disclaimer <span class="z-keyword z-operator z-assignment z-rust">=</span> <span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span><span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span> </span></span><span class="z-source z-rust"><span class="z-string z-quoted z-double z-rust">- All tricks in this page are performed by the lab boys, don&#39;t try this at home. </span></span><span class="z-source z-rust"><span class="z-string z-quoted z-double z-rust">- Don&#39;t expose yourself to 4000° kelvin. </span></span><span class="z-source z-rust"><span class="z-string z-quoted z-double z-rust">- Don&#39;t take party escort submission position. </span></span><span class="z-source z-rust"><span class="z-string z-quoted z-double z-rust">- Don&#39;t interact with asbestos and moon rocks. </span></span><span class="z-source z-rust"><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">&quot;</span><span class="z-punctuation z-definition z-string z-end z-rust">&quot;</span></span> </span><span class="z-source z-rust"><span class="z-keyword z-operator z-arithmetic z-rust">+</span><span class="z-keyword z-operator z-arithmetic z-rust">+</span><span class="z-keyword z-operator z-arithmetic z-rust">+</span> </span><span class="z-source z-rust"> </span><span class="z-source z-rust"><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span> Markdown </span><span class="z-source z-rust"> </span><span class="z-source z-rust">Text can be <span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-keyword z-operator z-arithmetic z-rust">*</span>bold<span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-punctuation z-separator z-rust">,</span> <span class="z-keyword z-operator z-arithmetic z-rust">*</span>italic<span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-punctuation z-separator z-rust">,</span> <span class="z-keyword z-operator z-rust">~</span><span class="z-keyword z-operator z-rust">~</span>strikethrough<span class="z-keyword z-operator z-rust">~</span><span class="z-keyword z-operator z-rust">~</span><span class="z-punctuation z-separator z-rust">,</span> and <span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-keyword z-operator z-rust">~</span><span class="z-keyword z-operator z-rust">~</span>all at the same time<span class="z-keyword z-operator z-rust">~</span><span class="z-keyword z-operator z-rust">~</span><span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-keyword z-operator z-arithmetic z-rust">*</span><span class="z-punctuation z-accessor z-dot z-rust">.</span> </span><span class="z-source z-rust"> </span><span class="z-source z-rust"><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">[</span>Link to another page<span class="z-punctuation z-section z-group z-end z-rust">]</span></span><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">(</span><span class="z-keyword z-operator z-rust">@</span><span class="z-keyword z-operator z-arithmetic z-rust">/</span>demo<span class="z-keyword z-operator z-arithmetic z-rust">/</span>page<span class="z-punctuation z-accessor z-dot z-rust">.</span>md</span><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-end z-rust">)</span></span><span class="z-punctuation z-accessor z-dot z-rust">.</span> </span><span class="z-source z-rust"> </span><span class="z-source z-rust">There should be whitespace between paragraphs<span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">[</span><span class="z-keyword z-operator z-bitwise z-rust">^</span><span class="z-constant z-numeric z-integer z-decimal z-rust">1</span><span class="z-punctuation z-section z-group z-end z-rust">]</span></span><span class="z-punctuation z-accessor z-dot z-rust">.</span> </span><span class="z-source z-rust"> </span><span class="z-source z-rust"><span class="z-keyword z-operator z-rust">#</span> Heading <span class="z-constant z-numeric z-integer z-decimal z-rust">1</span> </span><span class="z-source z-rust"><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span> Heading <span class="z-constant z-numeric z-integer z-decimal z-rust">2</span> </span><span class="z-source z-rust"><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span> Heading <span class="z-constant z-numeric z-integer z-decimal z-rust">3</span> </span><span class="z-source z-rust"><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span> Heading <span class="z-constant z-numeric z-integer z-decimal z-rust">4</span> </span><span class="z-source z-rust"><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span> Heading <span class="z-constant z-numeric z-integer z-decimal z-rust">5</span> </span><span class="z-source z-rust"><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span><span class="z-keyword z-operator z-rust">#</span> Heading <span class="z-constant z-numeric z-integer z-decimal z-rust">6</span> </span><span class="z-source z-rust"> </span><span class="z-source z-rust">This is a normal paragraph<span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">[</span><span class="z-keyword z-operator z-bitwise z-rust">^</span><span class="z-constant z-numeric z-integer z-decimal z-rust">2</span><span class="z-punctuation z-section z-group z-end z-rust">]</span></span> following a header<span class="z-punctuation z-accessor z-dot z-rust">.</span> </span><span class="z-source z-rust"> </span></code></pre> <p>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</p> <pre class="z-code"><code><span class="z-text z-plain"> </span><span class="z-text z-plain">&gt; &quot;Original content is original only for a few seconds before getting old&quot; </span><span class="z-text z-plain">&gt; &gt; Rule #21 of the internet </span><span class="z-text z-plain"> </span><span class="z-text z-plain">- Item 1 </span><span class="z-text z-plain">- Item 2 </span><span class="z-text z-plain"> - Item 2.1 </span><span class="z-text z-plain"> - Item 2.2 </span><span class="z-text z-plain">- Item 3 </span><span class="z-text z-plain">- `Item 4` </span><span class="z-text z-plain"> </span><span class="z-text z-plain">1. Perform step #1 </span><span class="z-text z-plain">2. Proceed to step #2 </span><span class="z-text z-plain">3. Conclude with step #3 </span><span class="z-text z-plain"> </span><span class="z-text z-plain">- [ ] Milk </span><span class="z-text z-plain">- [x] Eggs </span><span class="z-text z-plain">- [x] Flour </span><span class="z-text z-plain">- [ ] Coffee </span><span class="z-text z-plain">- [x] Combustible lemons </span><span class="z-text z-plain"> </span><span class="z-text z-plain">[![Male mallard duck](https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Male_mallard_duck_2.jpg/800px-Male_mallard_duck_2.jpg)](https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg) </span><span class="z-text z-plain"> </span><span class="z-text z-plain">| Mare | Rating | Additional info | </span><span class="z-text z-plain">| :----------- | :---------------- | :--------------- | </span><span class="z-text z-plain">| Fluttershy | Best pone | Shy and adorable | </span><span class="z-text z-plain">| Apple Jack | Good pone | Honest and nice | </span><span class="z-text z-plain">| Pinkie Pie | Fun pone | Parties and ADHD | </span><span class="z-text z-plain">| Twilight | Main pone | Neeerd | </span><span class="z-text z-plain">| Rainbow Dash | Yes | Looks badass | </span><span class="z-text z-plain">| Rarity | Fancy pone | Generous | </span><span class="z-text z-plain">| Derpy Hooves | *M u f f i n s* | [REDACTED] | </span><span class="z-text z-plain"> </span><span class="z-text z-plain">```rust </span><span class="z-text z-plain">let highlight = true; </span></code></pre> <pre data-linenos data-lang="scss" class="language-scss z-code"><code class="language-scss" data-lang="scss"><table><tbody><tr><td>10</td><td><span class="z-source z-scss"><span class="z-meta z-selector z-css"><span class="z-entity z-name z-tag z-css">pre</span> </span><span class="z-meta z-selector z-css"><span class="z-entity z-name z-tag z-css">mark</span> </span><span class="z-punctuation z-section z-property-list z-begin z-css">{</span> </span></td></tr><tr><td><mark>12</mark></td><td><mark><span class="z-source z-scss"> <span class="z-meta z-property-name z-css"><span class="z-support z-type z-property-name z-css">display</span></span><span class="z-punctuation z-separator z-key-value z-css">:</span><span class="z-meta z-property-value z-css"> <span class="z-support z-constant z-property-value z-css">block</span></span><span class="z-punctuation z-terminator z-rule z-css">;</span> </span></mark></td></tr><tr><td><mark>13</mark></td><td><mark><span class="z-source z-scss"> <span class="z-meta z-property-name z-css"><span class="z-support z-type z-property-name z-css">color</span></span><span class="z-punctuation z-separator z-key-value z-css">:</span><span class="z-meta z-property-value z-css"> <span class="z-support z-constant z-color z-w3c-special-color-keyword z-css">currentcolor</span></span><span class="z-punctuation z-terminator z-rule z-css">;</span> </span></mark></td></tr><tr><td>14</td><td><span class="z-source z-scss"><span class="z-punctuation z-section z-property-list z-end z-css">}</span> </span></td></tr><tr><td>15</td><td><span class="z-source z-scss"><span class="z-meta z-selector z-css"><span class="z-entity z-name z-tag z-css">pre</span> </span><span class="z-meta z-selector z-css"><span class="z-entity z-name z-tag z-css">table</span> </span><span class="z-meta z-selector z-css"><span class="z-entity z-name z-tag z-css">td</span><span class="z-meta z-selector z-css"><span class="z-meta z-function-call z-css"><span class="z-entity z-other z-pseudo-class z-css"><span class="z-punctuation z-definition z-entity z-css">:</span>nth-of-type</span><span class="z-meta z-group z-css"><span class="z-punctuation z-definition z-group z-begin z-css">(</span><span class="z-constant z-numeric z-css">1</span><span class="z-punctuation z-definition z-group z-end z-css">)</span></span></span></span> </span><span class="z-punctuation z-section z-property-list z-begin z-css">{</span> </span></td></tr><tr><td><mark>17</mark></td><td><mark><span class="z-source z-scss"> <span class="z-meta z-property-name z-css"><span class="z-support z-type z-property-name z-css">color</span></span><span class="z-punctuation z-separator z-key-value z-css">:</span><span class="z-meta z-property-value z-css"> <span class="z-constant z-other z-color z-rgb-value z-css"><span class="z-punctuation z-definition z-constant z-css">#</span>6b6b6b</span></span><span class="z-punctuation z-terminator z-rule z-css">;</span> </span></mark></td></tr><tr><td><mark>18</mark></td><td><mark><span class="z-source z-scss"> <span class="z-meta z-property-name z-css"><span class="z-support z-type z-property-name z-css">font-style</span></span><span class="z-punctuation z-separator z-key-value z-css">:</span><span class="z-meta z-property-value z-css"> <span class="z-support z-constant z-property-value z-css">italic</span></span><span class="z-punctuation z-terminator z-rule z-css">;</span> </span></mark></td></tr><tr><td>19</td><td><span class="z-source z-scss"><span class="z-punctuation z-section z-property-list z-end z-css">}</span> </span></td></tr></tbody></table></code></pre> <hr /> <h2 id="extra">Extra</h2> <h3 id="katex">KaTeX</h3> <p>Duckquill can render LaTeX using the <a href="https://katex.org">KaTeX</a> library. It can be enabled using the <code>extra.katex</code> config variable.</p> <pre data-lang="latex" class="language-latex z-code"><code class="language-latex" data-lang="latex"><span class="z-text z-tex z-latex"><span class="z-meta z-environment z-math z-block z-dollar z-latex"><span class="z-string z-other z-math z-latex"><span class="z-punctuation z-definition z-string z-begin z-latex">$$</span></span><span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>relax</span> <span class="z-variable z-other z-math z-tex">f</span><span class="z-constant z-character z-parenthesis z-tex">(</span><span class="z-variable z-other z-math z-tex">x</span><span class="z-constant z-character z-parenthesis z-tex">)</span> <span class="z-keyword z-operator z-math z-tex">=</span> <span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>int</span><span class="z-keyword z-operator z-math z-tex">_</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-keyword z-operator z-math z-tex">-</span><span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>infty</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-keyword z-operator z-math z-tex">^</span><span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>infty</span><span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>hat</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-variable z-other z-math z-tex">f</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-constant z-character z-parenthesis z-tex">(</span><span class="z-keyword z-other z-greek z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>xi</span><span class="z-constant z-character z-parenthesis z-tex">)</span><span class="z-constant z-character z-escape z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>,</span><span class="z-variable z-other z-math z-tex">e</span><span class="z-keyword z-operator z-math z-tex">^</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-constant z-numeric z-math z-tex">2</span> <span class="z-keyword z-other z-greek z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>pi</span> <span class="z-variable z-other z-math z-tex">i</span> <span class="z-keyword z-other z-greek z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>xi</span> <span class="z-variable z-other z-math z-tex">x</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-constant z-character z-escape z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>,</span><span class="z-variable z-other z-math z-tex">d</span><span class="z-keyword z-other z-greek z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>xi</span><span class="z-string z-other z-math z-latex"><span class="z-punctuation z-definition z-string z-end z-latex">$$</span></span></span> </span></code></pre> <p>$$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi),e^{2 \pi i \xi x},d\xi$$</p> <pre data-lang="latex" class="language-latex z-code"><code class="language-latex" data-lang="latex"><span class="z-text z-tex z-latex"><span class="z-meta z-environment z-math z-inline z-dollar z-latex"><span class="z-string z-other z-math z-latex"><span class="z-punctuation z-definition z-string z-begin z-latex">$</span></span><span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>relax</span> <span class="z-variable z-other z-math z-tex">f</span><span class="z-constant z-character z-parenthesis z-tex">(</span><span class="z-variable z-other z-math z-tex">x</span><span class="z-constant z-character z-parenthesis z-tex">)</span> <span class="z-keyword z-operator z-math z-tex">=</span> <span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>int</span><span class="z-keyword z-operator z-math z-tex">_</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-keyword z-operator z-math z-tex">-</span><span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>infty</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-keyword z-operator z-math z-tex">^</span><span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>infty</span><span class="z-support z-function z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>hat</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-variable z-other z-math z-tex">f</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-constant z-character z-parenthesis z-tex">(</span><span class="z-keyword z-other z-greek z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>xi</span><span class="z-constant z-character z-parenthesis z-tex">)</span><span class="z-constant z-character z-escape z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>,</span><span class="z-variable z-other z-math z-tex">e</span><span class="z-keyword z-operator z-math z-tex">^</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-constant z-numeric z-math z-tex">2</span> <span class="z-keyword z-other z-greek z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>pi</span> <span class="z-variable z-other z-math z-tex">i</span> <span class="z-keyword z-other z-greek z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>xi</span> <span class="z-variable z-other z-math z-tex">x</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-constant z-character z-escape z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>,</span><span class="z-variable z-other z-math z-tex">d</span><span class="z-keyword z-other z-greek z-math z-tex"><span class="z-punctuation z-definition z-backslash z-tex">\</span>xi</span><span class="z-string z-other z-math z-latex"><span class="z-punctuation z-definition z-string z-end z-latex">$</span></span></span> </span></code></pre> <p>$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi),e^{2 \pi i \xi x},d\xi$</p> <h3 id="shortcodes">Shortcodes</h3> <p>Duckquill provides a few useful <a href="https://www.getzola.org/documentation/content/shortcodes/">shortcodes</a> that simplify some tasks. They can be used on all pages.</p> <h4 id="alerts">Alerts</h4> <p><a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts">GitHub-style</a> alerts. Simply wrap the text of desired alert inside the shortcode to get the desired look.</p> <p>Available alert types:</p> <ul> <li><code>note</code>: Useful information that users should know, even when skimming content.</li> <li><code>tip</code>: Helpful advice for doing things better or more easily.</li> <li><code>important</code>: Key information users need to know to achieve their goal.</li> <li><code>warning</code>: Urgent info that needs immediate user attention to avoid problems.</li> <li><code>caution</code>: Advises about risks or negative outcomes of certain actions.</li> </ul> <pre data-lang="jinja2" class="language-jinja2 z-code"><code class="language-jinja2" data-lang="jinja2"><span class="z-source z-jinja2"><span class="z-meta z-scope z-jinja2 z-tag"><span class="z-entity z-other z-jinja2 z-delimiter z-tag">{%</span> <span class="z-keyword z-control z-jinja2">alert</span><span class="z-punctuation z-other z-jinja2">(</span><span class="z-variable z-other z-jinja2">note</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-constant z-language z-jinja2">true</span><span class="z-punctuation z-other z-jinja2">)</span> <span class="z-entity z-other z-jinja2 z-delimiter z-tag">%}</span></span> </span><span class="z-source z-jinja2">-&gt; Alert text &lt;- </span><span class="z-source z-jinja2"><span class="z-meta z-scope z-jinja2 z-tag"><span class="z-entity z-other z-jinja2 z-delimiter z-tag">{%</span> <span class="z-keyword z-control z-jinja2">end</span> <span class="z-entity z-other z-jinja2 z-delimiter z-tag">%}</span></span> </span></code></pre> <blockquote class="note"> <p class="alert-title"> <i class="icon"></i>Note</p> <p>Useful information that users should know, even when skimming content.</p> </blockquote> <blockquote class="tip"> <p class="alert-title"> <i class="icon"></i>Tip</p> <p>Helpful advice for doing things better or more easily.</p> </blockquote> <blockquote class="important"> <p class="alert-title"> <i class="icon"></i>Important</p> <p>Key information users need to know to achieve their goal.</p> </blockquote> <blockquote class="warning"> <p class="alert-title"> <i class="icon"></i>Warning</p> <p>Urgent info that needs immediate user attention to avoid problems.</p> </blockquote> <blockquote class="caution"> <p class="alert-title"> <i class="icon"></i>Caution</p> <p>Advises about risks or negative outcomes of certain actions.</p> </blockquote> <h4 id="images-and-videos">Images and Videos</h4> <p>By default images and videos come with some generic styling, such as rounded corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations.</p> <p>Available variables are:</p> <ul> <li><code>url</code>: URL to an image.</li> <li><code>url_min</code>: URL to compressed version of an image, original can be opened by clicking on the image.</li> <li><code>alt</code>: Alt text, same as if the text were inside square brackets in Markdown.</li> <li><code>full</code>: Forces image to be full-width.</li> <li><code>full_bleed</code>: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover.</li> <li><code>start</code>: Float image to the start of paragraph and scale it down.</li> <li><code>end</code>: Float image to the end of paragraph and scale it down.</li> <li><code>pixels</code>: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.</li> <li><code>transparent</code>: Removes rounded corners and shadow, useful for images with transparency.</li> <li><code>no_hover</code>: Removes zoom on hover.</li> <li><code>spoiler</code>: Blurs image until hovered over/pressed on, useful for plot rich game screenshots.</li> <li><code>spoiler</code> with <code>solid</code>: Ditto, but makes the image completely hidden.</li> </ul> <pre data-lang="jinja2" class="language-jinja2 z-code"><code class="language-jinja2" data-lang="jinja2"><span class="z-source z-jinja2"><span class="z-meta z-scope z-jinja2 z-variable"><span class="z-entity z-other z-jinja2 z-delimiter z-variable">{{</span> <span class="z-variable z-other z-jinja2">image</span><span class="z-punctuation z-other z-jinja2">(</span><span class="z-variable z-other z-jinja2">url</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-string z-quoted z-double z-jinja2"><span class="z-punctuation z-definition z-string z-begin z-jinja2">&quot;</span>image.png<span class="z-punctuation z-definition z-string z-end z-jinja2">&quot;</span></span><span class="z-punctuation z-other z-jinja2">,</span> <span class="z-variable z-other z-jinja2">alt</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-string z-quoted z-double z-jinja2"><span class="z-punctuation z-definition z-string z-begin z-jinja2">&quot;</span>This is an image<span class="z-punctuation z-definition z-string z-end z-jinja2">&quot;</span></span><span class="z-punctuation z-other z-jinja2">,</span> <span class="z-variable z-other z-jinja2">no_hover</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-constant z-language z-jinja2">true</span><span class="z-punctuation z-other z-jinja2">)</span> <span class="z-entity z-other z-jinja2 z-delimiter z-variable">}}</span></span> </span></code></pre> <figure> <img class="no-hover"alt="Portal Gun blueprint"src="https:&#x2F;&#x2F;i1.theportalwiki.net&#x2F;img&#x2F;2&#x2F;23&#x2F;Ashpd_blueprint.jpg"/> <figcaption>Image with an alt text and without zoom on hover</figcaption> </figure> <figure> <a href="https:&#x2F;&#x2F;upload.wikimedia.org&#x2F;wikipedia&#x2F;commons&#x2F;b&#x2F;b4&#x2F;JPEG_example_JPG_RIP_100.jpg"> <img class="no-hover"alt="The gravestone of J.P.G."src="https:&#x2F;&#x2F;upload.wikimedia.org&#x2F;wikipedia&#x2F;commons&#x2F;3&#x2F;38&#x2F;JPEG_example_JPG_RIP_010.jpg"/> </a> <figcaption>Image with compressed version, an alt text, and without zoom on hover</figcaption> </figure> <figure> <img class="spoiler"alt="Portal Gun blueprint"src="https:&#x2F;&#x2F;files.catbox.moe&#x2F;lk7nee.jpg"/> <figcaption>Image with an alt text, hidden behind a spoiler</figcaption> </figure> <p>Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g. such images will render normally in any Markdown editor, opposed to the Zola shortcodes.</p> <ul> <li><code>#full</code>: Forces image to be full-width.</li> <li><code>#full-bleed</code>: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover.</li> <li><code>#start</code>: Float image to the start of paragraph and scale it down.</li> <li><code>#end</code>: Float image to the end of paragraph and scale it down.</li> <li><code>#pixels</code>: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.</li> <li><code>#transparent</code>: Removes rounded corners and shadow, useful for images with transparency.</li> <li><code>#no-hover</code>: Removes zoom on hover.</li> <li><code>#spoiler</code>: Blurs image until hovered over/pressed on, useful for plot rich game screenshots.</li> <li><code>#spoiler</code> with <code>#solid</code>: Ditto, but makes the image completely hidden.</li> </ul> <br /> <figure> <p><a href="https://containertoolbx.org"><img src="https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover" alt="Toolbx header image" /></a></p> <figcaption>Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover</figcaption> </figure> <br /> <p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/1966_Ford_Mustang_coupe_white_003.jpg/320px-1966_Ford_Mustang_coupe_white_003.jpg#start" alt="1966 Ford Mustang coupe white" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.</p> <p><br /> <a href="https://unsplash.com/photos/a-mountain-lake-surrounded-by-trees-and-snow-CqTOTZh5vrs"><img src="https://images.unsplash.com/photo-1635410773896-da585e1fe138?q=80&amp;w=2063&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D#full-bleed" alt="Picture of the magnificent lej da staz just before sunrise in october" /></a></p> <p>For videos it’s all the same except for a few differences: <code>no_hover</code> and <code>url_min</code> variables are not available.</p> <p>Additionally, the following <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes">attributes</a> can be set:</p> <ul> <li><code>autoplay</code>: Start playing the video automatically.</li> <li><code>controls</code>: Display video controls such as volume control, seeking and pause/resume.</li> <li><code>loop</code>: Play the video again once it ends.</li> <li><code>muted</code>: Turn off the audio by default.</li> <li><code>playsinline</code>: Prevent the video from playing in fullscreen by default (depends on the browser).</li> </ul> <pre data-lang="jinja2" class="language-jinja2 z-code"><code class="language-jinja2" data-lang="jinja2"><span class="z-source z-jinja2"><span class="z-meta z-scope z-jinja2 z-variable"><span class="z-entity z-other z-jinja2 z-delimiter z-variable">{{</span> <span class="z-variable z-other z-jinja2">video</span><span class="z-punctuation z-other z-jinja2">(</span><span class="z-variable z-other z-jinja2">url</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-string z-quoted z-double z-jinja2"><span class="z-punctuation z-definition z-string z-begin z-jinja2">&quot;</span>video.webm<span class="z-punctuation z-definition z-string z-end z-jinja2">&quot;</span></span><span class="z-punctuation z-other z-jinja2">,</span> <span class="z-variable z-other z-jinja2">alt</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-string z-quoted z-double z-jinja2"><span class="z-punctuation z-definition z-string z-begin z-jinja2">&quot;</span>This is a video<span class="z-punctuation z-definition z-string z-end z-jinja2">&quot;</span></span><span class="z-punctuation z-other z-jinja2">,</span> <span class="z-variable z-other z-jinja2">controls</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-constant z-language z-jinja2">true</span><span class="z-punctuation z-other z-jinja2">)</span> <span class="z-entity z-other z-jinja2 z-delimiter z-variable">}}</span></span> </span></code></pre> <figure> <video class="" src="https:&#x2F;&#x2F;interactive-examples.mdn.mozilla.net&#x2F;media&#x2F;cc0-videos&#x2F;flower.webm"aria-title="Red flower wakes up"controls></video> <figcaption>WebM video example from MDN</figcaption> </figure> <figure> <video class="full-bleed" src="https:&#x2F;&#x2F;upload.wikimedia.org&#x2F;wikipedia&#x2F;commons&#x2F;transcoded&#x2F;0&#x2F;0e&#x2F;Duckling_preening_%2881313%29.webm&#x2F;Duckling_preening_%2881313%29.webm.720p.vp9.webm"aria-title="Duckling preening"controls></video> <figcaption>Duckling preening</figcaption> </figure> <h4 id="crt">CRT</h4> <p>Alright, this one doesn’t simplify anything, it just adds a CRT-like effect around Markdown code blocks.</p> <pre data-lang="jinja2" class="language-jinja2 z-code"><code class="language-jinja2" data-lang="jinja2"><span class="z-source z-jinja2"><span class="z-meta z-scope z-jinja2 z-tag"><span class="z-entity z-other z-jinja2 z-delimiter z-tag">{%</span> <span class="z-keyword z-control z-jinja2">crt</span><span class="z-punctuation z-other z-jinja2">(</span><span class="z-punctuation z-other z-jinja2">)</span> <span class="z-entity z-other z-jinja2 z-delimiter z-tag">%}</span></span> </span><span class="z-source z-jinja2">-&gt; Markdown code block &lt;- </span><span class="z-source z-jinja2"><span class="z-meta z-scope z-jinja2 z-tag"><span class="z-entity z-other z-jinja2 z-delimiter z-tag">{%</span> <span class="z-keyword z-control z-jinja2">end</span> <span class="z-entity z-other z-jinja2 z-delimiter z-tag">%}</span></span> </span></code></pre> <div class="crt scanlines" aria-hidden="true"> <pre class="z-code"><code><span class="z-text z-plain"> _____________________________________________ </span><span class="z-text z-plain">|.&#39;&#39;, Public_Library_Halls ,&#39;&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;&#39;, ,&#39;&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;&#39;, ,&#39;&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;&#39;, ,&#39;&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;.| |.&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;.|===; ;===|.&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;.|:::|&#39;, ,&#39;|:::|.&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;.|---|&#39;.|, _______ ,|.&#39;|---|.&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;.|:::|&#39;.|&#39;|???????|&#39;|.&#39;|:::|.&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|,&#39;,&#39;,&#39;,&#39;,|---|&#39;,|&#39;|???????|&#39;|,&#39;|---|,&#39;,&#39;,&#39;,&#39;,| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;.|:::|&#39;.|&#39;|???????|&#39;|.&#39;|:::|.&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;.|---|&#39;,&#39; /%%%\ &#39;,&#39;|---|.&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;.|===:&#39; /%%%%%\ &#39;:===|.&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;.|%%%%%%%%%%%%%%%%%%%%%%%%%|.&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;.&#39;,&#39; /%%%%%%%%%\ &#39;,&#39;.&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;.&#39;,&#39; /%%%%%%%%%%%\ &#39;,&#39;.&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;.&#39;,&#39; /%%%%%%%%%%%%%\ &#39;,&#39;.&#39;.| </span><span class="z-text z-plain">|.&#39;,&#39; /%%%%%%%%%%%%%%%\ &#39;,&#39;.| </span><span class="z-text z-plain">|;____________/%%%%%Spicer%%%%%%\____________;| </span></code></pre> </div> <p>There’s also a <code>cursor</code> class that you can add to a span with e.g. <code>█</code> character to simulate the terminal cursor. It doesn’t work from inside Markdown code blocks though.</p> <h4 id="youtube">YouTube</h4> <p>Allows to embed a YouTube video using youtube-nocookie.</p> <p>Available variables are:</p> <ul> <li><code>autoplay</code>: Whether the video should autoplay.</li> <li><code>start</code>: On which second video should start.</li> </ul> <pre data-lang="jinja2" class="language-jinja2 z-code"><code class="language-jinja2" data-lang="jinja2"><span class="z-source z-jinja2"><span class="z-meta z-scope z-jinja2 z-variable"><span class="z-entity z-other z-jinja2 z-delimiter z-variable">{{</span> <span class="z-variable z-other z-jinja2">youtube</span><span class="z-punctuation z-other z-jinja2">(</span><span class="z-variable z-other z-jinja2">id</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-string z-quoted z-double z-jinja2"><span class="z-punctuation z-definition z-string z-begin z-jinja2">&quot;</span>0Da8ZhKcNKQ<span class="z-punctuation z-definition z-string z-end z-jinja2">&quot;</span></span><span class="z-punctuation z-other z-jinja2">)</span> <span class="z-entity z-other z-jinja2 z-delimiter z-variable">}}</span></span> </span></code></pre> <iframe class="youtube-embed" src="https://www.youtube-nocookie.com/embed/0Da8ZhKcNKQ" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen> </iframe> <h4 id="vimeo">Vimeo</h4> <p>Allows to embed a Vimeo video.</p> <p>Available variables are:</p> <ul> <li><code>autoplay</code>: Whether the video should autoplay.</li> </ul> <pre data-lang="jinja2" class="language-jinja2 z-code"><code class="language-jinja2" data-lang="jinja2"><span class="z-source z-jinja2"><span class="z-meta z-scope z-jinja2 z-variable"><span class="z-entity z-other z-jinja2 z-delimiter z-variable">{{</span> <span class="z-variable z-other z-jinja2">vimeo</span><span class="z-punctuation z-other z-jinja2">(</span><span class="z-variable z-other z-jinja2">id</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-string z-quoted z-double z-jinja2"><span class="z-punctuation z-definition z-string z-begin z-jinja2">&quot;</span>869483483<span class="z-punctuation z-definition z-string z-end z-jinja2">&quot;</span></span><span class="z-punctuation z-other z-jinja2">)</span> <span class="z-entity z-other z-jinja2 z-delimiter z-variable">}}</span></span> </span></code></pre> <iframe class="vimeo-embed" src="https://player.vimeo.com/video/869483483" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen> </iframe> <h4 id="mastodon">Mastodon</h4> <p>Allows to embed a Mastodon post.</p> <p>Available variables are:</p> <ul> <li><code>host</code>: The instance on which the post resides. If not set, it will fallback to the one set in the <code>[extra.comments]</code> section of <code>config.toml</code>.</li> <li><code>user</code>: The poster. If not set, it will fallback to the one set in the <code>[extra.comments]</code> section of <code>config.toml</code>.</li> <li><code>id</code>: The ID of the post, usually at the end of the URL.</li> </ul> <pre data-lang="jinja2" class="language-jinja2 z-code"><code class="language-jinja2" data-lang="jinja2"><span class="z-source z-jinja2"><span class="z-meta z-scope z-jinja2 z-variable"><span class="z-entity z-other z-jinja2 z-delimiter z-variable">{{</span> <span class="z-variable z-other z-jinja2">mastodon</span><span class="z-punctuation z-other z-jinja2">(</span><span class="z-variable z-other z-jinja2">host</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-string z-quoted z-double z-jinja2"><span class="z-punctuation z-definition z-string z-begin z-jinja2">&quot;</span>toot.community<span class="z-punctuation z-definition z-string z-end z-jinja2">&quot;</span></span><span class="z-punctuation z-other z-jinja2">,</span> <span class="z-variable z-other z-jinja2">user</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-string z-quoted z-double z-jinja2"><span class="z-punctuation z-definition z-string z-begin z-jinja2">&quot;</span>sungsphinx<span class="z-punctuation z-definition z-string z-end z-jinja2">&quot;</span></span><span class="z-punctuation z-other z-jinja2">,</span> <span class="z-variable z-other z-jinja2">id</span><span class="z-keyword z-operator z-assignment z-jinja2">=</span><span class="z-string z-quoted z-double z-jinja2"><span class="z-punctuation z-definition z-string z-begin z-jinja2">&quot;</span>111789185826519979<span class="z-punctuation z-definition z-string z-end z-jinja2">&quot;</span></span><span class="z-punctuation z-other z-jinja2">)</span> <span class="z-entity z-other z-jinja2 z-delimiter z-variable">}}</span></span> </span></code></pre> <iframe class="mastodon-embed" src="https://toot.community/@sungsphinx/111789185826519979/embed"> </iframe> <h3 id="description-list-dl">Description List (<code>&lt;dl&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">dl</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">dt</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Something<span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">dt</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">dd</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>And its description<span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">dd</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">dl</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <dl> <dt>Name</dt> <dd>Godzilla</dd> <dt>Born</dt> <dd>1952</dd> <dt>Birthplace</dt> <dd>Japan</dd> <dt>Color</dt> <dd>Green</dd> </dl> <h3 id="form-input-input">Form Input (<code>&lt;input&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">input</span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>checkbox<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-punctuation z-definition z-tag z-end z-html">/&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Checkbox<span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <ul> <li> <input type="checkbox" /> <label>&nbsp;Milk</label> </li> <li> <input type="checkbox" /> <label>&nbsp;Eggs</label> </li> <li> <input type="checkbox" /> <label>&nbsp;Flour</label> </li> <li> <input type="checkbox" checked /> <label>&nbsp;Coffee</label> </li> <li> <input type="checkbox" disabled /> <label>&nbsp;Combustible lemons</label> </li> </ul> <p>With <code>switch</code> class:</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">input</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">switch</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>checkbox<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-punctuation z-definition z-tag z-end z-html">/&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Checkbox<span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <ul> <li> <input class="switch" type="checkbox" /> <label>&nbsp;Milk</label> </li> <li> <input class="switch" type="checkbox" /> <label>&nbsp;Eggs</label> </li> <li> <input class="switch" type="checkbox" /> <label>&nbsp;Flour</label> </li> <li> <input class="switch" type="checkbox" checked /> <label>&nbsp;Coffee</label> </li> <li> <input class="switch" type="checkbox" disabled /> <label>&nbsp;Combustible lemons</label> </li> </ul> <p>With <code>switch</code> and <code>big</code> classes:</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">input</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">switch</span> <span class="z-meta z-class-name z-html">big</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>checkbox<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-punctuation z-definition z-tag z-end z-html">/&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Checkbox<span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <ul> <li> <input class="switch big" type="checkbox" /> <label>&nbsp;Milk</label> </li> <li> <input class="switch big" type="checkbox" /> <label>&nbsp;Eggs</label> </li> <li> <input class="switch big" type="checkbox" /> <label>&nbsp;Flour</label> </li> <li> <input class="switch big" type="checkbox" checked /> <label>&nbsp;Coffee</label> </li> <li> <input class="switch big" type="checkbox" disabled /> <label>&nbsp;Combustible lemons</label> </li> </ul> <p>With <code>radio</code> type:</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">input</span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>radio<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">name</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>test<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-punctuation z-definition z-tag z-end z-html">/&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Radio<span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <ul> <li> <input type="radio" name="test" /> <label>&nbsp;Milk</label> </li> <li> <input type="radio" name="test" /> <label>&nbsp;Eggs</label> </li> <li> <input type="radio" name="test" /> <label>&nbsp;Flour</label> </li> <li> <input type="radio" name="test" checked /> <label>&nbsp;Coffee</label> </li> <li> <input type="radio" name="test" disabled /> <label>&nbsp;Combustible lemons</label> </li> </ul> <p>With <code>color</code> type:</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Color:<span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-form z-html">label</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">input</span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>color<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">value</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>#000000<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-punctuation z-definition z-tag z-end z-html">/&gt;</span></span> </span></code></pre> <p><label for="color">Color:</label> <input id="color" type="color" value="#b57edc" /></p> <p><label for="color">Disabled:</label> <input id="color" type="color" value="#b57edc" disabled /></p> <p>With <code>range</code> type:</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">input</span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>range<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">max</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>100<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">value</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>33<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <input type="range" max="100" value="33" id="range"> <!-- For the demo purposes only --> <small id="range-value"></small> <!-- End --> <h3 id="figure-captions-figcaption">Figure Captions (<code>&lt;figcaption&gt;</code>)</h3> <pre data-lang="markdown" class="language-markdown z-code"><code class="language-markdown" data-lang="markdown"><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">figure</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"> -&gt; Whatever content &lt;- </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"> <span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">figcaption</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Caption of content above<span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">figcaption</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">figure</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></span></code></pre> <figure> <p><img src="https://i.ibb.co/MPDJRsT/ImMAXM3.png" alt="The Office" /></p> <figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption> </figure> <h3 id="accordion-details">Accordion (<code>&lt;details&gt;</code>)</h3> <pre data-lang="markdown" class="language-markdown z-code"><code class="language-markdown" data-lang="markdown"><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">details</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"> <span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">summary</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Accordion title<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">summary</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"> -&gt; Contents here &lt;- </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">details</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></span></code></pre> <details> <summary>Reveal accordion</summary> <p>Get it? I know, it’s an awful pun. <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PianoAccordeon.jpg/916px-PianoAccordeon.jpg#transparent#no-hover" alt="Piano Accordion" /></p> </details> <h3 id="side-comment-small">Side Comment (<code>&lt;small&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">small</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Small, cute text that doesn&#39;t catch attention.<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">small</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p><small>Small, cute text that doesn’t catch attention.</small></p> <h3 id="abbreviation-abbr">Abbreviation (<code>&lt;abbr&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">abbr</span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">title</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>American Standard Code for Information Interchange<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>ASCII<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">abbr</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p>The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art is awesome!</p> <h3 id="aside-aside">Aside (<code>&lt;aside&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">aside</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> </span><span class="z-text z-html z-basic">-&gt; Contents here &lt;- </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">aside</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <aside> <p>Quill and a parchment</p> <img class="transparent no-hover" style="margin-block-end: 0; border-radius: 0;" alt="Quill and a parchment" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg/326px-%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg" /> </aside> <p>A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.</p> <p>As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.</p> <h3 id="keyboard-input-kbd">Keyboard Input (<code>&lt;kbd&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">kbd</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>⌘ Command<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">kbd</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>. </span></code></pre> <p>To switch the keyboard layout, press <kbd>⌘ Super</kbd> + <kbd>Space</kbd>.</p> <h3 id="mark-text-mark">Mark Text (<code>&lt;mark&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">mark</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Marked text<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">mark</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p>You know what? I’m gonna say some <mark>very important</mark> stuff, so <mark>important</mark> that even <strong>bold</strong> is not enough.</p> <h3 id="deleted-and-inserted-text-del-and-ins">Deleted and Inserted Text (<code>&lt;del&gt;</code> and <code>&lt;ins&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">del</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Something deleted<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">del</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> <span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">ins</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Something added<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">ins</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p><del>Text deleted</del> <ins>Text added</ins></p> <h3 id="progress-indicator-progress">Progress Indicator (<code>&lt;progress&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">progress</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-form z-html">progress</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">progress</span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">value</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>33<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">max</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>100<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span><span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-form z-html">progress</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p><progress></progress> <progress value="33" max="100"></progress></p> <h3 id="sample-output-samp">Sample Output (<code>&lt;samp&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">samp</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Sample Output<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">samp</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p><samp>Sample Output</samp></p> <h3 id="inline-quotation-q">Inline Quotation (<code>&lt;q&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">q</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Someone said something<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">q</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p>Blah blah <q>Inline Quote</q> hmm.</p> <h3 id="unarticulated-annotation-u">Unarticulated Annotation (<code>&lt;u&gt;</code>)</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">u</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Gmarrar mitsakes<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">u</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p><u>Yeet</u> the <u>sus</u> drip while <u>vibing</u> with the <u>TikTok</u> <u>fam</u> on a cap-free boomerang.</p> <h3 id="external-links">External Links</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-a z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-a z-html">a</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">external</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">href</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>https://example.org<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>External link<span class="z-meta z-tag z-inline z-a z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-a z-html">a</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p><a class="external" href="https://example.org">Link to site</a></p> <h3 id="spoilers">Spoilers</h3> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">span</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">spoiler</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Some spoiler<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">span</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p>You know, <span class="spoiler">Duckquill is a pretty dumb name.</span> I know, crazy.</p> <p>With <code>solid</code> class:</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">span</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">spoiler</span> <span class="z-meta z-class-name z-html">solid</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Some spoiler<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">span</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p>You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I know, crazy.</p> <h3 id="buttons-dialog">Buttons Dialog</h3> <pre data-lang="html.j2" class="language-html.j2 z-code"><code class="language-html.j2" data-lang="html.j2"><span class="z-text z-html z-jinja2"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">div</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">buttons</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-jinja2"> <span class="z-meta z-tag z-inline z-a z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-a z-html">a</span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">href</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>#top<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Go to Top<span class="z-meta z-tag z-inline z-a z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-a z-html">a</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-jinja2"> <span class="z-meta z-tag z-inline z-a z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-a z-html">a</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">colored</span> <span class="z-meta z-class-name z-html">external</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">href</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>https://example.org<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Example<span class="z-meta z-tag z-inline z-a z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-a z-html">a</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-jinja2"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">div</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <div class="buttons"> <a href="#top">Go to Top</a> <a class="colored external" href="https://example.org">Example</a> </div> <p>With <code>centered</code> and <code>big</code> classes:</p> <pre data-lang="html.j2" class="language-html.j2 z-code"><code class="language-html.j2" data-lang="html.j2"><span class="z-text z-html z-jinja2"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">div</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">buttons</span> <span class="z-meta z-class-name z-html">centered</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-jinja2"> <span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">button</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">big</span> <span class="z-meta z-class-name z-html">colored</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span>Do Something…<span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-form z-html">button</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-jinja2"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">div</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <div class="buttons centered"> <button class="big colored">Do Something…</button> </div> <!-- For the demo purposes only --> <div id="color-picker-container"> <small>Accent color:</small> <input id="color-picker-light" type="color" value="#ff7800" /> <label for="color-picker-light">Light theme</label> <br /> <input id="color-picker-dark" type="color" value="#ffa348" /> <label for="color-picker-dark">Dark theme</label> </div> <!-- End --> <section class="footnotes"> <ol class="footnotes-list"> </ol> </section>