nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 15:57:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
hugo-theme-relearn/pir/cont/markdown/index.html
McShelby 895d4436c2 deploy: 50165ddc93
2024-09-04 19:40:19 +00:00

1389 lines
120 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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="art-x-pir" dir="rtl" itemscope itemtype="http://schema.org/Article">
<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.134.0">
<meta name="generator" content="Relearn 6.3.0+tip">
<meta name="description" content="Let’s face it: Writ&#39;n rrrambl&#39;n fer th&#39; web be tiresome. WYSIWYG editors help alleviate this task, but they generally result &#39;n horr&#39;ble code, or worse yet, ugly web planks.">
<meta name="author" content="Sören Weber">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta name="twitter:title" content="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
<meta name="twitter:description" content="Let’s face it: Writ&#39;n rrrambl&#39;n fer th&#39; web be tiresome. WYSIWYG editors help alleviate this task, but they generally result &#39;n horr&#39;ble code, or worse yet, ugly web planks.">
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html">
<meta property="og:site_name" content="Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:title" content="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:description" content="Let’s face it: Writ&#39;n rrrambl&#39;n fer th&#39; web be tiresome. WYSIWYG editors help alleviate this task, but they generally result &#39;n horr&#39;ble code, or worse yet, ugly web planks.">
<meta property="og:locale" content="art_x_pir">
<meta property="og:type" content="article">
<meta property="article:section" content="Rambl&#39;n">
<meta property="article:tag" content="Content">
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="name" content="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
<meta itemprop="description" content="Let’s face it: Writ&#39;n rrrambl&#39;n fer th&#39; web be tiresome. WYSIWYG editors help alleviate this task, but they generally result &#39;n horr&#39;ble code, or worse yet, ugly web planks.">
<meta itemprop="wordCount" content="3070">
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="keywords" content="Content">
<title>Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme</title>
<link href="https://mcshelby.github.io/hugo-theme-relearn/cont/markdown/index.html" rel="alternate" hreflang="x-default">
<link href="https://mcshelby.github.io/hugo-theme-relearn/cont/markdown/index.html" rel="alternate" hreflang="en">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="art-x-pir">
<link href="/hugo-theme-relearn/pir/cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/pir/cont/markdown/index.print.html" rel="alternate" type="text/html" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/images/logo.svg?1725478813" rel="icon" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1725478813" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1725478813" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/nucleus.css?1725478813" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1725478813" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1725478813" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1725478813" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fonts.css?1725478813" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1725478813" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/theme.css?1725478813" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1725478813" rel="stylesheet" id="R-variant-style">
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1725478813" rel="stylesheet" id="R-variant-chroma-style">
<link href="/hugo-theme-relearn/css/variant.css?1725478813" rel="stylesheet">
<link href="/hugo-theme-relearn/css/print.css?1725478813" rel="stylesheet" media="print">
<script src="/hugo-theme-relearn/js/variant.js?1725478813"></script>
<script>
window.relearn = window.relearn || {};
window.relearn.relBasePath='..\/..\/..';
window.relearn.relBaseUri='..\/..\/..\/..';
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
window.relearn.disableAnchorCopy=false;
window.relearn.disableAnchorScrolling=false;
window.index_js_url="/hugo-theme-relearn/pir/index.search.js?1725478813";
// variant stuff
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', 'neon', 'learn', 'blue', 'green', 'red' ] );
// translations
window.T_Copy_to_clipboard = `Copy t' clipboard`;
window.T_Copied_to_clipboard = `Copied t' clipboard!`;
window.T_Copy_link_to_clipboard = `Copy link t' clipboard`;
window.T_Link_copied_to_clipboard = `Copied link t' clipboard!`;
window.T_Reset_view = `Rrreset view`;
window.T_View_reset = `View rrreset!`;
window.T_No_results_found = `No rrresults found fer "{0}"`;
window.T_N_results_found = `{1} rrresults found fer "{0}"`;
</script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support html disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/pir/cont/markdown/index.html">
<div id="R-body" class="default-animation">
<div id="R-body-overlay"></div>
<nav id="R-topbar">
<div class="topbar-wrapper">
<div class="topbar-sidebar-divider"></div>
<div class="topbar-area topbar-area-start" data-area="start">
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)"><i class="fa-fw fas fa-bars"></i></button>
</div>
<div class="topbar-button topbar-button-toc" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)"><i class="fa-fw fas fa-list-alt"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper"><nav class="TableOfContents">
<ul>
<li><a href="#standard-and-extensions">Standard an' Extensions</a></li>
<li><a href="#paragraphs">Paragraphs</a></li>
<li><a href="#headings">Head'ns</a></li>
<li><a href="#horizontal-rules">Horizontal Rules</a></li>
<li><a href="#blockquotes">Blockquotes</a>
<ul>
<li><a href="#quotations">Quotat'ns</a></li>
<li><a href="#github-styled-alerts">GitHub Styled Alerts</a></li>
<li><a href="#obsidian-styled-alerts">Obsidian Styled Alerts</a></li>
</ul>
</li>
<li><a href="#text-markers">Text Markers</a>
<ul>
<li><a href="#bold">Bold</a></li>
<li><a href="#italics">Italics</a></li>
<li><a href="#marked-text">Marked Text</a></li>
<li><a href="#inserted-text">Inserted Text</a></li>
<li><a href="#deleted-text">Deleted Text</a></li>
</ul>
</li>
<li><a href="#special-typesetting">Special Typesett'n</a>
<ul>
<li><a href="#text-substitution">Text Substitut'n</a></li>
<li><a href="#subscript-and-superscript">Subscript an' Superscript</a></li>
<li><a href="#keyboard-shortcuts">Keyboard Shortcuts</a></li>
</ul>
</li>
<li><a href="#lists">Lists</a>
<ul>
<li><a href="#unordered">Unordered</a></li>
<li><a href="#ordered">Ordered</a></li>
<li><a href="#tasks">Tasks</a></li>
<li><a href="#definitions">Definit'ns</a></li>
</ul>
</li>
<li><a href="#code">Code</a>
<ul>
<li><a href="#inline-code">Inline Code</a></li>
<li><a href="#indented-code-block">Indented Code Block</a></li>
<li><a href="#fenced-code-block">Fenced Code Block</a></li>
</ul>
</li>
<li><a href="#tables">Tables</a>
<ul>
<li><a href="#aligned-columns">Aligned Columns</a></li>
</ul>
</li>
<li><a href="#links">Links</a>
<ul>
<li><a href="#autolink">Autolink</a></li>
<li><a href="#basic-link">Basic Link</a></li>
<li><a href="#link-with-tooltip">Link wit' Tooltip</a></li>
<li><a href="#link-references">Link References</a></li>
<li><a href="#footnotes">Footnotes</a></li>
</ul>
</li>
<li><a href="#images">Images</a>
<ul>
<li><a href="#basic-images">Basic Images</a></li>
<li><a href="#image-with-tooltip">Image wit' Tooltip</a></li>
<li><a href="#image-references">Image References</a></li>
<li><a href="#image-effects">Image Effects</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Marrrkdown rules</span><meta itemprop="position" content="2"></li>
</ol>
<div class="topbar-area topbar-area-end" data-area="end">
<div class="topbar-button topbar-button-edit" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/markdown.pir.md" target="_self" title="Edit (CTRL&#43;ALT&#43;w)"><i class="fa-fw fas fa-pen"></i></a>
</div>
<div class="topbar-button topbar-button-print" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/cont/markdown/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)"><i class="fa-fw fas fa-print"></i></a>
</div>
<div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/cont/archetypes/index.html" title="Arrrchetypes (🡒)"><i class="fa-fw fas fa-chevron-left"></i></a>
</div>
<div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/cont/imageeffects/index.html" title="Image Effects (🡐)"><i class="fa-fw fas fa-chevron-right"></i></a>
</div>
<div class="topbar-button topbar-button-more" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Morrre"><i class="fa-fw fas fa-ellipsis-v"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper">
<div class="topbar-area topbar-area-more" data-area="more">
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="R-main-overlay"></div>
<main id="R-body-inner" class="highlightable default" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tag-a-taggs" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/tags/content/index.html">Content</a></li>
</ul>
</div>
</header>
<h1 id="marrrkdown-rules">Marrrkdown rules</h1>
<p>Let&rsquo;s face it: Writ'n rrrambl'n fer th' web be tiresome. WYSIWYG editors help alleviate this task, but they generally result 'n horr'ble code, or worse yet, ugly web planks.</p>
<p><strong>Marrrkdown</strong> be a better way t' write <strong>HTML</strong>, without all th' complexities an' ugliness that usually accompanies it.</p>
<p>Some o' th' key benefits be:</p>
<ol>
<li>Marrrkdown be simple t' learn, wit' minimal extra characters so it&rsquo;s also quicker t' write rrrambl'n.</li>
<li>Less chance o' errors when writ'n 'n Marrrkdown.</li>
<li>Produces valid HTML output.</li>
<li>Keeps th' rrrambl'n an' th' visual display separate, so ye cannot mess up th' look o' yer ship.</li>
<li>Write 'n any text editor or Marrrkdown applicat'n ye like.</li>
<li>Marrrkdown be a joy t' use!</li>
</ol>
<p>John Gruber, th' author o' Marrrkdown, puts it like this:</p>
<blockquote><p>Th' overrid'n design goal fer Markdown’s formatt'n rules be t' make it as read'ble as poss'ble. Th' idea be that a Markdown-formatted document should be publish'ble as-is, as plain text, without look'n like it’s been marked up wit' tags or formatt'n instruct'ns. While Markdown’s rules has been influenced by several exist'n text-to-HTML filters, th' single biggest source o' inspirat'n fer Markdown’s rules be th' format o' plain text email.
<cite>John Gruber</cite></p>
</blockquote>
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Smarrrt Arrrse
</div>
<div class="box-content">
<p><i class="fa-fw fas fa-bookmark"></i> Bookmark this plank fer easy future reference!</p>
</div>
</div>
<h2 id="standard-and-extensions">Standard an' Extensions</h2>
<p>If not otherwise noted, th' shown examples adhere t' th' <a href="https://commonmark.org/help/" rel="external" target="_self">Commonmark</a> standard. In addit'n th' theme supports th' follow'n extensions that <a href="https://gohugo.io/getting-started/configuration-markup/#goldmark" rel="external" target="_self">can be activated</a> 'n yer <code>hugo.toml</code> or be built into th' theme:</p>
<ul>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Extension on top o' standard Marrrkdown adher'n t' <a href="https://github.github.com/gfm/" rel="external" target="_self">GitHub Flavored Marrrkdown</a>.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content" style="background-color: #888cc4;">PHP</span></span> Extension on top o' standard Marrrkdown adher'n t' <a href="https://michelf.ca/projects/php-markdown/extra/" rel="external" target="_self">PHP Marrrkdown</a>.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-lightbulb"></i></span><span class="badge-content" style="background-color: darkorange;">Pants</span></span> Extension by John Gruber adher'n t' <a href="https://daringfireball.net/projects/smartypants/" rel="external" target="_self">SmartyPants</a>.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Cap'n Hugo</span></span> <a href="https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension" rel="external" target="_self">Cap'n Hugo Extra Extension</a> supported by Cap'n Hugo.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw far fa-gem"></i></span><span class="badge-content" style="background-color: #7c3aed;">Obsidian</span></span> Extension implemented by <a href="https://obsidian.md/" rel="external" target="_self">Obsidian</a>.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> If th' <a href="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe" rel="external" target="_self">usage o' HTML</a> be allowed, th' theme supports styl'n fer further HTML elements.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-puzzle-piece"></i></span><span class="badge-content" style="background-color: #7dc903;">Relearrrn</span></span> Extension specific t' this theme.</p>
</li>
</ul>
<h2 id="paragraphs">Paragraphs</h2>
<p>In Marrrkdown yer rrrambl'n usually spans th' whole avail'ble document width. This be called a block. Blocks be always separated by whitespace t' their adjacent blocks 'n th' result'n document.</p>
<p>Any text not start'n wit' a special sign be written as normal, plain text paragraph block an' must be separated t' its adjacent blocks by empty lines.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.</p>
<p>Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
</div>
</div>
<h2 id="headings">Head'ns</h2>
<p>A bloody idea be t' structure yer rrrambl'n us'n head'ns an' subhead'ns. HTML-head'ns from <code>h1</code> through <code>h6</code> be constructed wit' a <code>#</code> fer each level.</p>
<p>In Hugo ye usually don&rsquo;t use <code>h1</code> as this be generated by yer theme an' ye should only have one such element 'n a document.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="gh"># h1 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>
</span></span><span class="line"><span class="cl"><span class="gu">## h2 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gu"></span>
</span></span><span class="line"><span class="cl"><span class="gu">### h3 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gu"></span>
</span></span><span class="line"><span class="cl"><span class="gu">#### h4 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gu"></span>
</span></span><span class="line"><span class="cl"><span class="gu">##### h5 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gu"></span>
</span></span><span class="line"><span class="cl">###### h6 Head'n</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<h1 id="h1-heading">h1 Head'n</h1>
<h2 id="h2-heading">h2 Head'n</h2>
<h3 id="h3-heading">h3 Head'n</h3>
<h4 id="h4-heading">h4 Head'n</h4>
<h5 id="h5-heading">h5 Head'n</h5>
<h6 id="h6-heading">h6 Head'n</h6>
</div>
</div>
<h2 id="horizontal-rules">Horizontal Rules</h2>
<p>T' further structure yer rrrambl'n ye can add horizontal rules. They create a &ldquo;thematic break&rdquo; between paragraph blocks. In Marrrkdown, ye can create it wit' three consecutive dashes <code>---</code>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.</p>
<hr>
<p>Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
</div>
</div>
<h2 id="blockquotes">Blockquotes</h2>
<h3 id="quotations">Quotat'ns</h3>
<p>For quot'n blocks o' rrrambl'n from another source within yer document add <code>&gt;</code> before any text ye want t' quote.</p>
<p>Blockquotes can also be nested.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">Donec massa lacus, ultricies a ullamcorper 'n, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt;
</span></span></span><span class="line"><span class="cl"><span class="k"></span><span class="ge">&gt; &gt; Sed adipisc'n elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis 'n dolor tincidunt mollis ac eu diam.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt;
</span></span><span class="line"><span class="cl">&gt; Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<blockquote><p>Donec massa lacus, ultricies a ullamcorper 'n, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.</p>
<blockquote><p>Sed adipisc'n elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis 'n dolor tincidunt mollis ac eu diam.</p>
</blockquote><p>Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.</p>
</blockquote></div>
</div>
<h3 id="github-styled-alerts">GitHub Styled Alerts</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Since Cap'n Hugo <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.132.0</span></span> <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts" rel="external" target="_self">GitHub styled alerts</a> be also supported. Please note, that color'n an' ay'cons o' severities may defer between GitHub an' this theme.</p>
<p>If ye be 'n need o' more advanced opt'ns t' style yer alerts, use th' <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html">notice shortcode</a>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!CAUTION]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Advises about risks or negative outcomes o' certain act'ns.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!IMPORTANT]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Key informat'n users need t' know t' achieve their goal.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!INFO]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Informat'n that users &lt;ins&gt;_might_&lt;/ins&gt; find interest'n.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!NOTE]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Useful informat'n that users should know, even when skimm'n rrrambl'n.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!TIP]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Helpful advice fer do'n th'ns better or more easily.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!WARNING]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; Urgent info that needs immediate user attent'n t' avoid problems.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<div class="box notices cstyle caution">
<div class="box-label">
<i class="fa-fw fas fa-hand"></i> Caut'n
</div>
<div class="box-content">
<p>Advises about risks or negative outcomes o' certain act'ns.</p>
</div>
</div>
<div class="box notices cstyle important">
<div class="box-label">
<i class="fa-fw fas fa-bolt"></i> Important
</div>
<div class="box-content">
<p>Key informat'n users need t' know t' achieve their goal.</p>
</div>
</div>
<div class="box notices cstyle info">
<div class="box-label">
<i class="fa-fw fas fa-info-circle"></i> Ahoi
</div>
<div class="box-content">
<p>Informat'n that users <ins><em>might</em></ins> find interest'n.</p>
</div>
</div>
<div class="box notices cstyle note">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-circle"></i> Avast
</div>
<div class="box-content">
<p>Useful informat'n that users should know, even when skimm'n rrrambl'n.</p>
</div>
</div>
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Smarrrt Arrrse
</div>
<div class="box-content">
<p>Helpful advice fer do'n th'ns better or more easily.</p>
</div>
</div>
<div class="box notices cstyle warning">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-triangle"></i> Arrr
</div>
<div class="box-content">
<p>Urgent info that needs immediate user attent'n t' avoid problems.</p>
</div>
</div></div>
</div>
<h3 id="obsidian-styled-alerts">Obsidian Styled Alerts</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw far fa-gem"></i></span><span class="badge-content" style="background-color: #7c3aed;">Obsidian</span></span> Since Cap'n Hugo <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.134.0</span></span> <a href="https://help.obsidian.md/Editing+and+formatting/Callouts#Change+the+title" rel="external" target="_self">Obsidian styled alerts</a> be also supported. Which enables configur'ble title text an' expand/collapse.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!tip] Callouts can have custom titles
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Like this one.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!tip] Title-only callout
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!note]- Be callouts fold'ble?
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!note]+ Be callouts fold'ble?
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Callouts can have custom titles
</div>
<div class="box-content">
<p>Like this one.</p>
</div>
</div>
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Title-only callout</p>
</div>
</div>
<div class="expand box notices cstyle note">
<input type="checkbox" id="R-expand-108bccd9ee0d28cecf84a39efbe42997" aria-controls="R-expandcontent-108bccd9ee0d28cecf84a39efbe42997" >
<label class="expand-label box-label" for="R-expand-108bccd9ee0d28cecf84a39efbe42997">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> <i class="fa-fw fas fa-exclamation-circle"></i> Be callouts fold'ble?
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-108bccd9ee0d28cecf84a39efbe42997" class="expand-content box-content">
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
</div>
</div>
<div class="expand box notices cstyle note">
<input type="checkbox" id="R-expand-987793a5d8b0b879c2ce38a0652b3701" aria-controls="R-expandcontent-987793a5d8b0b879c2ce38a0652b3701" checked>
<label class="expand-label box-label" for="R-expand-987793a5d8b0b879c2ce38a0652b3701">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> <i class="fa-fw fas fa-exclamation-circle"></i> Be callouts fold'ble?
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-987793a5d8b0b879c2ce38a0652b3701" class="expand-content box-content">
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
</div>
</div></div>
</div>
<h2 id="text-markers">Text Markers</h2>
<h3 id="bold">Bold</h3>
<p>Ye can show importance o' a snippet o' text wit' a heavier font-weight by enclos'n it wit' two asterisks <code>**</code>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">I am rendered wit' **bold text**</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>I am rendered wit' <strong>bold text</strong></p>
</div>
</div>
<h3 id="italics">Italics</h3>
<p>Ye can emphasize a snippet o' text wit' italics by enclos'n it wit' underscores <code>_</code>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">I am rendered wit' _italicized text_</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>I am rendered wit' <em>italicized text</em></p>
</div>
</div>
<h3 id="marked-text">Marked Text</h3>
<p>Ye can mark text 'n th' predefined accent color o' yer stylesheet.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Cap'n Hugo</span></span> Since Cap'n Hugo 0.126.0, ye can <a href="https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension" rel="external" target="_self">activate this through th' <em>Cap'n Hugo Extra Extension</em></a> 'n yer <code>hugo.toml</code></p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">==Parts== o' this text ==are marked!==</span></span></code></pre></div><p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> Ye can also use it by configur'n Hugo fer <a href="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe" rel="external" target="_self">usage o' HTML</a>.</p>
<div class="highlight wrap-code"><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">mark</span><span class="p">&gt;</span>Parts<span class="p">&lt;/</span><span class="nt">mark</span><span class="p">&gt;</span> o' this text <span class="p">&lt;</span><span class="nt">mark</span><span class="p">&gt;</span>be marked!<span class="p">&lt;/</span><span class="nt">mark</span><span class="p">&gt;</span></span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><mark>Parts</mark> o' this text <mark>be marked!</mark></p>
</div>
</div>
<h3 id="inserted-text">Inserted Text</h3>
<p>Ye can mark text addit'ns t' exist'n text.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Cap'n Hugo</span></span> Since Cap'n Hugo 0.126.0, ye can <a href="https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension" rel="external" target="_self">activate this through th' <em>Cap'n Hugo Extra Extension</em></a> 'n yer <code>hugo.toml</code></p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Th' ++hot, new++ stuff</span></span></code></pre></div><p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> Ye can also use it by configur'n Hugo fer <a href="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe" rel="external" target="_self">usage o' HTML</a>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">Th' <span class="p">&lt;</span><span class="nt">ins</span><span class="p">&gt;</span>hot, new<span class="p">&lt;/</span><span class="nt">ins</span><span class="p">&gt;</span> stuff</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Th' <ins>hot, new</ins> stuff</p>
</div>
</div>
<h3 id="deleted-text">Deleted Text</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Ye can do strikethroughs by enclos'n text wit' two tildes <code>~~</code>. See <a href="https://gohugo.io/getting-started/configuration-markup/#extras" rel="external" target="_self">Hugo&rsquo;s documentat'n remarks</a> if ye want t' use this together wit' th' subscript rules.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">~~Strike through~~ this text</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><del>Strike through</del> this text</p>
</div>
</div>
<h2 id="special-typesetting">Special Typesett'n</h2>
<h3 id="text-substitution">Text Substitut'n</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-lightbulb"></i></span><span class="badge-content" style="background-color: darkorange;">Pants</span></span> Ye can combine multiple punctuat'n characters t' single typographic entities. This will only be applied t' text outside o' code blocks or inline code.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Do'ble quotes <span class="sb">`&#34;`</span> an' single quotes <span class="sb">`&#39;`</span> o' enclosed text be replaced by <span class="ge">**</span>&#34;do'ble curly quotes&#34;** an' <span class="ge">**</span>&#39;single curly quotes&#39;**.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Do'ble dashes <span class="sb">`--`</span> an' triple dashes <span class="sb">`---`</span> be replaced by en-dash <span class="ge">**</span>--** an' em-dash <span class="ge">**</span>---** entities.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Do'ble arrows point'n left <span class="sb">`&lt;&lt;`</span> or right <span class="sb">`&gt;&gt;`</span> be replaced by arrow <span class="ge">**</span><span class="err">&lt;&lt;</span>** an' <span class="ge">**</span>&gt;&gt;** entities.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Three consecutive dots <span class="sb">`...`</span> be replaced by an ellipsis <span class="ge">**</span>...** entity.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Do'ble quotes <code>&quot;</code> an' single quotes <code>'</code> o' enclosed text be replaced by <strong>&ldquo;do'ble curly quotes&rdquo;</strong> an' <strong>&lsquo;single curly quotes&rsquo;</strong>.</p>
<p>Do'ble dashes <code>--</code> an' triple dashes <code>---</code> be replaced by en-dash <strong>&ndash;</strong> an' em-dash <strong>&mdash;</strong> entities.</p>
<p>Do'ble arrows point'n left <code>&lt;&lt;</code> or right <code>&gt;&gt;</code> be replaced by arrow <strong>&laquo;</strong> an' <strong>&raquo;</strong> entities.</p>
<p>Three consecutive dots <code>...</code> be replaced by an ellipsis <strong>&hellip;</strong> entity.</p>
</div>
</div>
<h3 id="subscript-and-superscript">Subscript an' Superscript</h3>
<p>Ye can also use subscript an' superscript text. For more complex stuff, ye can use th' <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html"><code>math</code> shortcode</a>.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Cap'n Hugo</span></span> Since Cap'n Hugo 0.126.0, ye can <a href="https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension" rel="external" target="_self">activate this through th' <em>Cap'n Hugo Extra Extension</em></a> 'n yer <code>hugo.toml</code></p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">How many liters H~2~O fit into 1dm^3^?</span></span></code></pre></div><p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> Ye can also use it by configur'n Hugo fer <a href="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe" rel="external" target="_self">usage o' HTML</a>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">How many liters H<span class="p">&lt;</span><span class="nt">sub</span><span class="p">&gt;</span>2<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>O fit into 1dm<span class="p">&lt;</span><span class="nt">sup</span><span class="p">&gt;</span>3<span class="p">&lt;/</span><span class="nt">sup</span><span class="p">&gt;</span>?</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>How many liters H<sub>2</sub>O fit into 1dm<sup>3</sup>?</p>
</div>
</div>
<h3 id="keyboard-shortcuts">Keyboard Shortcuts</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> Ye can use th' <code>&lt;kbd&gt;</code> element t' style keyboard shortcuts.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">Press <span class="p">&lt;</span><span class="nt">kbd</span><span class="p">&gt;</span>STRG<span class="p">&lt;/</span><span class="nt">kbd</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">kbd</span><span class="p">&gt;</span>ALT<span class="p">&lt;/</span><span class="nt">kbd</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">kbd</span><span class="p">&gt;</span>DEL<span class="p">&lt;/</span><span class="nt">kbd</span><span class="p">&gt;</span> t' end yer shift early.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Press <kbd>STRG</kbd> <kbd>ALT</kbd> <kbd>DEL</kbd> t' end yer shift early.</p>
</div>
</div>
<h2 id="lists">Lists</h2>
<h3 id="unordered">Unordered</h3>
<p>Ye can write a list o' items 'n which th' order o' th' items does not explicitly matter.</p>
<p>It be poss'ble t' nest lists by indent'n an item fer th' next sublevel.</p>
<p>Ye may use any o' <code>-</code>, <code>*</code> or <code>+</code> t' denote bullets fer each list item but should not switch between those symbols inside one whole list.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">-</span> Lorem ipsum dolor sit amet
</span></span><span class="line"><span class="cl"><span class="k">-</span> Consectetur adipisc'n elit
</span></span><span class="line"><span class="cl"> <span class="k">-</span> Vestibulum laoreet porttitor sem
</span></span><span class="line"><span class="cl"> <span class="k">-</span> Ac tristique libero volutpat at
</span></span><span class="line"><span class="cl"><span class="k">-</span> Nulla volutpat aliquam velit
</span></span><span class="line"><span class="cl"> <span class="k">-</span> Phasellus iaculis neque
</span></span><span class="line"><span class="cl"> <span class="k">-</span> Purus sodales ultricies
</span></span><span class="line"><span class="cl">- Faucibus porta lacus fringilla vel</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisc'n elit
<ul>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
</ul>
</div>
</div>
<h3 id="ordered">Ordered</h3>
<p>Ye can create a list o' items 'n which th' order o' items does explicitly matter.</p>
<p>It be poss'ble t' nest lists by indent'n an item fer th' next sublevel.</p>
<p>Marrrkdown will automatically number each o' yer items consecutively. This means, th' order number ye be provid'n be irrelevant.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">1.</span> Lorem ipsum dolor sit amet
</span></span><span class="line"><span class="cl"><span class="k">3.</span> Consectetur adipisc'n elit
</span></span><span class="line"><span class="cl"> <span class="k">1.</span> Integer molestie lorem at massa
</span></span><span class="line"><span class="cl"> <span class="k">7.</span> Facilisis 'n pretium nisl aliquet
</span></span><span class="line"><span class="cl"><span class="k">99.</span> Nulla volutpat aliquam velit
</span></span><span class="line"><span class="cl"> <span class="k">1.</span> Faucibus porta lacus fringilla vel
</span></span><span class="line"><span class="cl"> <span class="k">1.</span> Aenean sit amet erat nunc
</span></span><span class="line"><span class="cl">17. Eget porttitor lorem</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisc'n elit
<ol>
<li>Integer molestie lorem at massa</li>
<li>Facilisis 'n pretium nisl aliquet</li>
</ol>
</li>
<li>Nulla volutpat aliquam velit
<ol>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
</ol>
</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
</div>
<h3 id="tasks">Tasks</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Ye can add task lists result'n 'n checked or unchecked non-click'ble items</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">- [x]</span> Basic Test
</span></span><span class="line"><span class="cl"><span class="k">- [ ]</span> More Tests
</span></span><span class="line"><span class="cl"> <span class="k">- [x]</span> View
</span></span><span class="line"><span class="cl"> <span class="k">- [x]</span> Hear
</span></span><span class="line"><span class="cl"> - [ ] Smell</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<ul>
<li><input checked="" disabled="" type="checkbox"> Basic Test</li>
<li><input disabled="" type="checkbox"> More Tests
<ul>
<li><input checked="" disabled="" type="checkbox"> View</li>
<li><input checked="" disabled="" type="checkbox"> Hear</li>
<li><input disabled="" type="checkbox"> Smell</li>
</ul>
</li>
</ul>
</div>
</div>
<h3 id="definitions">Definit'ns</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content" style="background-color: #888cc4;">PHP</span></span> Definit'n lists be made o' terms an' definit'ns o' these terms, much like 'n a dictionary.</p>
<p>A definit'n list 'n Marrrkdown Extra be made o' a single-line term followed by a colon an' th' definit'n fer that term. Ye can also associate more than one term t' a definit'n.</p>
<p>If ye add empty lines around th' definit'n terms, additional vertical space will be generated. Also multiple paragraphs be poss'ble</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Apple
</span></span><span class="line"><span class="cl">: Pomaceous fruit o' plants o' th' genus Malus 'n th' family Rosaceae.
</span></span><span class="line"><span class="cl">: An American computer company.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Orange
</span></span><span class="line"><span class="cl">: Th' fruit o' an evergreen tree o' th' genus Citrus.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> Ye can make juice out o' it.
</span></span><span class="line"><span class="cl">: A telecommunicat'n company.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> Ye can&#39;t make juice out o' it.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<dl>
<dt>Apple</dt>
<dd>Pomaceous fruit o' plants o' th' genus Malus 'n th' family Rosaceae.</dd>
<dd>An American computer company.</dd>
<dt>Orange</dt>
<dd>Th' fruit o' an evergreen tree o' th' genus Citrus.
<p>Ye can make juice out o' it.</p>
</dd>
<dd>A telecommunicat'n company.
<p>Ye can&rsquo;t make juice out o' it.</p>
</dd>
</dl>
</div>
</div>
<h2 id="code">Code</h2>
<h3 id="inline-code">Inline Code</h3>
<p>Inline snippets o' code can be wrapped wit' backticks <code>`</code>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">In this example, <span class="sb">`&lt;div&gt;&lt;/div&gt;`</span> be marked as code.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>In this example, <code>&lt;div&gt;&lt;/div&gt;</code> be marked as code.</p>
</div>
</div>
<h3 id="indented-code-block">Indented Code Block</h3>
<p>A simple code block can be generated by indent'n several lines o' code by at least two spaces.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Be impressed by my advanced code:
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> // Some comments
</span></span><span class="line"><span class="cl"> line 1 o' code
</span></span><span class="line"><span class="cl"> line 2 o' code
</span></span><span class="line"><span class="cl"> line 3 o' code</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Be impressed by my advanced code:</p>
<pre><code>// Some comments
line 1 o' code
line 2 o' code
line 3 o' code
</code></pre>
</div>
</div>
<h3 id="fenced-code-block">Fenced Code Block</h3>
<p>If ye want t' gain more control o' yer code block ye can enclose yer code by at least three backticks <code>```</code> a so called fence.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Ye can also add a language specifier directly after th' open'n fence, <code>```js</code>, an' rules highlight'n will automatically be applied accord'n t' th' selected language 'n th' rendered HTML.</p>
<p>See <a href="/hugo-theme-relearn/pir/shortcodes/highlight/index.html">Code Highlight'n</a> fer additional documentat'n.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">```js
</span></span><span class="line"><span class="cl">{
</span></span><span class="line"><span class="cl"> name: &#34;Claus&#34;,
</span></span><span class="line"><span class="cl"> surname: &#34;Santa&#34;,
</span></span><span class="line"><span class="cl"> profession: &#34;courier&#34;,
</span></span><span class="line"><span class="cl"> age: 666,
</span></span><span class="line"><span class="cl"> address: {
</span></span><span class="line"><span class="cl"> city: &#34;North Pole&#34;,
</span></span><span class="line"><span class="cl"> postalCode: 1,
</span></span><span class="line"><span class="cl"> country: &#34;Arctic&#34;
</span></span><span class="line"><span class="cl"> },
</span></span><span class="line"><span class="cl"> friends: [ &#34;Dasher&#34;, &#34;Dancer&#34;, &#34;Prancer&#34;, &#34;Vixen&#34;, &#34;Comet&#34;, &#34;Cupid&#34;, &#34;Donder&#34;, &#34;Blitzen&#34;, &#34;Rudolph&#34; ]
</span></span><span class="line"><span class="cl">};
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Claus&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">surname</span><span class="o">:</span> <span class="s2">&#34;Santa&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">profession</span><span class="o">:</span> <span class="s2">&#34;courier&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">666</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">address</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">city</span><span class="o">:</span> <span class="s2">&#34;North Pole&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">postalCode</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">country</span><span class="o">:</span> <span class="s2">&#34;Arctic&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nx">friends</span><span class="o">:</span> <span class="p">[</span> <span class="s2">&#34;Dasher&#34;</span><span class="p">,</span> <span class="s2">&#34;Dancer&#34;</span><span class="p">,</span> <span class="s2">&#34;Prancer&#34;</span><span class="p">,</span> <span class="s2">&#34;Vixen&#34;</span><span class="p">,</span> <span class="s2">&#34;Comet&#34;</span><span class="p">,</span> <span class="s2">&#34;Cupid&#34;</span><span class="p">,</span> <span class="s2">&#34;Donder&#34;</span><span class="p">,</span> <span class="s2">&#34;Blitzen&#34;</span><span class="p">,</span> <span class="s2">&#34;Rudolph&#34;</span> <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span></span></span></code></pre></div></div>
</div>
<h2 id="tables">Tables</h2>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Ye can create tables by add'n pipes as dividers between each cell, an' by add'n a line o' dashes (also separated by bars) beneath th' header. Avast that th' pipes do not need t' be vertically aligned.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">| Opt'n | Descript'n |
</span></span><span class="line"><span class="cl">|--------|-------------|
</span></span><span class="line"><span class="cl">| data | path t' data files t' supply th' data that will be passed into templates. |
</span></span><span class="line"><span class="cl">| engine | engine t' be used fer process'n templates. Handlebars be th' default. |
</span></span><span class="line"><span class="cl">| ext | extension t' be used fer dest files. |</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<table>
<thead>
<tr>
<th style="text-align: left">Opt'n</th>
<th style="text-align: left">Descript'n</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">data</td>
<td style="text-align: left">path t' data files t' supply th' data that will be passed into templates.</td>
</tr>
<tr>
<td style="text-align: left">engine</td>
<td style="text-align: left">engine t' be used fer process'n templates. Handlebars be th' default.</td>
</tr>
<tr>
<td style="text-align: left">ext</td>
<td style="text-align: left">extension t' be used fer dest files.</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3 id="aligned-columns">Aligned Columns</h3>
<p>Add'n a colon on th' left and/or right side o' th' dashes below any head'n will align th' text fer that column accordingly.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">| Opt'n | Number | Descript'n |
</span></span><span class="line"><span class="cl">|-------:|:------:|:------------|
</span></span><span class="line"><span class="cl">| data | 1 | path t' data files t' supply th' data that will be passed into templates. |
</span></span><span class="line"><span class="cl">| engine | 2 | engine t' be used fer process'n templates. Handlebars be th' default. |
</span></span><span class="line"><span class="cl">| ext | 3 | extension t' be used fer dest files. |</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<table>
<thead>
<tr>
<th style="text-align: right">Opt'n</th>
<th style="text-align: center">Number</th>
<th style="text-align: left">Descript'n</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: right">data</td>
<td style="text-align: center">1</td>
<td style="text-align: left">path t' data files t' supply th' data that will be passed into templates.</td>
</tr>
<tr>
<td style="text-align: right">engine</td>
<td style="text-align: center">2</td>
<td style="text-align: left">engine t' be used fer process'n templates. Handlebars be th' default.</td>
</tr>
<tr>
<td style="text-align: right">ext</td>
<td style="text-align: center">3</td>
<td style="text-align: left">extension t' be used fer dest files.</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2 id="links">Links</h2>
<h3 id="autolink">Autolink</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Absolute URLs will automatically be converted into a link.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">This be a link t' https://example.com.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>This be a link t' <a href="https://example.com" rel="external" target="_self">https://example.com</a>.</p>
</div>
</div>
<h3 id="basic-link">Basic Link</h3>
<p>Ye can explicitly define links 'n case ye want t' use non-absolute URLs or want t' give different text.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">[<span class="nt">Assemble</span>](<span class="na">http://assemble.io</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="http://assemble.io" rel="external" target="_self">Assemble</a></p>
</div>
</div>
<h3 id="link-with-tooltip">Link wit' Tooltip</h3>
<p>For even further informat'n, ye can add an additional text, displayed 'n a tooltip on hover'n over th' link.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">[<span class="nt">Upstage</span>](<span class="na">https://github.com/upstage/ &#34;Visit Upstage!&#34;</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="https://github.com/upstage/" rel="external" target="_self" title="Visit Upstage!">Upstage</a></p>
</div>
</div>
<h3 id="link-references">Link References</h3>
<p>Links can be simplyfied fer recurr'n reuse by us'n a reference ID t' later define th' URL locat'n. This simplyfies writ'n if ye want t' use a link more than once 'n a document.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">[Example][somelinkID]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[somelinkID]: https://example.com &#34;Go t' example domain&#34;</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="https://example.com" rel="external" target="_self" title="Go t' example domain">Example</a></p>
</div>
</div>
<h3 id="footnotes">Footnotes</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content" style="background-color: #888cc4;">PHP</span></span> Footnotes work mostly like reference-style links. A footnote be made o' two th'ns, a marker 'n th' text that will become a superscript number an' a footnote definit'n that will be placed 'n a list o' footnotes.</p>
<p>Usually th' list o' footnotes will be shown at th' end o' yer document. If we use a footnote 'n a notice box it will instead be listed at th' end o' its box.</p>
<p>Footnotes can contain block elements, which means that ye can put multiple paragraphs, lists, blockquotes an' so on 'n a footnote. It works th' same as fer list items, just indent th' follow'n paragraphs by four spaces 'n th' footnote definit'n.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">That&#39;s some text wit' a footnote[^1]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[^1]: An' that&#39;s th' footnote.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">That&#39;s some more text wit' a footnote.[^someid]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[^someid]:
</span></span><span class="line"><span class="cl"> Anyth'n o' interest goes here.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> Blue light glows blue.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
<p>That&rsquo;s some more text wit' a footnote.<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup></p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>An' that&rsquo;s th' footnote.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:2">
<p>Anyth'n o' interest goes here.</p>
<p>Blue light glows blue.&#160;<a href="#fnref:2" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
</div>
</div>
<h2 id="images">Images</h2>
<h3 id="basic-images">Basic Images</h3>
<p>Images have a similar rules t' links but include a preced'n exclamat'n mark.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Spock</span>](<span class="na">https://octodex.github.com/images/spocktocat.png</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-28f4b55edf15563e7670d0cb1f6b9aa8" class="lightbox-link"><img alt="Spock" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/spocktocat.png?width=20vw" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-28f4b55edf15563e7670d0cb1f6b9aa8"><img alt="Spock" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/spocktocat.png?width=20vw"></a></p>
</div>
</div>
<h3 id="image-with-tooltip">Image wit' Tooltip</h3>
<p>Like links, images can also be given a tooltip.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Picard</span>](<span class="na">https://octodex.github.com/images/jean-luc-picat.jpg &#34;Jean Luc Picard&#34;</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-768da81a787cd014c229aa975faf4724" class="lightbox-link"><img alt="Picard" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" style=" height: auto; width: 20vw;" title="Jean Luc Picard"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-768da81a787cd014c229aa975faf4724"><img alt="Picard" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" title="Jean Luc Picard"></a></p>
</div>
</div>
<h3 id="image-references">Image References</h3>
<p>Images can also be linked by reference ID t' later define th' URL locat'n. This simplyfies writ'n if ye want t' use an image more than once 'n a document.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![La Forge][laforge]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[laforge]: https://octodex.github.com/images/trekkie.jpg &#34;Geordi La Forge&#34;</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-0508cf316a0e4a59d678664cbf269d84" class="lightbox-link"><img alt="La Forge" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/trekkie.jpg?width=20vw" style=" height: auto; width: 20vw;" title="Geordi La Forge"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-0508cf316a0e4a59d678664cbf269d84"><img alt="La Forge" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/trekkie.jpg?width=20vw" title="Geordi La Forge"></a></p>
</div>
</div>
<h3 id="image-effects">Image Effects</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-puzzle-piece"></i></span><span class="badge-content" style="background-color: #7dc903;">Relearrrn</span></span> This theme allows additional non-standard formatt'n by sett'n query parameter at th' end o' th' image URL. Th' default <a href="/hugo-theme-relearn/pir/cont/imageeffects/index.html">behavior be configur'ble</a> through yer <code>hugo.toml</code> or frontmatter parameter.</p>
<h4 id="resizing">Resiz'n</h4>
<p>Add query parameter <code>width</code> and/or <code>height</code> t' th' link image t' resize th' image. Values be CSS values (default be <code>auto</code>).</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?width=20vw</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-64c6b17ad31e04220e2747d48e4fe2a3" class="lightbox-link"><img alt="Minion" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/minion.png?width=20vw" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-64c6b17ad31e04220e2747d48e4fe2a3"><img alt="Minion" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/minion.png?width=20vw"></a></p>
</div>
</div>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-1c7bfb23bb0a490f34fc1760729fa778" class="lightbox-link"><img alt="Minion" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/minion.png?height=50px" style=" height: 50px; width: auto;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-1c7bfb23bb0a490f34fc1760729fa778"><img alt="Minion" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/minion.png?height=50px"></a></p>
</div>
</div>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-505ecee8ef0220563e0eea06b3029ce2" class="lightbox-link"><img alt="Minion" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/minion.png?height=50px&width=40vw" style=" height: 50px; width: 40vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-505ecee8ef0220563e0eea06b3029ce2"><img alt="Minion" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/minion.png?height=50px&width=40vw"></a></p>
</div>
</div>
<h4 id="css-classes">CSS Classes</h4>
<p>Add a query parameter <code>classes</code> t' th' link image t' add CSS classes. Add some o' th' predefined values or even define yer own 'n yer CSS.</p>
<h5 id="shadow">Shadow</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Spidertocat</span>](<span class="na">https://octodex.github.com/images/spidertocat.png?classes=shadow</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-62e4dfc22c37870aea32d9484c054602" class="lightbox-link"><img alt="Spidertocat" class="bg-white border lazy lightbox noborder shadow figure-image" loading="lazy" src="https://octodex.github.com/images/spidertocat.png?width=20vw&classes=shadow,noborder" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-62e4dfc22c37870aea32d9484c054602"><img alt="Spidertocat" class="bg-white border lazy lightbox noborder shadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/spidertocat.png?width=20vw&classes=shadow,noborder"></a></p>
</div>
</div>
<h5 id="border">Border</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">DrOctocat</span>](<span class="na">https://octodex.github.com/images/droctocat.png?classes=border</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-5f9e4f52c65b32d39afc7222b8be6e0f" class="lightbox-link"><img alt="DrOctocat" class="bg-white border lazy lightbox noshadow noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/droctocat.png?width=20vw&classes=border,noshadow" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-5f9e4f52c65b32d39afc7222b8be6e0f"><img alt="DrOctocat" class="bg-white border lazy lightbox noshadow noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/droctocat.png?width=20vw&classes=border,noshadow"></a></p>
</div>
</div>
<h5 id="left">Left</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Supertocat</span>](<span class="na">https://octodex.github.com/images/okal-eltocat.jpg?classes=left</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-89695e53ac8c4a584341b0a0b9691d0c" class="lightbox-link"><img alt="Supertocat" class="bg-white border lazy left lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&classes=left" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-89695e53ac8c4a584341b0a0b9691d0c"><img alt="Supertocat" class="bg-white border lazy left lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&classes=left"></a></p>
</div>
</div>
<h5 id="right">Right</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Riddlocat</span>](<span class="na">https://octodex.github.com/images/riddlocat.jpg?classes=right</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-c239181bda1f3417b4e4a59f810f6a6b" class="lightbox-link"><img alt="Riddlocat" class="bg-white border lazy lightbox right noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&classes=right" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-c239181bda1f3417b4e4a59f810f6a6b"><img alt="Riddlocat" class="bg-white border lazy lightbox right noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&classes=right"></a></p>
</div>
</div>
<h5 id="inline">Inline</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Spidertocat</span>](<span class="na">https://octodex.github.com/images/spidertocat.png?classes=inline</span>)
</span></span><span class="line"><span class="cl">![<span class="nt">DrOctocat</span>](<span class="na">https://octodex.github.com/images/droctocat.png?classes=inline</span>)
</span></span><span class="line"><span class="cl">![<span class="nt">Supertocat</span>](<span class="na">https://octodex.github.com/images/okal-eltocat.jpg?classes=inline</span>)
</span></span><span class="line"><span class="cl">![<span class="nt">Riddlocat</span>](<span class="na">https://octodex.github.com/images/riddlocat.jpg?classes=inline</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-5e9aa801e5d108541be2e52259647b4d" class="lightbox-link"><img alt="Spidertocat" class="bg-white border inline lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/spidertocat.png?width=10vw&classes=inline" style=" height: auto; width: 10vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-5e9aa801e5d108541be2e52259647b4d"><img alt="Spidertocat" class="bg-white border inline lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/spidertocat.png?width=10vw&classes=inline"></a>
<a href="#R-image-2181f2298df547836717201e1ccdf421" class="lightbox-link"><img alt="DrOctocat" class="bg-white border inline lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/droctocat.png?width=10vw&classes=inline" style=" height: auto; width: 10vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-2181f2298df547836717201e1ccdf421"><img alt="DrOctocat" class="bg-white border inline lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/droctocat.png?width=10vw&classes=inline"></a>
<a href="#R-image-0f3b886094418f4901bb00454d45a602" class="lightbox-link"><img alt="Supertocat" class="bg-white border inline lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&classes=inline" style=" height: auto; width: 10vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-0f3b886094418f4901bb00454d45a602"><img alt="Supertocat" class="bg-white border inline lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&classes=inline"></a>
<a href="#R-image-d4889c52f4093d9a5b5352036bc07a39" class="lightbox-link"><img alt="Riddlocat" class="bg-white border inline lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&classes=inline" style=" height: auto; width: 10vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-d4889c52f4093d9a5b5352036bc07a39"><img alt="Riddlocat" class="bg-white border inline lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&classes=inline"></a></p>
</div>
</div>
<h5 id="combination">Combinat'n</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">X-tocat</span>](<span class="na">https://octodex.github.com/images/xtocat.jpg?classes=shadow,border,left</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-eacd022e31a27f8c429c739e3ea7221a" class="lightbox-link"><img alt="X-tocat" class="bg-white border lazy left lightbox shadow figure-image" loading="lazy" src="https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-eacd022e31a27f8c429c739e3ea7221a"><img alt="X-tocat" class="bg-white border lazy left lightbox shadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left"></a></p>
</div>
</div>
<h4 id="lightbox">Lightbox</h4>
<p>Add th' query parameter <code>lightbox=false</code> t' th' image link t' dis'ble th' lightbox.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Homercat</span>](<span class="na">https://octodex.github.com/images/homercat.png?lightbox=false</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><img alt="Homercat" class="bg-white border lazy nolightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/homercat.png?width=20vw&lightbox=false" style=" height: auto; width: 20vw;"></p>
</div>
</div>
<div class="box notices cstyle note">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-circle"></i> Avast
</div>
<div class="box-content">
<p>If ye want t' wrap an image 'n a link an' <code>lightbox=true</code> be yer default sett'n, ye have t' explicitly dis'ble th' lightbox t' avoid it t' hijack'n yer link like:</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">[<span class="nt">![Homercat</span>](<span class="na">https://octodex.github.com/images/homercat.png?lightbox=false</span>)](https://octodex.github.com/#homercat)</span></span></code></pre></div><p><a href="https://octodex.github.com/#homercat" rel="external" target="_self"><img alt="Homercat" class="bg-white border lazy nolightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/homercat.png?width=20vw&lightbox=false" style=" height: auto; width: 20vw;"></a></p>
</div>
</div>
<footer class="footline">
</footer>
</article>
</div>
</main>
</div>
<aside id="R-sidebar" class="default-animation showVisitedLinks">
<div id="R-header-topbar" class="default-animation"></div>
<div id="R-header-wrapper" class="default-animation">
<div id="R-header" class="default-animation">
<style>
#R-logo svg,
#R-logo svg * {
color: #282828;
color: var(--MENU-SECTIONS-BG-color);
fill: #282828 !important;
fill: var(--MENU-SECTIONS-BG-color) !important;
opacity: .945;
}
a#R-logo {
color: #282828;
color: var(--MENU-SECTIONS-BG-color);
font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
font-size: 1.875rem;
font-weight: 300;
margin-top: -.8125rem;
max-width: 60%;
text-transform: uppercase;
width: 14.125rem;
white-space: nowrap;
}
a#R-logo:hover {
color: #282828;
color: var(--MENU-SECTIONS-BG-color);
}
#R-logo svg {
margin-bottom: -1.25rem;
margin-inline-start: -1.47rem;
margin-inline-end: .5rem;
width: 40.5%;
}
@media only all and (max-width: 59.999rem) {
a#R-logo {
font-size: 1.5625rem;
margin-top: -.1875rem;
}
#R-logo svg {
margin-bottom: -.75rem;
margin-inline-start: -1.47rem;
margin-inline-end: .5rem;
}
}
</style>
<a id="R-logo" href="/hugo-theme-relearn/pir/index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.044 64.044">
<path d="M46.103 136.34c-.642-.394-1.222-2.242-1.98-2.358-.76-.117-1.353.506-1.618 1.519-.266 1.012-.446 4.188.173 5.538.213.435.482.787 1.03.845.547.057.967-.504 1.45-1.027.482-.523.437-.9 1.142-.612.705.289 1.051.4 1.586 1.229.535.828 1.085 4.043.868 5.598-.241 1.458-.531 2.8-.59 4.088.26.075.517.148.772.217 2.68.724 5.373 1.037 7.873.02.001-.028.01-.105.008-.11-.048-.165-.18-.41-.36-.698-.18-.29-.414-.645-.586-1.114a3.212 3.212 0 0 1-.125-1.735c.056-.21.153-.342.249-.475 1.237-1.193 2.932-1.373 4.244-1.384.557-.004 1.389.016 2.198.255.809.239 1.706.724 2.068 1.843.187.578.114 1.17-.043 1.623-.153.438-.369.783-.545 1.091-.178.31-.329.6-.401.821-.007.02-.003.071-.005.094 2.256 1.008 4.716.91 7.189.398.55-.114 1.11-.247 1.673-.377.344-1.085.678-2.145.852-3.208.124-.752.158-2.311-.078-3.538-.118-.613-.306-1.15-.52-1.489-.221-.349-.413-.501-.747-.538-.243-.027-.51.013-.796.098-.67.223-1.33.606-1.966.76l-.008.002-.109.032c-.556.152-1.233.158-1.797-.36-.556-.51-.89-1.367-1.117-2.596-.283-1.528-.075-3.279.89-4.518l.071-.09h.07c.65-.71 1.485-.802 2.16-.599.706.213 1.333.629 1.772.84.736.354 1.185.319 1.475.171.291-.148.5-.439.668-.955.332-1.017.301-2.819.022-4.106-.148-.684-.13-1.292-.13-1.883-1.558-.463-3.067-.982-4.574-1.208-1.128-.169-2.263-.173-3.298.164-.13.046-.256.095-.38.15-.373.164-.633.342-.805.52-.077.098-.081.105-.087.21-.004.068.031.289.13.571.1.282.256.634.467 1.03.279.524.448 1.063.431 1.618a2.12 2.12 0 0 1-.499 1.309 1.757 1.757 0 0 1-.62.51h-.002c-.515.291-1.107.404-1.723.464-.86.083-1.787.026-2.598-.097-.806-.123-1.47-.28-1.948-.555-.444-.256-.79-.547-1.037-.925a2.273 2.273 0 0 1-.356-1.301c.029-.837.403-1.437.625-1.897.111-.23.191-.433.236-.583.045-.15.044-.25.046-.24-.005-.029-.127-.355-1.015-.741-1.138-.495-2.322-.673-3.533-.668h-.015a9.711 9.711 0 0 0-.521.016h-.002c-1.163.057-2.35.308-3.541.569.383 1.531.79 2.753.818 4.502-.096 1.297.158 2.114-1.03 2.935-.85.588-1.508.729-2.15.335" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:1.03763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M61.472 101.34v.002c-.3-.003-.603.01-.894.04-.544.055-1.39.165-1.778.306-1.238.364.13 2.344.41 2.913.28.569.285 2.03.14 2.134-.144.103-.375.261-.934.345-.56.084.03-.037-1.589.086-1.62.122-5.506.29-8.265.248-.022.26-.036.521-.097.808-.309 1.442-.63 3.163-.494 4.074.071.473.168.65.414.8.23.14.737.235 1.62-.004.834-.227 1.3-.442 1.887-.456.595-.016 1.555.472 1.965.717.411.245-.03-.008.002 0s.128.05.176.102c.049.053-.276-.523.104.199.379.721.72 3.256.002 4.68-.46.913-1.01 1.49-1.64 1.711-.63.22-1.229.067-1.734-.135-.881-.353-1.584-.7-2.205-.647-1.199 1.94-1.186 4.17-.6 6.602.097.397.212.814.327 1.23 2.68-.556 5.542-1.016 8.337.132 1.064.437 1.73 1.015 1.902 1.857.169.831-.193 1.508-.438 1.986-.122.238-.23.46-.307.642-.07.164-.096.28-.104.324.069.429.309.723.686.945.385.227.89.355 1.35.423.723.104 1.567.152 2.287.086.693-.064 1.032-.338 1.241-.544a2.447 2.447 0 0 0 .303-.437.175.175 0 0 0 .013-.035c-.004-.066-.037-.246-.195-.527-.46-.816-.87-1.595-.817-2.51.028-.476.218-.938.529-1.288.304-.343.698-.586 1.186-.79 1.442-.606 2.96-.609 4.372-.409 1.525.216 2.963.679 4.378 1.083.226-2.09.784-3.9.592-5.77-.058-.565-.287-1.333-.598-1.827-.32-.508-.59-.717-1.036-.642-.648.11-1.472.935-2.707 1.078-.791.092-1.494-.267-1.95-.86-.45-.583-.678-1.335-.78-2.101-.202-1.525.031-3.229.89-4.27.615-.747 1.45-.887 2.15-.74.687.145 1.307.492 1.857.745v-.002c.546.252 1.033.388 1.281.344a.547.547 0 0 0 .353-.188c.113-.124.242-.35.384-.75.604-1.712.206-3.68-.303-5.654-.667.145-1.336.293-2.018.413-1.341.236-2.73.392-4.136.273-.656-.055-1.695-.085-2.58-.476-.442-.195-.903-.514-1.157-1.093-.259-.591-.205-1.313.08-2.014.223-.64 1.082-2.178.692-2.585-.391-.407-1.651-.56-2.554-.571z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.992837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M83.128 98.116c-.484 1.875-1.057 3.757-2.486 5.033-.638.57-1.13.666-1.483.548-.401-.134-.715-.506-1.058-.973-.338-.461-.655-.97-1.076-1.332-.192-.165-.404-.315-.683-.38-.279-.066-.599-.02-.9.102-.489.196-.89.58-1.28 1.047a6.1 6.1 0 0 0-.985 1.632c-.234.591-.356 1.174-.277 1.713.072.487.392.977.905 1.185.463.187.926.156 1.36.154.433 0 .843.01 1.242.147.55.189.79.736.822 1.368.034.66-.145 1.412-.393 1.988l-.008.021c-.74 1.705-1.946 2.893-3.004 4.349l-.664.915.979.099c.924.092 1.788.26 2.468.675.46.281 1.806 1.205 2.794 2.222.497.513.888 1.031 1.047 1.502.078.231.095.422.05.6a.93.93 0 0 1-.345.474c-.301.223-.606.395-.864.532l-.354.186c-.107.058-.189.087-.345.228a.637.637 0 0 1 .062-.045l-.064.041-.209.236-.103.343s.003.126.007.152c.003.017.003.007.004.015v.002c.016.195.061.307.133.476a4.1 4.1 0 0 0 .32.596 5.7 5.7 0 0 0 2.8 2.258c.284.108.908.321 1.548.36.33.02.59.015.912-.13h.002c.08-.037.228-.095.382-.281.153-.186.19-.355.212-.445l.019-.075.003-.078c.023-.585-.037-1.296.072-1.899.153-.657.435-.956 1.009-.909 2.771.239 4.74 1.955 6.693 3.83l.742.714.279-1.155c.55-2.29 1.093-4.464 2.928-5.977.692-.57 1.184-.642 1.527-.509.39.151.676.536.996.995.319.458.605.926 1.07 1.212.194.119.464.232.784.209.32-.024.638-.163.988-.384 1.022-.645 1.778-1.756 2.086-2.942.136-.522.102-.991-.046-1.301-.158-.334-.433-.553-.754-.707-.653-.314-1.468-.373-2.094-.486-.825-.15-1.22-.475-1.345-.878-.13-.417 0-.953.335-1.61.6-1.173 1.887-2.602 3.13-3.911l.498-.526-.449-.432c-1.545-1.49-3.163-3.01-5.252-3.715h-.002c-.473-.16-1.097-.413-1.73-.424h-.003c-.311-.004-.596.04-.883.24v.002c-.22.155-.483.537-.583.937l-.008.036-.006.038c-.116.773-.06 1.467-.217 1.995-.063.212-.198.418-.359.507-.202.111-.492.153-.976.072-.582-.097-1.978-.69-3.021-1.503-.523-.407-.934-.85-1.117-1.3a1.153 1.153 0 0 1-.083-.63c.03-.184.1-.477.308-.593.21-.116.941-.32 1.377-.642h.002c.192-.141.403-.367.518-.64.114-.275.127-.526.123-.774-.006-.142-.036-.192-.08-.3a8.417 8.417 0 0 0-3-3.027c-1.226-.725-2.585-1.135-3.927-1.539-.434-.12-.844-.111-1.02.466zm.912.947c1.186.364 2.357.718 3.345 1.303 1.035.612 1.864 1.488 2.507 2.528-.514.263-1.095.5-1.44.79-.345.29-.729.914-.815 1.434-.084.509 0 .968.155 1.347.301.74.85 1.276 1.44 1.735 1.18.92 2.554 1.545 3.47 1.698.604.1 1.186.088 1.739-.216.594-.327.935-.911 1.088-1.427.264-.884.193-1.664.262-2.17h.1c.3.006.926.206 1.417.371 1.646.554 3.044 1.773 4.431 3.089-1.102 1.174-2.222 2.423-2.888 3.73-.42.823-.73 1.789-.453 2.687.283.913 1.1 1.415 2.138 1.603.691.126 1.472.226 1.84.403.19.091.258.182.278.223.03.064.058.075-.023.387-.21.804-.761 1.598-1.413 2.01-.247.155-.365.183-.407.187-.042.003-.061.002-.172-.066-.144-.088-.455-.473-.772-.929-.317-.454-.714-1.07-1.452-1.356-.783-.304-1.776-.022-2.713.75-1.942 1.6-2.626 3.764-3.146 5.8-1.802-1.676-3.772-3.138-6.589-3.517h-.002c-.346-.095-1.013-.031-1.293.143-.735.501-1.005 1.132-1.168 2.007-.125.69-.082 1.216-.074 1.659-.055.006-.046.01-.104.006-.42-.026-1.035-.215-1.244-.295-.947-.361-1.774-1.006-2.314-1.857-.054-.085-.072-.132-.109-.2l.027-.016c.284-.15.656-.36 1.045-.648.44-.327.789-.798.93-1.35a2.4 2.4 0 0 0-.068-1.379c-.254-.751-.753-1.353-1.295-1.911-1.09-1.124-2.452-2.049-2.99-2.378-.609-.372-1.303-.44-1.981-.56.875-1.094 1.878-2.251 2.596-3.921.294-.823.543-1.907.513-2.658-.049-.97-.489-2.013-1.52-2.367-.579-.2-1.131-.204-1.58-.203-.45.002-.786-.006-.97-.08h-.002c-.264-.107-.236-.108-.268-.33-.025-.17.021-.553.183-.962a4.67 4.67 0 0 1 .725-1.192c.29-.348.617-.59.705-.626.142-.057.176-.05.22-.04.045.011.127.052.263.17.235.201.56.671.92 1.161.354.484.791 1.08 1.543 1.33.8.267 1.784-.052 2.671-.846 1.594-1.424 2.235-3.317 2.714-5.051zm11.705 7.023c-.02.014.042-.002.042 0l-.008.035c.05-.2-.028-.04-.034-.035zM79.472 122.45a.198.198 0 0 1 .005.023v.014c-.002-.01-.003-.03-.005-.037zm-.29.732-.006.01-.044.027c.016-.01.033-.024.05-.036z" style="color:#000;fill:#282828;stroke-width:1.02352;-inkscape-stroke:none" transform="translate(-40.698 -95.175)"/>
<path d="M76.694 128.845c-.85-.012-1.668.253-2.434.67-.01.592-.015 1.17.109 1.772.323 1.573.422 3.553-.07 5.147-.247.804-.684 1.535-1.347 1.891-.663.356-1.467.296-2.362-.159-.522-.266-1.059-.62-1.487-.757-.223-.072-.392-.096-.522-.069-.13.027-.232.094-.362.27-.53.719-.681 1.823-.497 2.876.177 1.012.418 1.438.543 1.56.143.137.26.154.604.055.548-.158 1.523-.857 2.573-.972l.02-.002.5.058c.686.081 1.247.562 1.622 1.19.372.62.591 1.37.73 2.136.279 1.532.25 3.16.083 4.232-.14.91-.394 1.72-.632 2.53 1.719-.385 3.485-.692 5.307-.36 1.174.214 2.749.574 3.762 1.977l.088.122.046.159c.162.551.16 1.114.024 1.578-.13.45-.348.772-.533 1.023-.181.246-.336.444-.437.606-.102.16-.141.275-.145.336-.01.17 0 .197.07.315.057.1.186.242.39.366.408.246 1.106.414 1.843.45a7.842 7.842 0 0 0 2.174-.21 4.28 4.28 0 0 0 .822-.296c.218-.106.385-.242.377-.233l.029-.031c.025-.035.05-.072.05-.068 0-.004 0-.017-.003-.05a2.733 2.733 0 0 0-.21-.579c-.26-.548-.839-1.333-.822-2.46.01-.657.27-1.21.598-1.576.32-.357.696-.575 1.074-.736.759-.323 1.57-.418 2.054-.458 1.653-.136 3.252.296 4.755.765.457.142.905.29 1.352.434.325-2.258.902-4.247.598-6.217-.071-.46-.25-1.169-.486-1.684-.238-.518-.495-.762-.675-.779-.351-.032-.716.14-1.174.418-.457.277-1.005.665-1.695.742-.745.082-1.406-.291-1.84-.908-.428-.608-.653-1.394-.754-2.196-.203-1.596.016-3.377.794-4.493.568-.813 1.358-.984 2.024-.835.65.146 1.243.51 1.769.779.524.267.99.413 1.237.365a.527.527 0 0 0 .346-.2c.11-.132.235-.373.37-.798.612-1.918.27-3.894-.246-6.054-2.815-.851-5.49-1.534-8.089-.267a.727.727 0 0 0-.223.148c-.024.028-.018.021-.026.056.001-.003-.01.178.07.44.162.522.611 1.29.911 1.978l.004.009.029.063.024.084V133c.162.635.016 1.297-.274 1.727-.272.404-.618.636-.952.81-.675.353-1.399.484-1.724.533a5.888 5.888 0 0 1-3.973-.795c-.512-.311-.876-.594-1.133-1.02-.282-.466-.318-1.084-.172-1.557.252-.814.715-1.266.971-1.89a.663.663 0 0 0 .047-.14c.001-.013 0-.006-.007-.037a.761.761 0 0 0-.184-.268c-.264-.267-.865-.595-1.54-.826-1.356-.462-3.07-.659-3.583-.686-.062-.002-.121-.006-.178-.006z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.991342;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
</svg>Relearn
</a>
</div>
<search><form action="/hugo-theme-relearn/pir/search.html" method="get">
<div class="searchbox default-animation">
<button class="search-detail" type="submit" title="Searrrch (CTRL+ALT+f)"><i class="fas fa-search"></i></button>
<label class="a11y-only" for="R-search-by">Searrrch</label>
<input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="Searrrch...">
<button class="search-clear" type="button" data-search-clear="" title="Clearrr searrrch"><i class="fas fa-times" title="Clearrr searrrch"></i></button>
</div>
</form></search>
<script>
var contentLangs=['en'];
</script>
<script src="/hugo-theme-relearn/js/auto-complete.js?1725478813" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.min.js?1725478813" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.stemmer.support.min.js?1725478813" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.multi.min.js?1725478813" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.en.min.js?1725478813" defer></script>
<script src="/hugo-theme-relearn/js/search.js?1725478813" defer></script>
</div>
<div id="R-homelinks" class="default-animation">
<hr class="padding">
</div>
<div id="R-content-wrapper" class="highlightable">
<div id="R-topics">
<ul class="enlarge morespace collapsible-menu">
<li data-nav-id="/hugo-theme-relearn/pir/basics/index.html" class=""><input type="checkbox" id="R-section-a6deabe447afe1b2e1405bfc57ca61ff" aria-controls="R-subsections-a6deabe447afe1b2e1405bfc57ca61ff"><label for="R-section-a6deabe447afe1b2e1405bfc57ca61ff"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Basics</span></label><a class="padding" href="/hugo-theme-relearn/pir/basics/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">1.</b> Basics<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-a6deabe447afe1b2e1405bfc57ca61ff" class="morespace collapsible-menu">
<li data-nav-id="/hugo-theme-relearn/pir/basics/migration/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/basics/migration/index.html">What&#39;s New<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/basics/requirements/index.html">Requirrrements<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/installation/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/basics/installation/index.html">Installat&#39;n<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/configuration/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/basics/configuration/index.html">Configurrrat&#39;n<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/branding/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/basics/branding/index.html">Brrrand&#39;n<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/customization/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/basics/customization/index.html">Customizat&#39;n<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/generator/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/basics/generator/index.html">Stylesheet generrrat&#39;r<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/topbar/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/basics/topbar/index.html">Topbarrr Modificat&#39;n<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/history/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/basics/history/index.html">Historrry<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/index.html" class="parent "><input type="checkbox" id="R-section-fa8195cb3a7fa53d39f9adae98977ba1" aria-controls="R-subsections-fa8195cb3a7fa53d39f9adae98977ba1" checked><label for="R-section-fa8195cb3a7fa53d39f9adae98977ba1"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Rambl&#39;n</span></label><a class="padding" href="/hugo-theme-relearn/pir/cont/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">2.</b> Rambl&#39;n<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-fa8195cb3a7fa53d39f9adae98977ba1" class="morespace collapsible-menu">
<li data-nav-id="/hugo-theme-relearn/pir/cont/pages/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/cont/pages/index.html">planks orrrganizat&#39;n<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/frontmatter/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/cont/frontmatter/index.html">Frrrontmatter<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/archetypes/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/cont/archetypes/index.html">Arrrchetypes<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/markdown/index.html" class="active"><a class="padding" href="/hugo-theme-relearn/pir/cont/markdown/index.html">Marrrkdown rules<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/imageeffects/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/cont/imageeffects/index.html">Image Effects<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/menushortcuts/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/cont/menushortcuts/index.html">Menu extrrra shorrrtcuts<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/i18n/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/cont/i18n/index.html">Multilingual<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/taxonomy/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/cont/taxonomy/index.html">Taxonomy<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/index.html" class=""><input type="checkbox" id="R-section-3fd53efe5229f2c1a55795ee597d09d8" aria-controls="R-subsections-3fd53efe5229f2c1a55795ee597d09d8"><label for="R-section-3fd53efe5229f2c1a55795ee597d09d8"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Shorrrtcodes</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">3.</b> Shorrrtcodes<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-3fd53efe5229f2c1a55795ee597d09d8" class="morespace collapsible-menu">
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/badge/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/badge/index.html">Badge<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/button/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/button/index.html">Button<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/index.html" class=""><input type="checkbox" id="R-section-d7ecedf0d1b5486d6a0c132e8a234d06" aria-controls="R-subsections-d7ecedf0d1b5486d6a0c132e8a234d06"><label for="R-section-d7ecedf0d1b5486d6a0c132e8a234d06"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Children</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/index.html">Children<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-d7ecedf0d1b5486d6a0c132e8a234d06" class="morespace collapsible-menu">
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/test/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/test/index.html">plank X<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" class=""><input type="checkbox" id="R-section-d3cff5da0d8420d4871c516833b2f97d" aria-controls="R-subsections-d3cff5da0d8420d4871c516833b2f97d"><label for="R-section-d3cff5da0d8420d4871c516833b2f97d"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html">plank 1<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-d3cff5da0d8420d4871c516833b2f97d" class="morespace collapsible-menu">
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" class="alwaysopen"><input type="checkbox" id="R-section-8c27e33b2765b18da99f6c8dc40400b8" aria-controls="R-subsections-8c27e33b2765b18da99f6c8dc40400b8" checked><label for="R-section-8c27e33b2765b18da99f6c8dc40400b8"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1-1</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html">plank 1-1<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-8c27e33b2765b18da99f6c8dc40400b8" class="morespace collapsible-menu">
<li data-nav-id="" class="alwaysopen"><input type="checkbox" id="R-section-51e1e8deb580f78714eca799da517f1d" aria-controls="R-subsections-51e1e8deb580f78714eca799da517f1d" checked><label for="R-section-51e1e8deb580f78714eca799da517f1d"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1-1-2 (headless)</span></label><span class="padding">plank 1-1-2 (headless)</span><ul id="R-subsections-51e1e8deb580f78714eca799da517f1d" class="morespace collapsible-menu">
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">plank 1-1-2-1<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">plank 1-1-2-2<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html">plank 2<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" class=""><input type="checkbox" id="R-section-c4351ae325c16fd2130d6c815bffc83f" aria-controls="R-subsections-c4351ae325c16fd2130d6c815bffc83f"><label for="R-section-c4351ae325c16fd2130d6c815bffc83f"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 3</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html">plank 3<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-c4351ae325c16fd2130d6c815bffc83f" class="morespace collapsible-menu">
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html">plank 3-1<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/expand/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/expand/index.html">Expand<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/highlight/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/highlight/index.html">Highlight<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/icon/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/icon/index.html">Icon<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/include/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/include/index.html">Include<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/math/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/math/index.html">Math<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html">Merrrmaid<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/notice/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/notice/index.html">Notice<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/openapi/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/openapi/index.html">OpenAPI<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/resources/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/resources/index.html">Resources<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/siteparam/index.html">SiteParam<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/tab/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/tab/index.html">Tab<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/tabs/index.html" class=""><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/tabs/index.html">Tabs<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
</ul>
</div>
<div id="R-shortcuts">
<div class="nav-title padding">Morrre</div>
<ul class="space">
<li><a class="padding" href="https://github.com/McShelby/hugo-theme-relearn"><i class='fa-fw fab fa-github'></i> GitHub repo</a></li>
<li><a class="padding" href="/pir/hugo-theme-relearn/pir/showcase/"><i class='fa-fw fas fa-camera'></i> Showcases</a></li>
<li><a class="padding" href="/pir/hugo-theme-relearn/pir/more/credits/"><i class='fa-fw fas fa-bullhorn'></i> Crrredits</a></li>
<li><a class="padding" href="/pir/hugo-theme-relearn/pir/tags/"><i class='fa-fw fas fa-tags'></i> Arrr! Tags</a></li>
<li><a class="padding" href="/pir/hugo-theme-relearn/pir/categories/"><i class='fa-fw fas fa-layer-group'></i> Categorrries</a></li>
</ul>
</div>
<div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter"></div>
<div id="R-menu-footer">
<hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter">
<div id="R-prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks showLangSwitch showVariantSwitch showVisitedLinks">
<ul>
<li id="R-select-language-container" class="footerLangSwitch showLangSwitch">
<div class="padding menu-control">
<i class="fa-fw fas fa-language"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="R-select-language">Language</label>
<select id="R-select-language" onchange="location = this.querySelector( this.value ).dataset.url;">
<option id="R-select-language-en" value="#R-select-language-en" data-url="/hugo-theme-relearn/cont/markdown/index.html" lang="en">English</option>
<option id="R-select-language-pir" value="#R-select-language-pir" data-url="/hugo-theme-relearn/pir/cont/markdown/index.html" lang="art-x-pir" selected>Arrr! ☠ Pirrrates ☠</option>
</select>
</div>
<div class="clear"></div>
</div>
</li>
<li id="R-select-variant-container" class="footerVariantSwitch showVariantSwitch">
<div class="padding menu-control">
<i class="fa-fw fas fa-paint-brush"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="R-select-variant">Theme</label>
<select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
<option id="R-select-variant-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
<option id="R-select-variant-relearn-light" value="relearn-light">Relearn Light</option>
<option id="R-select-variant-relearn-dark" value="relearn-dark">Relearn Dark</option>
<option id="R-select-variant-relearn-bright" value="relearn-bright">Relearn Bright</option>
<option id="R-select-variant-zen-auto" value="zen-auto">Zen Light/Dark</option>
<option id="R-select-variant-zen-light" value="zen-light">Zen Light</option>
<option id="R-select-variant-zen-dark" value="zen-dark">Zen Dark</option>
<option id="R-select-variant-retro-auto" value="retro-auto">Retro Learn/Neon</option>
<option id="R-select-variant-neon" value="neon">Neon</option>
<option id="R-select-variant-learn" value="learn">Learn</option>
<option id="R-select-variant-blue" value="blue">Blue</option>
<option id="R-select-variant-green" value="green">Green</option>
<option id="R-select-variant-red" value="red">Red</option>
</select>
</div>
<div class="clear"></div>
</div>
<script>window.variants && variants.markSelectedVariant();</script>
</li>
<li class="footerVisitedLinks showVisitedLinks">
<div class="padding menu-control">
<i class="fa-fw fas fa-history"></i>
<span>&nbsp;</span>
<div class="control-style">
<button onclick="clearHistory();">Clearrr Historrry</button>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div id="R-footer" class="footerFooter showFooter">
<span class="github-buttons"></span>
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script>
function githubButtonsScheme(){
var scheme = 'light';
var colorPropertyValue = window.getComputedStyle( document.querySelector( '#R-sidebar' ) ).getPropertyValue( 'background-color' );
var colorValues = colorPropertyValue.match( /\d+/g ).map( function( e ){ return parseInt(e,10); });
if( colorValues.length === 3 && ((0.2126 * colorValues[0]) + (0.7152 * colorValues[1]) + (0.0722 * colorValues[2]) < 165) ){
scheme = 'dark';
}
return scheme;
}
function githubButtonsInit(){
if( !window.githubButtons ){
setTimeout( githubButtonsInit, 50 );
return;
}
var scheme = githubButtonsScheme();
var githubButtonsHTML = `
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-color-scheme="${scheme}" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
`;
document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
anchor.dataset.colorScheme = scheme;
window.githubButtons.render( anchor, function( el ){
anchor.parentNode.replaceChild( el, anchor );
});
});
}
document.addEventListener( 'themeVariantLoaded', function( e ){
setTimeout( githubButtonsInit, 400 );
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
setTimeout( githubButtonsInit, 400 );
});
</script>
<script async src="/hugo-theme-relearn/js/github-buttons.js?1725478813"></script>
</div>
</div>
</div>
</aside>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1725478813" defer></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1725478813" defer></script>
<script src="/hugo-theme-relearn/js/theme.js?1725478813" defer></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink