elli-website/en/blog/markdown-syntax/index.html
2023-08-16 12:02:11 +00:00

43 lines
No EOL
36 KiB
HTML

<!doctype html><html lang=en itemscope itemtype=http://schema.org/WebPage><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.svg><title>Markdown Syntax Guide - Blist Multilingual Theme</title><meta name=description content="Sample article showcasing basic Markdown syntax and formatting for HTML elements."><meta name=author content="Hugo Authors"><meta name=generator content="Hugo 0.117.0"><link rel=stylesheet href="https://blist.vercel.app/css/styles.min.eb7fe02195897f2fd20b6dcb5f80cda854ce0b58dcf3a28f1d23166a1eaaded4.css" integrity="sha256-63/gIZWJfy/SC23LX4DNqFTOC1jc86KPHSMWah6q3tQ="><meta property="og:title" content="Markdown Syntax Guide"><meta property="og:description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements."><meta property="og:type" content="article"><meta property="og:url" content="https://blist.vercel.app/en/blog/markdown-syntax/"><meta property="article:section" content="blog"><meta property="article:published_time" content="2021-07-14T00:00:00+00:00"><meta property="article:modified_time" content="2021-07-14T00:00:00+00:00"><meta name=twitter:card content="summary"><meta name=twitter:title content="Markdown Syntax Guide"><meta name=twitter:description content="Sample article showcasing basic Markdown syntax and formatting for HTML elements."><meta itemprop=name content="Markdown Syntax Guide"><meta itemprop=description content="Sample article showcasing basic Markdown syntax and formatting for HTML elements."><meta itemprop=datePublished content="2021-07-14T00:00:00+00:00"><meta itemprop=dateModified content="2021-07-14T00:00:00+00:00"><meta itemprop=wordCount content="445"><meta itemprop=keywords content="markdown,css,html,"><meta name=lang content="en"></head><body class="dark:bg-gray-800 dark:text-white relative flex flex-col min-h-screen"><header class="container flex justify-between md:justify-between gap-4 flex-wrap p-6 mx-auto relative"><a href=https://blist.vercel.app/en/ class="capitalize font-extrabold text-2xl"><img src=/blist-logo.png alt="Blist Multilingual Theme" class="h-8 max-w-full"></a>
<button class="mobile-menu-button md:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="4" y1="8" x2="20" y2="8"/><line x1="4" y1="16" x2="20" y2="16"/></svg></button><ul class="mobile-menu absolute z-10 px-6 pb-6 md:p-0 top-full left-0 w-full md:w-auto md:relative hidden md:flex flex-col md:flex-row items-end md:items-center gap-4 lg:gap-6 bg-white dark:bg-gray-800"><li><a href=/en/blog>Blog</a></li><li><a href=/en/page/about/>About</a></li><li><a href=/en/tags>Tags</a></li><li><a href=/en/blog/emoji-support/>Top Post</a></li><li class="relative cursor-pointer"><span class="language-switcher flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9"/><line x1="3.6" y1="9" x2="20.4" y2="9"/><line x1="3.6" y1="15" x2="20.4" y2="15"/><path d="M11.5 3a17 17 0 000 18"/><path d="M12.5 3a17 17 0 010 18"/></svg><a>Language</a><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 15l-6-6-6 6h12" transform="rotate(180 12 12)"/></svg></span><div class="language-dropdown absolute top-full mt-2 left-0 flex-col gap-2 bg-gray-100 dark:bg-gray-900 dark:text-white z-10 hidden"><a class="px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-700" href=/fr lang=fr>Français</a>
<a class="px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-700" href=/de lang=de>Deutsch</a>
<a class="px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-700" href=/dy lang=dy>Test Language</a></div></li><li class="grid place-items-center"><span class="open-search inline-block cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7"/><line x1="21" y1="21" x2="15" y2="15"/></svg></span></li><li class="grid place-items-center"><span class="toggle-dark-mode inline-block cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="5" x2="12" y2="5.01"/><line x1="17" y1="7" x2="17" y2="7.01"/><line x1="19" y1="12" x2="19" y2="12.01"/><line x1="17" y1="17" x2="17" y2="17.01"/><line x1="12" y1="19" x2="12" y2="19.01"/><line x1="7" y1="17" x2="7" y2="17.01"/><line x1="5" y1="12" x2="5" y2="12.01"/><line x1="7" y1="7" x2="7" y2="7.01"/></svg></span></li></ul></header><main class=flex-1><div class="relative max-w-5xl mx-auto px-4"><img src=https://picsum.photos/id/1019/500/200 class="rounded-lg shadow-sm w-full object-contain"><div class="absolute top-4 right-8 rounded shadow bg-white text-gray-900 dark:bg-gray-900 dark:text-white px-2 py-0.5">July 14, 2021</div></div><article class="prose lg:prose-lg mx-auto my-8 dark:prose-dark px-4"><h1 class="text-2xl font-bold mb-2">Markdown Syntax Guide</h1><h5 class="text-sm flex items-center flex-wrap"><svg xmlns="http://www.w3.org/2000/svg" class="mr-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="5" width="16" height="16" rx="2"/><line x1="16" y1="3" x2="16" y2="7"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="4" y1="11" x2="20" y2="11"/><rect x="8" y="15" width="2" height="2"/></svg>Posted on
July 14, 2021
&nbsp;&bull;&nbsp;<svg xmlns="http://www.w3.org/2000/svg" class="mr-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 15"/></svg>
3&nbsp;minutes
&nbsp;&bull;<svg xmlns="http://www.w3.org/2000/svg" class="mx-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 19a9 9 0 019 0 9 9 0 019 0"/><path d="M3 6a9 9 0 019 0 9 9 0 019 0"/><line x1="3" y1="6" x2="3" y2="19"/><line x1="12" y1="6" x2="12" y2="19"/><line x1="21" y1="6" x2="21" y2="19"/></svg>
445&nbsp;words
&nbsp;&bull;&nbsp;Other languages: &nbsp;<a href=https://blist.vercel.app/de/blog/markdown-syntax/ lang=de>Deutsch</a></h5><details id=TableOfContents class="px-4 mt-4 bg-gray-100 dark:bg-gray-700 rounded toc"><summary class="flex items-center font-bold py-2 px-4 cursor-pointer justify-between select-none text-black dark:text-white"><span>Table of contents</span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="6 9 12 15 18 9"/></svg></summary><ul class="mt-2 pb-4"><ul><li><a href=#headings>Headings</a></li></ul><li><a href=#h1>H1</a><ul><li><a href=#h2>H2</a><ul><li><a href=#h3>H3</a><ul><li><a href=#h4>H4</a></li></ul></li></ul></li><li><a href=#paragraph>Paragraph</a></li><li><a href=#blockquotes>Blockquotes</a><ul><ul><li><a href=#blockquote-without-attribution>Blockquote without attribution</a></li><li><a href=#blockquote-with-attribution>Blockquote with attribution</a></li></ul></ul></li><li><a href=#tables>Tables</a><ul><ul><li><a href=#inline-markdown-within-tables>Inline Markdown within tables</a></li></ul></ul></li><li><a href=#code-blocks>Code Blocks</a><ul><ul><li><a href=#code-block-with-backticks>Code block with backticks</a></li><li><a href=#code-block-indented-with-four-spaces>Code block indented with four spaces</a></li><li><a href=#code-block-with-hugos-internal-highlight-shortcode>Code block with Hugo&rsquo;s internal highlight shortcode</a></li></ul></ul></li><li><a href=#list-types>List Types</a><ul><ul><li><a href=#ordered-list>Ordered List</a></li><li><a href=#unordered-list>Unordered List</a></li><li><a href=#nested-list>Nested list</a></li></ul></ul></li><li><a href=#other-elements--abbr-sub-sup-kbd-mark>Other Elements — abbr, sub, sup, kbd, mark</a></li></ul></li></ul></details><p>This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.</p><h2 id=headings>Headings</h2><p>The following HTML <code>&lt;h1></code><code>&lt;h6></code> elements represent six levels of section headings. <code>&lt;h1></code> is the highest section level while <code>&lt;h6></code> is the lowest.</p><h1 id=h1>H1</h1><h2 id=h2>H2</h2><h3 id=h3>H3</h3><h4 id=h4>H4</h4><h5 id=h5>H5</h5><h6 id=h6>H6</h6><h2 id=paragraph>Paragraph</h2><p>Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.</p><p>Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.</p><h2 id=blockquotes>Blockquotes</h2><p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a <code>footer</code> or <code>cite</code> element, and optionally with in-line changes such as annotations and abbreviations.</p><h4 id=blockquote-without-attribution>Blockquote without attribution</h4><blockquote><p>Tiam, ad mint andaepu dandae nostion secatur sequo quae.
<strong>Note</strong> that you can use <em>Markdown syntax</em> within a blockquote.</p></blockquote><h4 id=blockquote-with-attribution>Blockquote with attribution</h4><blockquote><p>Don&rsquo;t communicate by sharing memory, share memory by communicating.<br><cite>Rob Pike<sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup></cite></p></blockquote><h2 id=tables>Tables</h2><p>Tables aren&rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.</p><table><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr><td>Bob</td><td>27</td></tr><tr><td>Alice</td><td>23</td></tr></tbody></table><h4 id=inline-markdown-within-tables>Inline Markdown within tables</h4><table><thead><tr><th>Italics</th><th>Bold</th><th>Code</th></tr></thead><tbody><tr><td><em>italics</em></td><td><strong>bold</strong></td><td><code>code</code></td></tr></tbody></table><h2 id=code-blocks>Code Blocks</h2><h4 id=code-block-with-backticks>Code block with backticks</h4><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-html data-lang=html><span style=display:flex><span><span style=color:#ff79c6>&lt;!DOCTYPE html&gt;</span>
</span></span><span style=display:flex><span>&lt;<span style=color:#ff79c6>html</span> <span style=color:#50fa7b>lang</span><span style=color:#ff79c6>=</span><span style=color:#f1fa8c>&#34;en&#34;</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#ff79c6>head</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#ff79c6>meta</span> <span style=color:#50fa7b>charset</span><span style=color:#ff79c6>=</span><span style=color:#f1fa8c>&#34;utf-8&#34;</span> /&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#ff79c6>title</span>&gt;Example HTML5 Document&lt;/<span style=color:#ff79c6>title</span>&gt;
</span></span><span style=display:flex><span> &lt;/<span style=color:#ff79c6>head</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#ff79c6>body</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#ff79c6>p</span>&gt;Test&lt;/<span style=color:#ff79c6>p</span>&gt;
</span></span><span style=display:flex><span> &lt;/<span style=color:#ff79c6>body</span>&gt;
</span></span><span style=display:flex><span>&lt;/<span style=color:#ff79c6>html</span>&gt;
</span></span></code></pre></div><h4 id=code-block-indented-with-four-spaces>Code block indented with four spaces</h4><pre><code>&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Example HTML5 Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Test&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><h4 id=code-block-with-hugos-internal-highlight-shortcode>Code block with Hugo&rsquo;s internal highlight shortcode</h4><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-html data-lang=html><span style=display:flex><span><span style=color:#ff79c6>&lt;!doctype html&gt;</span>
</span></span><span style=display:flex><span>&lt;<span style=color:#ff79c6>html</span> <span style=color:#50fa7b>lang</span><span style=color:#ff79c6>=</span><span style=color:#f1fa8c>&#34;en&#34;</span>&gt;
</span></span><span style=display:flex><span>&lt;<span style=color:#ff79c6>head</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#ff79c6>meta</span> <span style=color:#50fa7b>charset</span><span style=color:#ff79c6>=</span><span style=color:#f1fa8c>&#34;utf-8&#34;</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#ff79c6>title</span>&gt;Example HTML5 Document&lt;/<span style=color:#ff79c6>title</span>&gt;
</span></span><span style=display:flex><span>&lt;/<span style=color:#ff79c6>head</span>&gt;
</span></span><span style=display:flex><span>&lt;<span style=color:#ff79c6>body</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#ff79c6>p</span>&gt;Test&lt;/<span style=color:#ff79c6>p</span>&gt;
</span></span><span style=display:flex><span>&lt;/<span style=color:#ff79c6>body</span>&gt;
</span></span><span style=display:flex><span>&lt;/<span style=color:#ff79c6>html</span>&gt;</span></span></code></pre></div><h2 id=list-types>List Types</h2><h4 id=ordered-list>Ordered List</h4><ol><li>First item</li><li>Second item</li><li>Third item</li></ol><h4 id=unordered-list>Unordered List</h4><ul><li>List item</li><li>Another item</li><li>And another item</li></ul><h4 id=nested-list>Nested list</h4><ul><li>Fruit<ul><li>Apple</li><li>Orange</li><li>Banana</li></ul></li><li>Dairy<ul><li>Milk</li><li>Cheese</li></ul></li></ul><h2 id=other-elements--abbr-sub-sup-kbd-mark>Other Elements — abbr, sub, sup, kbd, mark</h2><p><abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.</p><p>H<sub>2</sub>O</p><p>X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup></p><p>Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.</p><p>Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.</p><div class=footnotes role=doc-endnotes><hr><ol><li id=fn:1><p>The above quote is excerpted from Rob Pike&rsquo;s <a href="https://www.youtube.com/watch?v=PAAkCSZUG1c" target=_blank rel=noopener>talk</a>
during Gopherfest, November 18, 2015.&#160;<a href=#fnref:1 class=footnote-backref role=doc-backlink>&#8617;&#xfe0e;</a></p></li></ol></div></article><div class="px-2 mb-2"><script src=https://giscus.app/client.js data-repo data-repo-id data-category data-category-id data-mapping=pathname data-strict=0 data-reactions-enabled=1 data-emit-metadata=0 data-input-position=bottom data-theme=preferred_color_scheme data-lang=en crossorigin=anonymous async></script></div><div class="bg-blue-100 dark:bg-gray-900"><div class="container px-4 py-12 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-4 items-center"><div><div class="text-2xl font-bold mb-2">Follow me</div><p class=opacity-60>I work on everything coding and tweet developer memes</p></div><ul class="flex justify-center gap-x-3 flex-wrap gap-y-2"><li><a href=https://twitter.com/ target=_blank rel=noopener aria-label=Twitter class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M22 4.01c-1 .49-1.98.689-3 .99-1.121-1.265-2.783-1.335-4.38-.737S11.977 6.323 12 8v1c-3.245.083-6.135-1.395-8-4 0 0-4.182 7.433 4 11-1.872 1.247-3.739 2.088-6 2 3.308 1.803 6.913 2.423 10.034 1.517 3.58-1.04 6.522-3.723 7.651-7.742a13.84 13.84.0 00.497-3.753C20.18 7.773 21.692 5.25 22 4.009z"/></svg></a></li><li><a href=https://linkedin.com/in/ target=_blank rel=noopener aria-label=LinkedIn class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="16" height="16" rx="2"/><line x1="8" y1="11" x2="8" y2="16"/><line x1="8" y1="8" x2="8" y2="8.01"/><line x1="12" y1="16" x2="12" y2="11"/><path d="M16 16v-3a2 2 0 00-4 0"/></svg></a></li><li><a href=https://www.xing.com/profile/ target=_blank rel=noopener aria-label=xing class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14.48736 22.8 9.65664 14.33208 17.154 1.2H22.2L14.70288 14.33208 19.53384 22.8H14.48736zM6.55728 16.26888l3.74808-6.17064-2.81088-4.9512H2.73696l2.81112 4.9512L1.8 16.26888H6.55728z"/></svg></a></li><li><a href=https://t.me/ target=_blank rel=noopener aria-label=Telegram class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-telegram" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M11.944.0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056.0zm4.962 7.224c.1-.002.321.023.465.14a.506.506.0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg></a></li><li><a href=https://github.com/ target=_blank rel=noopener aria-label=GitHub class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6.0 00-1.3-3.2 4.2 4.2.0 00-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3.0 00-6.2.0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2.0 00-.1 3.2A4.6 4.6.0 004 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg></a></li><li><a href=https://www.buymeacoffee.com/ target=_blank rel=noopener aria-label="Buy Me A Coffee" class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723.0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834.0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228.0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185.0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076.0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237.0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704.0 01-4.743.295 37.059 37.059.0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69.0 0011.343.376.483.483.0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484.0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544.0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884.0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38.0.0 1.243.065 1.658.065.447.0 1.786-.065 1.786-.065.783.0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996.0 00-1.322-.238c-.826.0-1.491.284-2.26.613z"/></svg></a></li><li><a href=https://medium.com/ target=_blank rel=noopener aria-label=Medium class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 9h1l3 3 3-3h1"/><line x1="8" y1="15" x2="10" y2="15"/><line x1="14" y1="15" x2="16" y2="15"/><line x1="9" y1="9" x2="9" y2="15"/><line x1="15" y1="9" x2="15" y2="15"/></svg></a></li><li><a href=https://reddit.com/ target=_blank rel=noopener aria-label=Medium class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 8c2.648.0 5.028.826 6.675 2.14a2.5 2.5.0 012.326 4.36c0 3.59-4.03 6.5-9 6.5-4.875.0-8.845-2.8-9-6.294l-1-.206a2.5 2.5.0 012.326-4.36C5.973 8.827 8.353 8 11.001 8z"/><path d="M12 8l1-5 6 1"/><circle cx="19" cy="4" r="1"/><circle cx="9" cy="13" r=".5" fill="currentcolor"/><circle cx="15" cy="13" r=".5" fill="currentcolor"/><path d="M10 17c.667.333 1.333.5 2 .5s1.333-.167 2-.5"/></svg></a></li><li><a href=https://dribbble.com/ target=_blank rel=noopener aria-label=Dribbble class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-dribbble" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9"/><path d="M9 3.6c5 6 7 10.5 7.5 16.2"/><path d="M6.4 19c3.5-3.5 6-6.5 14.5-6.4"/><path d="M3.1 10.75c5 0 9.814-.38 15.314-5"/></svg></a></li><li><a href=https://stackoverflow.com/ target=_blank rel=noopener aria-label=stackoverflow class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-stackoverflow" width="23" height="23" viewBox="-135 22 32 38" stroke-width=".2" stroke="currentcolor" fill="currentcolor" stroke-linecap="round" stroke-linejoin="round"><polygon points="-108.5,56.2 -108.5,46.3 -105.2,46.3 -105.2,59.5 -135,59.5 -135,46.3 -131.7,46.3 -131.7,56.2"/><path d="M-128 45.4l16.2 3.4.7-3.2-16.2-3.4L-128 45.4zM-125.9 37.6l15 7 1.4-3-15-7L-125.9 37.6zm4.2-7.4 12.7 10.6 2.1-2.5-12.7-10.6L-121.7 30.2zm8.2-7.8-2.7 2 9.9 13.3 2.7-2L-113.5 22.4zm-14.9 30.5h16.6v-3.3h-16.6v3.3z"/></svg></a></li><li><a href=https://forum.xda-developers.com/ target=_blank rel=noopener aria-label=XDA class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-xda" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M13.84 3.052V0h7.843v17.583H13.84v-3.024h4.591V3.052zM5.569 14.53V3.024h4.592V0H2.318v17.583H6.98L10.16 24v-9.483z"/></svg></a></li><li><a href=https://tiktok.com target=_blank rel=noopener aria-label=Tiktok class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-tiktok" width="23" height="23" viewBox="0 0 448 512" stroke-width="30" stroke="currentcolor" fill="none"><path d="M448 209.91a210.06 210.06.0 01-122.77-39.25V349.38A162.55 162.55.0 11185 188.31V278.2a74.62 74.62.0 1052.23 71.18V0h88a121.18 121.18.0 001.86 22.17h0A122.18 122.18.0 00381 102.39a121.43 121.43.0 0067 20.14z"/></svg></a></li><li><a href=https://scholar.google.com/ target=_blank rel=noopener aria-label="Google Scholar" class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-googlescholar" width="22" height="23" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentcolor" fill="none"><path d="M5.242 13.769.0 9.5 12 0l12 9.5-5.242 4.269C17.548 11.249 14.978 9.5 12 9.5c-2.977.0-5.548 1.748-6.758 4.269zM12 10a7 7 0 100 14 7 7 0 000-14z"/></svg></a></li><li><a href=https://joinmastodon.org target=_blank rel=noopener aria-label=Mastodon class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18.648 15.254C16.832 17.017 12 16.88 12 16.88a18.262 18.262.0 01-3.288-.256c1.127 1.985 4.12 2.81 8.982 2.475-1.945 2.013-13.598 5.257-13.668-7.636L4 10.309c0-3.036.023-4.115 1.352-5.633C7.023 2.766 12 3.01 12 3.01s4.977-.243 6.648 1.667C19.977 6.195 20 7.274 20 10.31s-.456 4.074-1.352 4.944z"/><path d="M12 11.204V8.278C12 7.02 11.105 6 10 6S8 7.02 8 8.278V13m4-4.722C12 7.02 12.895 6 14 6s2 1.02 2 2.278V13"/></svg></a></li><li><a href=https://youtube.com target=_blank rel=noopener aria-label=YouTube class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-youtube" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9"/><path d="M10 9l5 3-5 3z"/></svg></a></li><li><a href=https://instagram.com target=_blank rel=noopener aria-label=Instagram class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4A5.8 5.8.0 0116.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8.0 017.8 2M7.6 4A3.6 3.6.0 004 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8A3.6 3.6.0 0020 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5A1.25 1.25.0 0118.5 6.75 1.25 1.25.0 0117.25 8 1.25 1.25.0 0116 6.75 1.25 1.25.0 0117.25 5.5M12 7a5 5 0 015 5 5 5 0 01-5 5A5 5 0 017 12a5 5 0 015-5m0 2A3 3 0 009 12a3 3 0 003 3 3 3 0 003-3A3 3 0 0012 9z"/><circle cx="12" cy="12" r="9"/><path d="M10 9l5 3-5 3z"/></svg></a></li><li><a href=https://facebook.com target=_blank rel=noopener aria-label=Facebook class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1-4h-4V8a1 1 0 011-1h3V3h-3a5 5 0 00-5 5v2H7"/></svg></a></li><li><a href=https://behance.net target=_blank rel=noopener aria-label=Behance class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-behance" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 18V6h4.5a3 3 0 010 6 3 3 0 010 6H3"/><line x1="3" y1="12" x2="7.5" y2="12"/><path d="M14 13h7a3.5 3.5.0 00-7 0v2a3.5 3.5.0 006.64 1"/><line x1="16" y1="6" x2="19" y2="6"/></svg></a></li></ul></div></div></main><footer class="container p-6 mx-auto flex justify-between items-center"><span class="text-sm font-light">Copyright © 2021 - Katheryn Fox · All rights reserved</span>
<span onclick='window.scrollTo({top:0,behavior:"smooth"})' class="p-1 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 15l-6-6-6 6h12"/></svg></span></footer><div class="search-ui absolute top-0 left-0 w-full h-full bg-white dark:bg-gray-800 hidden"><div class="container max-w-3xl mx-auto p-12"><div class=relative><div class="my-4 text-center text-2xl font-bold">Search</div><span class="p-2 absolute right-0 top-0 cursor-pointer close-search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span></div><input type=search class="py-2 px-3 w-full dark:text-black border dark:border-transparent" placeholder="Enter search query"><div class="search-results text-lg font-medium my-4 hidden">Results</div><ul class="search-list my-2"></ul><div class="no-results text-center my-8 hidden"><div class="text-xl font-semibold mb-2">No results found</div><p class="font-light text-sm">Try adjusting your search query</p></div></div></div><script src=https://blist.vercel.app/js/scripts.min.js></script>
<script>const languageMenuButton=document.querySelector(".language-switcher"),languageDropdown=document.querySelector(".language-dropdown");languageMenuButton.addEventListener("click",e=>{e.preventDefault(),languageDropdown.classList.contains("hidden")?(languageDropdown.classList.remove("hidden"),languageDropdown.classList.add("flex")):(languageDropdown.classList.add("hidden"),languageDropdown.classList.remove("flex"))})</script><script>const darkmode=document.querySelector(".toggle-dark-mode");function toggleDarkMode(){document.documentElement.classList.contains("dark")?(document.documentElement.classList.remove("dark"),localStorage.setItem("darkmode","light")):(document.documentElement.classList.add("dark"),localStorage.setItem("darkmode","dark"))}darkmode&&darkmode.addEventListener("click",toggleDarkMode);const darkStorage=localStorage.getItem("darkmode"),isBrowserDark=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;!darkStorage&&isBrowserDark&&document.documentElement.classList.add("dark"),darkStorage&&darkStorage==="dark"&&toggleDarkMode()</script><script>const mobileMenuButton=document.querySelector(".mobile-menu-button"),mobileMenu=document.querySelector(".mobile-menu");function toggleMenu(){mobileMenu.classList.toggle("hidden"),mobileMenu.classList.toggle("flex")}mobileMenu&&mobileMenuButton&&mobileMenuButton.addEventListener("click",toggleMenu)</script></body></html>