hugo-theme-relearn/tests/index.print.html
2023-06-16 19:15:05 +00:00

2144 lines
62 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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.113.0">
<meta name="generator" content="Relearn 5.16.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?1686942896" 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?1686942898" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1686942898" rel="stylesheet"></noscript>
<link href="../css/nucleus.css?1686942898" rel="stylesheet">
<link href="../css/auto-complete.css?1686942898" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1686942898" rel="stylesheet"></noscript>
<link href="../css/perfect-scrollbar.min.css?1686942898" rel="stylesheet">
<link href="../css/fonts.css?1686942898" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1686942898" rel="stylesheet"></noscript>
<link href="../css/theme.css?1686942898" rel="stylesheet">
<link href="../css/theme-auto.css?1686942898" rel="stylesheet" id="variant-style">
<link href="../css/variant.css?1686942898" rel="stylesheet">
<link href="../css/print.css?1686942898" rel="stylesheet" media="print">
<link href="../css/format-print.css?1686942898" rel="stylesheet">
<link href="../css/ie.css?1686942898" rel="stylesheet">
<script src="../js/url.js?1686942898"></script>
<script src="../js/variant.js?1686942898"></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"> &gt; </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&hellip;</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">&#34;well&#34;</span><span class="p">:</span> <span class="s2">&#34;some JSON in codefences in here&#34;</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">{
&#34;well&#34;: &#34;Code fences with non existing language&#34;
}
</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>
<h2 id="nested-shortcode">Nested Shortcode</h2>
<h3 id="1-shortcode">1 Shortcode</h3>
<h4 id="heading">%%</h4>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="ln">2</span><span class="cl"> <span class="nt">&#34;Hello&#34;</span><span class="p">:</span> <span class="s2">&#34;World&#34;</span> <span class="s2">&#34;Hello&#34;</span><span class="p">:</span> <span class="s2">&#34;World&#34;</span> <span class="s2">&#34;Hello&#34;</span><span class="p">:</span> <span class="s2">&#34;World&#34;</span>
</span></span><span class="line"><span class="ln">3</span><span class="cl"><span class="p">}</span></span></span></code></pre></div>
<h4 id="heading-1">&lt;&gt;</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<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">&#34;Hello&#34;</span><span class="p">:</span> <span class="s2">&#34;World&#34;</span> <span class="s2">&#34;Hello&#34;</span><span class="p">:</span> <span class="s2">&#34;World&#34;</span> <span class="s2">&#34;Hello&#34;</span><span class="p">:</span> <span class="s2">&#34;World&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></td></tr></table>
</div>
</div>
<h3 id="2-shortcodes">2 Shortcodes</h3>
<h4 id="-">%% %%</h4>
<div class="tab-panel" data-tab-group="bf8eb844cc839f4ceab261b4b8847e98">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('bf8eb844cc839f4ceab261b4b8847e98','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="--1">%% &lt;&gt;</h4>
<div class="tab-panel" data-tab-group="2d59909299bf18abcd1de1abee84e42e">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('2d59909299bf18abcd1de1abee84e42e','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="--2">&lt;&gt; %%</h4>
<div class="tab-panel" data-tab-group="b5469c0a72fb1dc426d3c71677f8f62d">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('b5469c0a72fb1dc426d3c71677f8f62d','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="--3">&lt;&gt; &lt;&gt;</h4>
<div class="tab-panel" data-tab-group="349ba99d41c6c295ec12f4af194dec39">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('349ba99d41c6c295ec12f4af194dec39','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 id="3-shortcodes">3 Shortcodes</h3>
<h4 id="--">%% %% %%</h4>
<div class="tab-panel" data-tab-group="0468fea711f8ba3f4c6f58d508b6b149">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('0468fea711f8ba3f4c6f58d508b6b149','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="---1">%% %% &lt;&gt;</h4>
<div class="tab-panel" data-tab-group="6ac6e7ab0275747c2fe9d2d3d8490d08">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('6ac6e7ab0275747c2fe9d2d3d8490d08','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="---2">%% &lt;&gt; %%</h4>
<div class="tab-panel" data-tab-group="94f895b553f3ecbf41df650bd6cbaebf">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('94f895b553f3ecbf41df650bd6cbaebf','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="---3">%% &lt;&gt; &lt;&gt;</h4>
<div class="tab-panel" data-tab-group="c253ef9fe33b0aa88e40ec8b6d005bb3">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('c253ef9fe33b0aa88e40ec8b6d005bb3','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="---4">&lt;&gt; %% %%</h4>
<div class="tab-panel" data-tab-group="a0322b4d878b3236247cc97b4aca3fde">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('a0322b4d878b3236247cc97b4aca3fde','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="---5">&lt;&gt; %% &lt;&gt;</h4>
<div class="tab-panel" data-tab-group="dbae586aab6af180d76dcab70048835b">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('dbae586aab6af180d76dcab70048835b','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="---6">&lt;&gt; &lt;&gt; %%</h4>
<div class="tab-panel" data-tab-group="32da4d4c0dad9a8e17e237965bb2b950">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('32da4d4c0dad9a8e17e237965bb2b950','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="---7">&lt;&gt; &lt;&gt; &lt;&gt;</h4>
<div class="tab-panel" data-tab-group="26314d8aaeea01fa71cb4783ddda7ac8">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('26314d8aaeea01fa71cb4783ddda7ac8','json')"
>
<div>
<div class="tab-nav-hidden">json</div>
<div class="tab-nav-text">json</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>my code<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
<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-c3226cf221f75f53f4538a8ff5e3eb4f" 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-c3226cf221f75f53f4538a8ff5e3eb4f">
<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-b2039977939fc5aefaf76282f3a5ac41" 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-b2039977939fc5aefaf76282f3a5ac41">
<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-ec1927dfe275367092aba966126776da" class="lightbox-link">
<img src="../tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="shadow" style="height: 50px; width: auto;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-ec1927dfe275367092aba966126776da">
<img src="../tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="lightbox-image" loading="lazy">
</a></p>
<h3 id="static-svg">Static SVG</h3>
<p>
<a href="#image-2bc5ede5554fb6d7e958c2aab1743b2e" class="lightbox-link">
<img src="../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="shadow" style="height: 50px; width: auto;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-2bc5ede5554fb6d7e958c2aab1743b2e">
<img src="../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="lightbox-image" loading="lazy">
</a></p>
<h3 id="external-fully-qualified">External fully qualified</h3>
<p>
<a href="#image-394924674fa0d28b0bd81060a61d2355" class="lightbox-link">
<img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-394924674fa0d28b0bd81060a61d2355">
<img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
</a></p>
<h3 id="external-without-scheme">External without scheme</h3>
<p>
<a href="#image-e6063f4a4e0db035e31fc5d36a3e340d" class="lightbox-link">
<img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-e6063f4a4e0db035e31fc5d36a3e340d">
<img src="//octodex.github.com/images/minion.png?classes=shadow&amp;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-5462770785013bca490e0a7b3c2dec7e" class="lightbox-link">
<img src="../tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-5462770785013bca490e0a7b3c2dec7e">
<img src="../tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;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-03f7ef59ac1c3141e1cd61ccdb87b16a" aria-controls="expandcontent-03f7ef59ac1c3141e1cd61ccdb87b16a" >
<label class="expand-label" for="expand-03f7ef59ac1c3141e1cd61ccdb87b16a" >
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-right"></i>
Expand me&hellip;
</label>
<div id="expandcontent-03f7ef59ac1c3141e1cd61ccdb87b16a" class="expand-content">
<p>
Thank you!</div>
</div>
<div class="expand">
<input type="checkbox" id="expand-1032c3cd77d52a1d1693db9502814be4" aria-controls="expandcontent-1032c3cd77d52a1d1693db9502814be4" >
<label class="expand-label" for="expand-1032c3cd77d52a1d1693db9502814be4" >
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-right"></i>
Expand me&hellip;
</label>
<div id="expandcontent-1032c3cd77d52a1d1693db9502814be4" 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 --&gt; Then
Then --&gt; Else
</div>
<div class="mermaid align-center zoom">
graph LR;
If --&gt; Then
Then --&gt; 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" data-tab-group="55a6250dea8028ec6295b69c1f86cf4b">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="python"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('55a6250dea8028ec6295b69c1f86cf4b','python')"
>
<div>
<div class="tab-nav-hidden">python</div>
<div class="tab-nav-text">python</div>
</div>
</button>
<button
data-tab-item="bash"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('55a6250dea8028ec6295b69c1f86cf4b','bash')"
>
<div>
<div class="tab-nav-hidden">bash</div>
<div class="tab-nav-text">bash</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="python"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<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">&#34;Hello World!&#34;</span><span class="p">)</span>
</span></span></code></pre></div></div>
</div>
<div
data-tab-item="bash"
class="tab-content tab-panel-style cstyle initial">
<div 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">&#34;Hello World!&#34;</span>
</span></span></code></pre></div></div>
</div>
</div>
</div>
<div class="tab-panel" data-tab-group="a2cc097f9bbed8b4d0f93c844004b9ad">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="python"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('a2cc097f9bbed8b4d0f93c844004b9ad','python')"
>
<div>
<div class="tab-nav-hidden">python</div>
<div class="tab-nav-text">python</div>
</div>
</button>
<button
data-tab-item="bash"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('a2cc097f9bbed8b4d0f93c844004b9ad','bash')"
>
<div>
<div class="tab-nav-hidden">bash</div>
<div class="tab-nav-text">bash</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="python"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<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">&#34;Hello World!&#34;</span><span class="p">)</span>
</span></span></code></pre></div></div>
</div>
<div
data-tab-item="bash"
class="tab-content tab-panel-style cstyle initial">
<div 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">&#34;Hello World!&#34;</span>
</span></span></code></pre></div></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 &ldquo;and other similar things&rdquo;, or &ldquo;and so forth&rdquo;&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a>&#160;<a href="#fnref1:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</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 &amp; 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-403595454c1ab2b10cca61c5d622659e" class="lightbox-link">
<img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="shadow" style="height: auto; width: 24px;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-403595454c1ab2b10cca61c5d622659e">
<img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;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-d6fbbacf25d4f8a9ba0da8d51bb7ec81" aria-controls="expandcontent-d6fbbacf25d4f8a9ba0da8d51bb7ec81" >
<label class="expand-label" for="expand-d6fbbacf25d4f8a9ba0da8d51bb7ec81" >
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-right"></i>
Expand me&hellip;
</label>
<div id="expandcontent-d6fbbacf25d4f8a9ba0da8d51bb7ec81" 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 --&gt; Then
Then --&gt; 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" data-tab-group="70e2d9bc0eb3cd81d692160e2fbd74e3">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="python"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('70e2d9bc0eb3cd81d692160e2fbd74e3','python')"
>
<div>
<div class="tab-nav-hidden">python</div>
<div class="tab-nav-text">python</div>
</div>
</button>
<button
data-tab-item="bash"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('70e2d9bc0eb3cd81d692160e2fbd74e3','bash')"
>
<div>
<div class="tab-nav-hidden">bash</div>
<div class="tab-nav-text">bash</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="python"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<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">&#34;Hello World!&#34;</span><span class="p">)</span>
</span></span></code></pre></div></div>
</div>
<div
data-tab-item="bash"
class="tab-content tab-panel-style cstyle initial">
<div 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">&#34;Hello World!&#34;</span>
</span></span></code></pre></div></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 &ldquo;and other similar things&rdquo;, or &ldquo;and so forth&rdquo;&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</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-d8bccb1fc85be6cb30ec330eed679826" aria-controls="expandcontent-d8bccb1fc85be6cb30ec330eed679826" >
<label class="expand-label" for="expand-d8bccb1fc85be6cb30ec330eed679826" >
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-right"></i>
Expand me&hellip;
</label>
<div id="expandcontent-d8bccb1fc85be6cb30ec330eed679826" 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-bdcb76ba88f982c6758752672f383a6c"
openapi-url=""
></div>
</div>
<div class="tab-panel" data-tab-group="2742bd4a685c14991b50b5ccef6dfb5b">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item=""
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('2742bd4a685c14991b50b5ccef6dfb5b','')"
>
<div>
<div class="tab-nav-hidden">&#8203;</div>
<div class="tab-nav-text">&#8203;</div>
</div>
</button>
<button
data-tab-item=""
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('2742bd4a685c14991b50b5ccef6dfb5b','')"
>
<div>
<div class="tab-nav-hidden">&#8203;</div>
<div class="tab-nav-text">&#8203;</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item=""
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<p>
</div>
</div>
<div
data-tab-item=""
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<p>
</div>
</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?1686942898" defer></script>
<script src="../js/perfect-scrollbar.min.js?1686942898" 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?1686942898"></script>
<script src="../js/d3/d3-color.min.js?1686942898" defer></script>
<script src="../js/d3/d3-dispatch.min.js?1686942898" defer></script>
<script src="../js/d3/d3-drag.min.js?1686942898" defer></script>
<script src="../js/d3/d3-ease.min.js?1686942898" defer></script>
<script src="../js/d3/d3-interpolate.min.js?1686942898" defer></script>
<script src="../js/d3/d3-selection.min.js?1686942898" defer></script>
<script src="../js/d3/d3-timer.min.js?1686942898" defer></script>
<script src="../js/d3/d3-transition.min.js?1686942898" defer></script>
<script src="../js/d3/d3-zoom.min.js?1686942898" defer></script>
<script src="../js/mermaid.min.js?1686942898" defer></script>
<script>
window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
</script>
<script>window.noZensmooth = true;</script>
<script src="../js/swagger-ui/swagger-ui-bundle.js?1686942898" defer></script>
<script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1686942898" defer></script>
<script>
window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1686942898", assetsBuster: 1686942898 };
</script>
<script src="../js/theme.js?1686942898" defer></script>
</body>
</html>