<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="generator" content="Hugo 0.112.7"> <meta name="generator" content="Relearn 5.15.2+tip"> <meta name="robots" content="noindex, nofollow, noarchive, noimageindex"> <meta name="description" content="Documentation for Hugo Relearn Theme"> <meta name="author" content="Sören Weber"> <title>Tests :: Hugo Relearn Theme</title> <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="x-default"> <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="en"> <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/index.html" rel="alternate" hreflang="pir"> <link href="../images/logo.svg?1685918537" rel="icon" type="image/svg+xml"> <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use --> <link href="../css/fontawesome-all.min.css?1685918539" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1685918539" rel="stylesheet"></noscript> <link href="../css/nucleus.css?1685918539" rel="stylesheet"> <link href="../css/auto-complete.css?1685918539" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1685918539" rel="stylesheet"></noscript> <link href="../css/perfect-scrollbar.min.css?1685918539" rel="stylesheet"> <link href="../css/fonts.css?1685918539" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1685918539" rel="stylesheet"></noscript> <link href="../css/theme.css?1685918539" rel="stylesheet"> <link href="../css/theme-auto.css?1685918539" rel="stylesheet" id="variant-style"> <link href="../css/variant.css?1685918539" rel="stylesheet"> <link href="../css/print.css?1685918539" rel="stylesheet" media="print"> <link href="../css/format-print.css?1685918539" rel="stylesheet"> <link href="../css/ie.css?1685918539" rel="stylesheet"> <script src="../js/url.js?1685918539"></script> <script src="../js/variant.js?1685918539"></script> <script> // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72 window.index_js_url="../index.search.js"; var root_url="../"; var baseUri=root_url.replace(/\/$/, ''); // translations window.T_Copy_to_clipboard = 'Copy to clipboard'; window.T_Copied_to_clipboard = 'Copied to clipboard!'; window.T_Copy_link_to_clipboard = 'Copy link to clipboard'; window.T_Link_copied_to_clipboard = 'Copied link to clipboard!'; window.T_No_results_found = 'No results found for \u0022{0}\u0022'; window.T_N_results_found = '{1} results found for \u0022{0}\u0022'; // some further base stuff var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/'; window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] ); </script> <style> #body img.bg-white { background-color: white; } </style> </head> <body class="mobile-support print disableInlineCopyToClipboard" data-url="../tests/index.html"> <div id="body" class="default-animation"> <div id="sidebar-overlay"></div> <div id="toc-overlay"></div> <nav id="topbar" class="highlightable"> <div> <div id="breadcrumbs"> <span id="sidebar-toggle-span"> <a href="#" id="sidebar-toggle" class="topbar-link" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a> </span> <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1"> > </li> <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tests</span><meta itemprop="position" content="2"></li> </ol> </div> </div> </nav> <main id="body-inner" class="highlightable chapter narrow" tabindex="-1"> <div class="flex-block-wrapper"> <article class="chapter"> <header class="headline"> </header> <div class="article-subheading">Chapter 5</div> <h1 id="tests">Tests</h1> <p>Some pages for internal testing of different styles</p> <div class="children children-h2 children-sort-"> <h2><a href="../tests/attach/index.html">Attachments Shortcode Test</a></h2><p>Testing Attachments Shortcode</p> <h2><a href="../tests/chapters/index.html">Chapters</a></h2><p>Start your success story. Now!</p> <h2><a href="../tests/code/index.html">Code</a></h2><p>Some testing for different styles used in syntax highlighting and preformatted blocks</p> <h2><a href="../tests/images/index.html">Images</a></h2><p>Some testing for different styles of image links</p> <h2><a href="../tests/lists/index.html">Lists</a></h2><p>Test shortcodes inside of list items</p> <h2><a href="../tests/tables/index.html">Tables</a></h2><p>Testing different markdown constructs inside of tables</p> <h2><a href="../tests/frontmatter/index.html">VSCode Front Matter</a></h2><p>Test default settings for snippets of the VSCode Front Matter extension</p> <h2><a href="../tests/width/index.html">Width</a></h2><p>Test dynamic width resizing of content if scrollbar is present</p> </div> <footer class="footline"> </footer> </article> <section> <h1 class="a11y-only">Subsections of Tests</h1> <article class="default"> <header class="headline"> </header> <h1 id="attachments-shortcode-test">Attachments Shortcode Test</h1> <p>Our attachment shortcode is a source of pleasure…</p> <div class="children children-h2 children-sort-"> <h2><a href="../tests/attach/attach1/index.html">Attachments Branch Test</a></h2><p> Attachments hugo.txt (20 B) </p> <h2><a href="../tests/attach/attach2/index.html">Attachments Leaf Test</a></h2><p> Attachments hugo.txt (20 B) </p> <h2><a href="../tests/attach/attach3/index.html">Attachments Page Test</a></h2><p> Attachments hugo.txt (20 B) </p> </div> <footer class="footline"> </footer> </article> <section> <h1 class="a11y-only">Subsections of Attachments Shortcode Test</h1> <article class="default"> <header class="headline"> </header> <h1 id="attachments-branch-test">Attachments Branch Test</h1> <div class="box attachments cstyle transparent"> <div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div> <ul class="box-content attachments-files"> <li><a href="../tests/attach/attach1/_index.en.files/hugo.txt">hugo.txt</a> (20 B)</li> </ul> </div> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="attachments-leaf-test">Attachments Leaf Test</h1> <div class="box attachments cstyle transparent"> <div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div> <ul class="box-content attachments-files"> <li><a href="../tests/attach/attach2/index.en.files/hugo.txt">hugo.txt</a> (20 B)</li> </ul> </div> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="attachments-page-test">Attachments Page Test</h1> <div class="box attachments cstyle transparent"> <div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div> <ul class="box-content attachments-files"> <li><a href="../tests/attach/attach3.en.files/hugo.txt">hugo.txt</a> (20 B)</li> </ul> </div> <footer class="footline"> </footer> </article> </section> <article class="default"> <header class="headline"> </header> <h1 id="chapters">Chapters</h1> <p>Start your success story. Now!</p> <footer class="footline"> </footer> </article> <section> <h1 class="a11y-only">Subsections of Chapters</h1> <article class="default"> <header class="headline"> </header> <h1 id="1">1</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="10">10</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="11">11</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="12">12</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="13">13</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="14">14</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="15">15</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="16">16</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="17">17</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="18">18</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="19">19</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="2">2</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="20">20</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="21">21</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="22">22</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="23">23</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="24">24</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="25">25</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="26">26</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="27">27</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="28">28</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="29">29</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="3">3</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="30">30</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="4">4</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="5">5</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="6">6</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="7">7</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="8">8</h1> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="9">9</h1> <footer class="footline"> </footer> </article> </section> <article class="default"> <header class="headline"> </header> <h1 id="code">Code</h1> <p>Some testing for different styles used in syntax highlighting and preformatted blocks.</p> <h2 id="inline-code">Inline Code</h2> <p><code>This is some very long inline code. Where does it wrap?</code></p> <p>What about wrapping short inline code if multiple sections are written <code>side</code> <code>by</code> <code>side</code>?</p> <p>What about wrapping short inline code if multiple sections are written <code>side</code>/<code>by</code>/<code>side</code>?</p> <p>What about wrapping long inline code if multiple sections are written <code>side567</code> <code>by34567</code> <code>side567</code>?</p> <p>What about wrapping long inline code if multiple sections are written <code>side567</code>/<code>by34567</code>/<code>side567</code>?</p> <p>Can we just use a <code>simple HTML element </code>?</p> <h2 id="block-code">Block Code</h2> <pre tabindex="0"><code>Code fences without any selected language </code></pre><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"well"</span><span class="p">:</span> <span class="s2">"some JSON in codefences in here"</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><pre><code>{ "well": "some JSON in HTML elements here" } </code></pre> <pre tabindex="0"><code class="language-jsonxmylmsl" data-lang="jsonxmylmsl">{ "well": "Code fences with non existing language" } </code></pre><h2 id="block-preformatted">Block Preformatted</h2> <pre><code>Some preformatted stuff with markdown indentation </code></pre> <pre> Some preformatted stuff in HTML elements </pre> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="images">Images</h1> <p>Some testing for different styles of image links.</p> <h2 id="markdown">Markdown</h2> <h3 id="resource-svg">Resource SVG</h3> <p> <a href="#image-60e251c5a052248dfebe5d2a3e915a4f" class="lightbox-link"> <img src="../tests/images/test.svg?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy"> </a> <a href="javascript:history.back();" class="lightbox" id="image-60e251c5a052248dfebe5d2a3e915a4f"> <img src="../tests/images/test.svg?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy"> </a></p> <h3 id="relative-to-page">Relative to page</h3> <p> <a href="#image-53a0c141f00b69138aa4a9e5c1e98030" class="lightbox-link"> <img src="../tests/images/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy"> </a> <a href="javascript:history.back();" class="lightbox" id="image-53a0c141f00b69138aa4a9e5c1e98030"> <img src="../tests/images/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy"> </a></p> <h3 id="relative-to-page-up-level">Relative to page up level</h3> <p> <a href="#image-6369d882d4e0a135a62c4a4b92254c00" class="lightbox-link"> <img src="../tests/images/../images/magic.gif?classes=shadow&height=50px" alt="Magic" class="shadow" style="height: 50px; width: auto;" loading="lazy"> </a> <a href="javascript:history.back();" class="lightbox" id="image-6369d882d4e0a135a62c4a4b92254c00"> <img src="../tests/images/../images/magic.gif?classes=shadow&height=50px" alt="Magic" class="lightbox-image" loading="lazy"> </a></p> <h3 id="static-svg">Static SVG</h3> <p> <a href="#image-86560448da04550f93d48804cd4442cc" class="lightbox-link"> <img src="../images/logo.svg?classes=shadow&height=50px" alt="Logo" class="shadow" style="height: 50px; width: auto;" loading="lazy"> </a> <a href="javascript:history.back();" class="lightbox" id="image-86560448da04550f93d48804cd4442cc"> <img src="../images/logo.svg?classes=shadow&height=50px" alt="Logo" class="lightbox-image" loading="lazy"> </a></p> <h3 id="external-fully-qualified">External fully qualified</h3> <p> <a href="#image-b813c39c146fb1ad05726ede4ea0dd6b" class="lightbox-link"> <img src="https://octodex.github.com/images/minion.png?classes=shadow&height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy"> </a> <a href="javascript:history.back();" class="lightbox" id="image-b813c39c146fb1ad05726ede4ea0dd6b"> <img src="https://octodex.github.com/images/minion.png?classes=shadow&height=50px" alt="Minion" class="lightbox-image" loading="lazy"> </a></p> <h3 id="external-without-scheme">External without scheme</h3> <p> <a href="#image-9ac9d9c0099425024f7c1794b73f234b" class="lightbox-link"> <img src="//octodex.github.com/images/minion.png?classes=shadow&height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy"> </a> <a href="javascript:history.back();" class="lightbox" id="image-9ac9d9c0099425024f7c1794b73f234b"> <img src="//octodex.github.com/images/minion.png?classes=shadow&height=50px" alt="Minion" class="lightbox-image" loading="lazy"> </a></p> <h3 id="external-without-scheme-and-scheme-separator">External without scheme and scheme separator</h3> <p> <a href="#image-c30a005f8d266c06a4a0d9370cf9a95f" class="lightbox-link"> <img src="../tests/images/octodex.github.com/images/minion.png?classes=shadow&height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy"> </a> <a href="javascript:history.back();" class="lightbox" id="image-c30a005f8d266c06a4a0d9370cf9a95f"> <img src="../tests/images/octodex.github.com/images/minion.png?classes=shadow&height=50px" alt="Minion" class="lightbox-image" loading="lazy"> </a></p> <h2 id="html">HTML</h2> <h3 id="resource-svg-1">Resource SVG</h3> <p><img src="../tests/images/test.svg?classes=shadow"></p> <h3 id="relative-to-page-1">Relative to page</h3> <p><img src="../tests/images/magic.gif?classes=shadow"></p> <h3 id="relative-to-page-up-level-1">Relative to page up level</h3> <p><img src="../tests/images/../images/magic.gif?classes=shadow&height=50px"></p> <h3 id="static-svg-1">Static SVG</h3> <p><img src="../images/logo.svg?classes=shadow&height=50px"></p> <h3 id="external-fully-qualified-1">External fully qualified</h3> <p><img src="https://octodex.github.com/images/minion.png?classes=shadow&height=50px"></p> <h3 id="external-without-scheme-1">External without scheme</h3> <p><img src="//octodex.github.com/images/minion.png?classes=shadow&height=50px"></p> <h3 id="external-without-scheme-and-scheme-separator-1">External without scheme and scheme separator</h3> <p><img src="../tests/images/octodex.github.com/images/minion.png?classes=shadow&height=50px"></p> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="lists">Lists</h1> <h2 id="plain">Plain</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <p>two</p> <p>and a half</p> </li> <li> <p>three</p> </li> </ul> <h2 id="attachments">Attachments</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <div class="box attachments cstyle blue"> <div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div> <ul class="box-content attachments-files"> </ul> </div> <div class="box attachments cstyle blue"> <div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div> <ul class="box-content attachments-files"> </ul> </div> </li> <li> <p>three</p> </li> </ul> <h2 id="badge">Badge</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Awesome</span></span> </p> <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Awesome</span></span> </li> <li> <p>three</p> </li> </ul> <h2 id="button">Button</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <p> <span class="btn cstyle warning"> <a href="https://gohugo.io/" target="_blank"> <i class="fa-fw fas fa-dragon"></i> Get Hugo </a> </span> </p> <span class="btn cstyle warning"> <a href="https://gohugo.io/" target="_blank"> <i class="fa-fw fas fa-dragon"></i> Get Hugo </a> </span> </li> <li> <p>three</p> </li> </ul> <h2 id="children">Children</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <ul class="children children-li children-sort-weight"> </ul> <ul class="children children-li children-sort-weight"> </ul> </li> <li> <p>three</p> </li> </ul> <h2 id="expand">Expand</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <div class="expand"> <input type="checkbox" id="expand-8e6d800798b412e4b368608c9a74f2b7" aria-controls="expandcontent-8e6d800798b412e4b368608c9a74f2b7" > <label class="expand-label" for="expand-8e6d800798b412e4b368608c9a74f2b7" > <i class="fas fa-chevron-down"></i> <i class="fas fa-chevron-right"></i> Expand me… </label> <div id="expandcontent-8e6d800798b412e4b368608c9a74f2b7" class="expand-content"> <p> Thank you!</div> </div> <div class="expand"> <input type="checkbox" id="expand-cc3cc05f7dcf46176a606156d9de8c41" aria-controls="expandcontent-cc3cc05f7dcf46176a606156d9de8c41" > <label class="expand-label" for="expand-cc3cc05f7dcf46176a606156d9de8c41" > <i class="fas fa-chevron-down"></i> <i class="fas fa-chevron-right"></i> Expand me… </label> <div id="expandcontent-cc3cc05f7dcf46176a606156d9de8c41" class="expand-content"> <p> Thank you!</div> </div> </li> <li> <p>three</p> </li> </ul> <h2 id="icon">Icon</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <p> <i class="fa-fw fas fa-exclamation-triangle"></i> </p> <i class="fa-fw fas fa-exclamation-triangle"></i> </li> <li> <p>three</p> </li> </ul> <h2 id="include">Include</h2> <ul> <li>one</li> <li>two</li> <li></li> </ul> <p>You can add standard markdown syntax:</p> <ul> <li>multiple paragraphs</li> <li>bullet point lists</li> <li><em>emphasized</em>, <strong>bold</strong> and even <strong><em>bold emphasized</em></strong> text</li> <li><a href="https://example.com" target="_blank">links</a></li> <li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code </span></span></code></pre></div><blockquote> <p>the possibilities are endless (almost - including other shortcodes may or may not work) (almost - including other shortcodes may or may not work)</p> </blockquote> <p>You can add standard markdown syntax:</p> <ul> <li>multiple paragraphs</li> <li>bullet point lists</li> <li><em>emphasized</em>, <strong>bold</strong> and even <strong><em>bold emphasized</em></strong> text</li> <li><a href="https://example.com" target="_blank">links</a></li> <li>etc.<sup id="fnref1:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code </span></span></code></pre></div><blockquote> <p>the possibilities are endless (almost - including other shortcodes may or may not work) (almost - including other shortcodes may or may not work)</p> </blockquote> <ul> <li>three</li> </ul> <h2 id="math">Math</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <span class="math align-center"> $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ </span> <span class="math align-center"> $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ </span> </li> <li> <p>three</p> </li> </ul> <h2 id="mermaid">Mermaid</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <div class="mermaid align-center zoom"> graph LR; If --> Then Then --> Else </div> <div class="mermaid align-center zoom"> graph LR; If --> Then Then --> Else </div> </li> <li> <p>three</p> </li> </ul> <h2 id="notice">Notice</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <div class="box notices cstyle primary"> <div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> There may be pirates</div> <div class="box-content"> <p>It is all about the boxes.</p> </div> </div> <div class="box notices cstyle primary"> <div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> There may be pirates</div> <div class="box-content"> <p>It is all about the boxes.</p> </div> </div> </li> <li> <p>three</p> </li> </ul> <h2 id="siteparam">Siteparam</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <p><a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/" target="_blank">https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/</a></p> <p><a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/" target="_blank">https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/</a></p> </li> <li> <p>three</p> </li> </ul> <h2 id="tabs">Tabs</h2> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <div class="tab-panel cstyle default" data-tab-group="51d512c188263842457a8367f7754ef0"> <div class="tab-nav"> <button data-tab-item="python" class="tab-nav-button active" onclick="switchTab('51d512c188263842457a8367f7754ef0','python')" > <div><div>python</div></div> </button> <button data-tab-item="bash" class="tab-nav-button" onclick="switchTab('51d512c188263842457a8367f7754ef0','bash')" > <div><div>bash</div></div> </button> </div> <div class="tab-content"> <div data-tab-item="python" class="tab-content-text active" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span> </span></span></code></pre></div></div> <div data-tab-item="bash" class="tab-content-text" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">"Hello World!"</span> </span></span></code></pre></div></div> </div> </div> <div class="tab-panel cstyle default" data-tab-group="809d27ceb0978965381bfccfa9114d32"> <div class="tab-nav"> <button data-tab-item="python" class="tab-nav-button active" onclick="switchTab('809d27ceb0978965381bfccfa9114d32','python')" > <div><div>python</div></div> </button> <button data-tab-item="bash" class="tab-nav-button" onclick="switchTab('809d27ceb0978965381bfccfa9114d32','bash')" > <div><div>bash</div></div> </button> </div> <div class="tab-content"> <div data-tab-item="python" class="tab-content-text active" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span> </span></span></code></pre></div></div> <div data-tab-item="bash" class="tab-content-text" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">"Hello World!"</span> </span></span></code></pre></div></div> </div> </div> </li> <li> <p>three</p> </li> </ul> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p>Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a Latin expression that is used in English to mean “and other similar things”, or “and so forth” <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a> <a href="#fnref1:1" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> </ol> </div> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="tables">Tables</h1> <h2 id="lines-and-paragraphs">Lines and Paragraphs</h2> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><p>HTML Paragraph I</p><p>HTML Paragraph II</p></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td>HTML Line I<br>HTML Line II</td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td>HTML Line I<br><br>HTML Line II</td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td>Markdown Multicell I</td> </tr> <tr> <td>Markdown Multicell II</td> </tr> </tbody> </table> <h2 id="headings">Headings</h2> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><h1>HTML h1</h1></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><h2>HTML h2</h2></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><h3>HTML h3</h3></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><h4>HTML h4</h4></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><h5>HTML h5</h5></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><h6>HTML h6</h6></td> </tr> </tbody> </table> <h2 id="lists">Lists</h2> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><ul><li>HTML List Item I</li><li>HTML List Item II</li></ul></td> </tr> </tbody> </table> <h2 id="code">Code</h2> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><code>Markdown Inline</code></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><code>HTML Inline</code></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><pre><code>HTML Block</code></pre></td> </tr> </tbody> </table> <h2 id="links--images">Links & Images</h2> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><a href="https://example.com" target="_blank">Markdown Link</a></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><a href="https://example.com" target="_blank">https://example.com</a></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td> <a href="#image-c2ed9336bb6912c3b0e01dd6bfb90d60" class="lightbox-link"> <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&width=24px" alt="Spock" class="shadow" style="height: auto; width: 24px;" loading="lazy"> </a> <a href="javascript:history.back();" class="lightbox" id="image-c2ed9336bb6912c3b0e01dd6bfb90d60"> <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&width=24px" alt="Spock" class="lightbox-image" loading="lazy"> </a></td> </tr> </tbody> </table> <h2 id="other">Other</h2> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><blockquote>HTML Blockquote</blockquote></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><blockquote><p>HTML Blockquote with nested Paragraph</p></blockquote></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><hr></td> </tr> </tbody> </table> <h2 id="shortcodes">Shortcodes</h2> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><span class="badge cstyle default"><span class="badge-content">Important</span></span></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td> <span class="btn cstyle transparent"> <a href="https://gohugo.io/" target="_blank"> Get Hugo </a> </span></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td> <div class="expand"> <input type="checkbox" id="expand-2c4faf709a2146da1daab31a4fc6b254" aria-controls="expandcontent-2c4faf709a2146da1daab31a4fc6b254" > <label class="expand-label" for="expand-2c4faf709a2146da1daab31a4fc6b254" > <i class="fas fa-chevron-down"></i> <i class="fas fa-chevron-right"></i> Expand me… </label> <div id="expandcontent-2c4faf709a2146da1daab31a4fc6b254" class="expand-content"> <p> Thank you!</div> </div></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td> <i class="fa-fw fas fa-heart"></i></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> <p>You can add standard markdown syntax:</p> <ul> <li>multiple paragraphs</li> <li>bullet point lists</li> <li><em>emphasized</em>, <strong>bold</strong> and even <strong><em>bold emphasized</em></strong> text</li> <li><a href="https://example.com" target="_blank">links</a></li> <li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code </span></span></code></pre></div><blockquote> <p>the possibilities are endless (almost - including other shortcodes may or may not work) (almost - including other shortcodes may or may not work) |</p> </blockquote> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td> <span class="math align-center"> $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ </span></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td> <span class="math align-center">$\sqrt{3}$</span></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td> <div class="mermaid align-center zoom"> graph LR; If --> Then Then --> Else </div></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td><a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/" target="_blank">https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/</a></td> </tr> </tbody> </table> <table> <thead> <tr> <th>i</th> </tr> </thead> <tbody> <tr> <td> <div class="tab-panel cstyle default" data-tab-group="2b6580b526548c900b80c0d36a88a666"> <div class="tab-nav"> <button data-tab-item="python" class="tab-nav-button active" onclick="switchTab('2b6580b526548c900b80c0d36a88a666','python')" > <div><div>python</div></div> </button> <button data-tab-item="bash" class="tab-nav-button" onclick="switchTab('2b6580b526548c900b80c0d36a88a666','bash')" > <div><div>bash</div></div> </button> </div> <div class="tab-content"> <div data-tab-item="python" class="tab-content-text active" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span> </span></span></code></pre></div></div> <div data-tab-item="bash" class="tab-content-text" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">"Hello World!"</span> </span></span></code></pre></div></div> </div> </div></td> </tr> </tbody> </table> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p>Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a Latin expression that is used in English to mean “and other similar things”, or “and so forth” <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> </ol> </div> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="vscode-front-matter">VSCode Front Matter</h1> <h2 id="empty-properties">Empty Properties</h2> <div class="box attachments cstyle transparent"> <div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div> <ul class="box-content attachments-files"> </ul> </div> <span class="badge cstyle default"><span class="badge-content"></span></span> <span class="btn cstyle transparent"> <button type="button"> </button> </span> <ul class="children children-li children-sort-"> </ul> <div class="expand"> <input type="checkbox" id="expand-00aaee89189031b4cd046c318cac5d05" aria-controls="expandcontent-00aaee89189031b4cd046c318cac5d05" > <label class="expand-label" for="expand-00aaee89189031b4cd046c318cac5d05" > <i class="fas fa-chevron-down"></i> <i class="fas fa-chevron-right"></i> Expand me… </label> <div id="expandcontent-00aaee89189031b4cd046c318cac5d05" class="expand-content"> <p> </div> </div> <p>aa</p> <span class="math align-center"></span> <div class="mermaid align-center zoom"></div> <div class="box notices cstyle default"> <div class="box-label"></div> <div class="box-content"> <p> </div> </div> <div class="sc-openapi-wrapper is-loading helper-loading-container"> <div class="sc-openapi-container" id="openapi-d5fe3b8088ed69ac3f4ebc713c3563a3" openapi-url="" ></div> </div> <div class="tab-panel cstyle default" data-tab-group="879c95550bab44e7a6d7e725f624357c"> <div class="tab-nav"> <button data-tab-item="" class="tab-nav-button active" onclick="switchTab('879c95550bab44e7a6d7e725f624357c','')" > <div><div></div></div> </button> <button data-tab-item="" class="tab-nav-button" onclick="switchTab('879c95550bab44e7a6d7e725f624357c','')" > <div><div></div></div> </button> </div> <div class="tab-content"> <div data-tab-item="" class="tab-content-text active" > <p> </div> <div data-tab-item="" class="tab-content-text" > <p> </div> </div> </div> <footer class="footline"> </footer> </article> <article class="default"> <header class="headline"> </header> <h1 id="width">Width</h1> <div class="box notices cstyle primary"> <div class="box-label"></div> <div class="box-content"> <p>Make a visible block</p> </div> </div> <div class="box notices cstyle primary"> <div class="box-label"></div> <div class="box-content"> <p>And another one</p> </div> </div> <footer class="footline"> </footer> </article> </section> </div> </main> </div> <script src="../js/clipboard.min.js?1685918539" defer></script> <script src="../js/perfect-scrollbar.min.js?1685918539" defer></script> <script> function useMathJax( config ){ if( !Object.assign ){ return; } window.MathJax = Object.assign( window.MathJax || {}, { loader: { load: ['[tex]/mhchem'] }, startup: { elements: [ '.math' ] }, tex: { inlineMath: [ ['$', '$'], ['\\(', '\\)'] ] }, options: { enableMenu: false } }, config ); } useMathJax( JSON.parse("{}") ); </script> <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1685918539"></script> <script src="../js/d3/d3-color.min.js?1685918539" defer></script> <script src="../js/d3/d3-dispatch.min.js?1685918539" defer></script> <script src="../js/d3/d3-drag.min.js?1685918539" defer></script> <script src="../js/d3/d3-ease.min.js?1685918539" defer></script> <script src="../js/d3/d3-interpolate.min.js?1685918539" defer></script> <script src="../js/d3/d3-selection.min.js?1685918539" defer></script> <script src="../js/d3/d3-timer.min.js?1685918539" defer></script> <script src="../js/d3/d3-transition.min.js?1685918539" defer></script> <script src="../js/d3/d3-zoom.min.js?1685918539" defer></script> <script src="../js/mermaid.min.js?1685918539" defer></script> <script> window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }"); </script> <script>window.noZensmooth = true;</script> <script src="../js/swagger-ui/swagger-ui-bundle.js?1685918539" defer></script> <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1685918539" defer></script> <script> window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1685918539", assetsBuster: 1685918539 }; </script> <script src="../js/theme.js?1685918539" defer></script> </body> </html>