mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 09:43:06 +00:00
7740 lines
495 KiB
HTML
7740 lines
495 KiB
HTML
<!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.136.5">
|
||
<meta name="generator" content="Relearn 7.1.0">
|
||
<meta name="description" content="Cap'n Hugo uses Marrrkdown as its rrrambl'n format. However, there be a lot o' th'ns that Marrrkdown doesn’t support well.">
|
||
<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="Shorrrtcodes :: Cap'n Hugo Relearrrn Theme">
|
||
<meta name="twitter:description" content="Cap'n Hugo uses Marrrkdown as its rrrambl'n format. However, there be a lot o' th'ns that Marrrkdown doesn’t support well.">
|
||
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html">
|
||
<meta property="og:site_name" content="Cap'n Hugo Relearrrn Theme">
|
||
<meta property="og:title" content="Shorrrtcodes :: Cap'n Hugo Relearrrn Theme">
|
||
<meta property="og:description" content="Cap'n Hugo uses Marrrkdown as its rrrambl'n format. However, there be a lot o' th'ns that Marrrkdown doesn’t support well.">
|
||
<meta property="og:locale" content="art_x_pir">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
||
<meta itemprop="name" content="Shorrrtcodes :: Cap'n Hugo Relearrrn Theme">
|
||
<meta itemprop="description" content="Cap'n Hugo uses Marrrkdown as its rrrambl'n format. However, there be a lot o' th'ns that Marrrkdown doesn’t support well.">
|
||
<meta itemprop="wordCount" content="174">
|
||
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
||
<meta itemprop="keywords" content="Reference">
|
||
<title>Shorrrtcodes :: Cap'n Hugo Relearrrn Theme</title>
|
||
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/index.html" rel="alternate" hreflang="x-default">
|
||
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/index.html" rel="alternate" hreflang="en">
|
||
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="art-x-pir">
|
||
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="canonical" type="text/html" title="Shorrrtcodes :: Cap'n Hugo Relearrrn Theme">
|
||
<link href="/hugo-theme-relearn/pir/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shorrrtcodes :: Cap'n Hugo Relearrrn Theme">
|
||
<link href="/hugo-theme-relearn/images/logo.svg?1729808083" rel="icon" type="image/svg+xml">
|
||
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729808083" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729808083" rel="stylesheet"></noscript>
|
||
<link href="/hugo-theme-relearn/css/nucleus.css?1729808083" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/auto-complete.css?1729808083" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1729808083" rel="stylesheet"></noscript>
|
||
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1729808083" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/fonts.css?1729808083" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1729808083" rel="stylesheet"></noscript>
|
||
<link href="/hugo-theme-relearn/css/theme.css?1729808083" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1729808083" rel="stylesheet" id="R-variant-style">
|
||
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1729808083" rel="stylesheet" id="R-variant-chroma-style">
|
||
<link href="/hugo-theme-relearn/css/print.css?1729808083" rel="stylesheet" media="print">
|
||
<link href="/hugo-theme-relearn/css/format-print.css?1729808083" rel="stylesheet">
|
||
<script src="/hugo-theme-relearn/js/variant.js?1729808083"></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;
|
||
// 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 print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/pir/shortcodes/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+ALT+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' Contents (CTRL+ALT+t)"><i class="fa-fw fas fa-list-alt"></i></button>
|
||
<div class="topbar-content">
|
||
<div class="topbar-content-wrapper">
|
||
</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"><span itemprop="name">Shorrrtcodes</span><meta itemprop="position" content="1"></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/shortcodes/_index.pir.md" target="_self" title="Edit (CTRL+ALT+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/shortcodes/index.print.html" title="Prrrint whole chapterrr (CTRL+ALT+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/authoring/imageeffects/index.html" title="Image Effects (🡒)"><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/shortcodes/badge/index.html" title="Badge (🡐)"><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 chapter" tabindex="-1">
|
||
<div class="flex-block-wrapper">
|
||
<article class="chapter narrow">
|
||
<header class="headline">
|
||
</header>
|
||
<div class="article-subheading">T' chapterrr 4</div>
|
||
|
||
<h1 id="shorrrtcodes">Shorrrtcodes</h1>
|
||
|
||
<p>Cap'n Hugo uses Marrrkdown as its rrrambl'n format. However, there be a lot o' th'ns that Marrrkdown doesn’t support well.</p>
|
||
<p>Ye could use pure HTML t' expand yer possibilities. But this happens t' be a bad idea. Everyone uses Marrrkdown because it’s pure an' simple t' read. Ye should avoid HTML t' keep it as simple an' port'ble as poss'ble.</p>
|
||
<p>T' avoid Markdown’s limitat'ns, Cap'n Hugo created <a href="https://gohugo.io/content-management/shortcodes/" rel="external" target="_self">shorrrtcodes</a>. A shortcode be a simple snippet inside o' a plank.</p>
|
||
<p>Th' Relearrrn theme provides many shorrrtcodes on top o' <a href="https://gohugo.io/content-management/shortcodes/#embedded-shortcodes" rel="external" target="_self">Hugo’s exist'n ones</a>.</p>
|
||
<div class="children children-h2 children-sort-">
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/badge/index.html">Badge</a></h2><p>Marker badges t' display 'n yer text</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/button/index.html">Button</a></h2><p>Click'ble buttons</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/index.html">Children</a></h2><p>List th' child planks o' a plank</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/expand/index.html">Expand</a></h2><p>Expandable/collaps'ble sections o' text</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/highlight/index.html">Highlight</a></h2><p>Render code wit' a rules highlighter</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html">Ay'con</a></h2><p>Nice ay'cons fer yer plank</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/include/index.html">Include</a></h2><p>Displays rrrambl'n from other files</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/math/index.html">Math</a></h2><p>Beautiful math an' chemical formulae</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html">Merrrmaid</a></h2><p>Generate diagrams an' flowcharts from text</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html">Notice</a></h2><p>Disclaimers t' help ye structure yer plank</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/openapi/index.html">OpenAPI</a></h2><p>UI fer yer OpenAPI / Swagger specificat'ns</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/resources/index.html">Resources</a></h2><p>List resources contained 'n a plank bundle</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/siteparam/index.html">SiteParam</a></h2><p>Get value o' ship params</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/tab/index.html">Tab</a></h2><p>Show rrrambl'n 'n a single tab</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/tabs/index.html">Tabs</a></h2><p>Show rrrambl'n 'n tabbed views</p>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Shorrrtcodes</h1>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="badge">Badge</h1>
|
||
|
||
<p>Th' <code>badge</code> shortcode displays little markers 'n yer text wit' adjust'ble color, title an' ay'con.</p>
|
||
<p><span class="badge cstyle default"><span class="badge-content">Important</span></span>
|
||
<span class="badge cstyle primary badge-with-title"><span class="badge-title">Version</span><span class="badge-content">6.6.6</span></span>
|
||
<span class="badge cstyle red badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i></span><span class="badge-content">Captain</span></span>
|
||
<span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-info-circle"></i> Ahoi</span><span class="badge-content">New</span></span>
|
||
<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;">Awesome</span></span></p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Important</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Version"</span> <span class="o">%</span><span class="p">}}</span><span class="mf">6.6.6</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"angle-double-up"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Captain</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">New</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">color</span><span class="p">=</span><span class="s">"fuchsia"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"fa-fw fab fa-hackerrank"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/badge.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"Important"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/badge.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"style"</span> <span class="s">"primary"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"Version"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"6.6.6"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/badge.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"style"</span> <span class="s">"red"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"angle-double-up"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"Captain"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/badge.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"style"</span> <span class="s">"info"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"New"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/badge.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"color"</span> <span class="s">"fuchsia"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"fab fa-hackerrank"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"Awesome"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>style</strong></td>
|
||
<td><code>default</code></td>
|
||
<td>Th' style scheme used fer th' badge.<br><br>- by severity: <code>caut'n</code>, <code>important</code>, <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>cyan</code>, <code>green</code>, <code>grey</code>, <code>magenta</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code><br><br>Ye can also <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">define yer own styles</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>color</strong></td>
|
||
<td>see notes</td>
|
||
<td>Th' <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel="external" target="_self">CSS color value</a> t' be used. If not set, th' chosen color depends on th' <strong>style</strong>. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n color fer th' severity<br>- fer all other styles: th' correspond'n color</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>title</strong></td>
|
||
<td>see notes</td>
|
||
<td>Arbitrary text fer th' badge title. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwrite th' default.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other styles: <em><empty></em><br><br>If ye want no title fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>ay'con</strong></td>
|
||
<td>see notes</td>
|
||
<td><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n on th' <strong>style</strong> there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n ay'con fer th' severity<br>- fer all other styles: <em><empty></em><br><br>If ye want no ay'con fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td><em><empty></em></td>
|
||
<td>Arbitrary text fer th' badge.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="style">Style</h3>
|
||
<h4 id="by-severity">By Severity</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"caution"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Magenta</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"important"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Cyan</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Blue</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"note"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Orange</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"tip"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Green</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"warning"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Red</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="badge cstyle caut'n badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-hand"></i> Caut'n</span><span class="badge-content">Magenta</span></span>
|
||
<span class="badge cstyle important badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bolt"></i> Important</span><span class="badge-content">Cyan</span></span>
|
||
<span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-info-circle"></i> Ahoi</span><span class="badge-content">Blue</span></span>
|
||
<span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</span><span class="badge-content">Orange</span></span>
|
||
<span class="badge cstyle tip badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-lightbulb"></i> Smarrrt Arrrse</span><span class="badge-content">Green</span></span>
|
||
<span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i> Arrr</span><span class="badge-content">Red</span></span></p>
|
||
<h4 id="by-brand-colors">By Brand Colors</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"bullhorn"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Announcement"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Mandatory</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"secondary"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"bullhorn"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Announcement"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Optional</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"accent"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"bullhorn"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Announcement"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Special</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="badge cstyle primary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bullhorn"></i> Announcement</span><span class="badge-content">Mandatory</span></span>
|
||
<span class="badge cstyle secondary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bullhorn"></i> Announcement</span><span class="badge-content">Optional</span></span>
|
||
<span class="badge cstyle accent badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bullhorn"></i> Announcement</span><span class="badge-content">Special</span></span></p>
|
||
<h4 id="by-color">By Color</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"blue"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"palette"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Color"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Blue</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"cyan"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"palette"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Color"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Cyan</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"green"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"palette"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Color"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Green</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"grey"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"palette"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Color"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Grey</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"magenta"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"palette"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Color"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Magenta</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"orange"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"palette"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Color"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Orange</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"palette"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Color"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Red</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="badge cstyle blue badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Blue</span></span>
|
||
<span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Cyan</span></span>
|
||
<span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Green</span></span>
|
||
<span class="badge cstyle grey badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Grey</span></span>
|
||
<span class="badge cstyle magenta badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Magenta</span></span>
|
||
<span class="badge cstyle orange badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Orange</span></span>
|
||
<span class="badge cstyle red badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Red</span></span></p>
|
||
<h4 id="by-special-color">By Special Color</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"default"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"palette"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Color"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Default</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"transparent"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"palette"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Color"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Transparent</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Default</span></span>
|
||
<span class="badge cstyle transparent badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Transparent</span></span></p>
|
||
<h3 id="variants">Variants</h3>
|
||
<h4 id="without-icon-and-title-text">Without Ay'con an' Title Text</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span><span class="mf">6.6.6</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">" "</span> <span class="nx">title</span><span class="p">=</span><span class="s">" "</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Captain</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="badge cstyle default"><span class="badge-content">6.6.6</span></span>
|
||
<span class="badge cstyle info"><span class="badge-content">Awesome</span></span>
|
||
<span class="badge cstyle red"><span class="badge-content">Captain</span></span></p>
|
||
<h4 id="without-icon">Without Ay'con</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Version"</span> <span class="o">%</span><span class="p">}}</span><span class="mf">6.6.6</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">" "</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Rank"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Captain</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="badge cstyle default badge-with-title"><span class="badge-title">Version</span><span class="badge-content">6.6.6</span></span>
|
||
<span class="badge cstyle info badge-with-title"><span class="badge-title">Ahoi</span><span class="badge-content">Awesome</span></span>
|
||
<span class="badge cstyle red badge-with-title"><span class="badge-title">Rank</span><span class="badge-content">Captain</span></span></p>
|
||
<h4 id="without-title-text">Without Title Text</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"star"</span> <span class="o">%</span><span class="p">}}</span><span class="mf">6.6.6</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="nx">title</span><span class="p">=</span><span class="s">" "</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"angle-double-up"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Captain</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-star"></i></span><span class="badge-content">6.6.6</span></span>
|
||
<span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-info-circle"></i></span><span class="badge-content">Awesome</span></span>
|
||
<span class="badge cstyle red badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i></span><span class="badge-content">Captain</span></span></p>
|
||
<h4 id="all-set">All Set</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"star"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Version"</span> <span class="o">%</span><span class="p">}}</span><span class="mf">6.6.6</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"angle-double-up"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Rank"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Captain</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-star"></i> Version</span><span class="badge-content">6.6.6</span></span>
|
||
<span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-info-circle"></i> Ahoi</span><span class="badge-content">Awesome</span></span>
|
||
<span class="badge cstyle red badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i> Rank</span><span class="badge-content">Captain</span></span></p>
|
||
<h4 id="override-for-severity">Override fer Severity</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"rocket"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Feature"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-rocket"></i> Feature</span><span class="badge-content">Awesome</span></span>
|
||
<h3 id="other">Other</h3>
|
||
<h4 id="with-user-defined-color-font-awesome-brand-icon-and-markdown-title-and-content">Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown Title an' Rrrambl'n</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">color</span><span class="p">=</span><span class="s">"fuchsia"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"fa-fw fab fa-hackerrank"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"**Font**"</span> <span class="o">%</span><span class="p">}}</span><span class="o">**</span><span class="nx">Awesome</span><span class="o">**</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i> <strong>Font</strong></span><span class="badge-content" style="background-color: fuchsia;"><strong>Awesome</strong></span></span>
|
||
<h4 id="with-icon-content">Wit' Ay'con Rrrambl'n</h4>
|
||
<p>Ye can combine th' badge wit' th' <a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html"><code>ay'con</code> shortcode</a> t' create even more stunn'n visuals.</p>
|
||
<p>In this case ye need t' declare <code>{{< badge >}}</code> instead o' <code>{{% badge %}}</code>. Avast, that 'n this case it be not poss'ble t' put markdown 'n th' rrrambl'n.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"angle-double-up"</span> <span class="p">>}}{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">skull</span><span class="o">-</span><span class="nx">crossbones</span> <span class="o">%</span><span class="p">}}{{<</span> <span class="o">/</span><span class="nx">badge</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"angle-double-up"</span> <span class="p">>}}{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">skull</span><span class="o">-</span><span class="nx">crossbones</span> <span class="o">%</span><span class="p">}}</span> <span class="nx">Pirate</span><span class="p">{{<</span> <span class="o">/</span><span class="nx">badge</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Rank"</span> <span class="p">>}}{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">skull</span><span class="o">-</span><span class="nx">crossbones</span> <span class="o">%</span><span class="p">}}{{<</span> <span class="o">/</span><span class="nx">badge</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Rank"</span> <span class="p">>}}{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">skull</span><span class="o">-</span><span class="nx">crossbones</span> <span class="o">%</span><span class="p">}}</span> <span class="nx">Pirate</span><span class="p">{{<</span> <span class="o">/</span><span class="nx">badge</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"angle-double-up"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Rank"</span> <span class="p">>}}{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">skull</span><span class="o">-</span><span class="nx">crossbones</span> <span class="o">%</span><span class="p">}}{{<</span> <span class="o">/</span><span class="nx">badge</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"angle-double-up"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Rank"</span> <span class="p">>}}{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">skull</span><span class="o">-</span><span class="nx">crossbones</span> <span class="o">%</span><span class="p">}}</span> <span class="nx">Pirate</span><span class="p">{{<</span> <span class="o">/</span><span class="nx">badge</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
<p><span class="badge cstyle primary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i></span><span class="badge-content"><i class="fa-fw fas fa-skull-crossbones"></i></span></span><br>
|
||
<span class="badge cstyle primary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i></span><span class="badge-content"><i class="fa-fw fas fa-skull-crossbones"></i> Pirate</span></span><br>
|
||
<span class="badge cstyle primary badge-with-title"><span class="badge-title">Rank</span><span class="badge-content"><i class="fa-fw fas fa-skull-crossbones"></i></span></span><br>
|
||
<span class="badge cstyle primary badge-with-title"><span class="badge-title">Rank</span><span class="badge-content"><i class="fa-fw fas fa-skull-crossbones"></i> Pirate</span></span><br>
|
||
<span class="badge cstyle primary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i> Rank</span><span class="badge-content"><i class="fa-fw fas fa-skull-crossbones"></i></span></span><br>
|
||
<span class="badge cstyle primary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i> Rank</span><span class="badge-content"><i class="fa-fw fas fa-skull-crossbones"></i> Pirate</span></span></p>
|
||
<h4 id="inside-of-text">Inside o' Text</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="nx">Lorem</span> <span class="nx">ipsum</span> <span class="nx">dolor</span> <span class="nx">sit</span> <span class="nx">amet</span><span class="p">,</span> <span class="nx">graecis</span> <span class="nx">denique</span> <span class="nx">ei</span> <span class="nx">vel</span><span class="p">,</span> <span class="nx">at</span> <span class="nx">duo</span> <span class="nx">primis</span> <span class="nx">mandamus</span><span class="p">.</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">"blue"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"rocket"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span> <span class="nx">Et</span> <span class="nx">legere</span> <span class="nx">ocurreret</span> <span class="nx">pri</span><span class="p">,</span> <span class="nx">animal</span> <span class="nx">tacimates</span> <span class="nx">complectitur</span> <span class="nx">ad</span> <span class="nx">cum</span><span class="p">.</span> <span class="nx">Cu</span> <span class="nx">eum</span> <span class="nx">inermis</span> <span class="nx">inimicus</span> <span class="nx">efficiendi</span><span class="p">.</span> <span class="nx">Labore</span> <span class="nx">officiis</span> <span class="nx">his</span> <span class="nx">ex</span><span class="p">,</span> <span class="nx">soluta</span> <span class="nx">officiis</span> <span class="nx">concludaturque</span> <span class="nx">ei</span> <span class="nx">qui</span><span class="p">,</span> <span class="nx">vide</span> <span class="nx">sensibus</span> <span class="nx">vim</span> <span class="nx">ad</span><span class="p">.</span></span></span></code></pre></div>
|
||
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. <span class="badge cstyle blue badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-rocket"></i></span><span class="badge-content">Awesome</span></span> 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>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="button">Button</h1>
|
||
|
||
<p>Th' <code>button</code> shortcode displays a click'ble button wit' adjust'ble color, title an' ay'con.</p>
|
||
<p><span class="btn cstyle interactive transparent"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive warning"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-dragon"></i> <span class="title">Get Cap'n Hugo</span></a></span></p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"warning"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"dragon"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/button.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"href"</span> <span class="s">"https://gohugo.io/"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"Get Hugo"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/button.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"href"</span> <span class="s">"https://gohugo.io/"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"style"</span> <span class="s">"warning"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"dragon"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"Get Hugo"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>href</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>Either th' destinat'n URL fer th' button or JavaScript code t' be executed on click. If this parameter be not set, th' button will do noth'n but be still displayed as click'ble.<br><br>- if start'n wit' <code>javascript:</code> all follow'n text will be executed 'n yer browser<br>- every other str'n will be interpreted as URL</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>style</strong></td>
|
||
<td><code>transparent</code></td>
|
||
<td>Th' style scheme used fer th' button.<br><br>- by severity: <code>caut'n</code>, <code>important</code>, <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>cyan</code>, <code>green</code>, <code>grey</code>, <code>magenta</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code><br><br>Ye can also <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">define yer own styles</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>color</strong></td>
|
||
<td>see notes</td>
|
||
<td>Th' <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel="external" target="_self">CSS color value</a> t' be used. If not set, th' chosen color depends on th' <strong>style</strong>. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n color fer th' severity<br>- fer all other styles: th' correspond'n color</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>ay'con</strong></td>
|
||
<td>see notes</td>
|
||
<td><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n on th' <strong>style</strong> there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n ay'con fer th' severity<br>- fer all other styles: <em><empty></em><br><br>If ye want no ay'con fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>iconposit'n</strong></td>
|
||
<td><code>left</code></td>
|
||
<td>Places th' ay'con t' th' <code>left</code> or <code>right</code> o' th' title.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>target</strong></td>
|
||
<td>see notes</td>
|
||
<td>Th' destinat'n frame/window if <strong>href</strong> be an URL. Otherwise th' parameter be not used. This behaves similar t' normal links. If th' parameter be not given it defaults t':<br><br>- th' sett'n o' <code>externalLinkTarget</code> or <code>_blank</code> if not set, fer any address start'n wit' <code>http://</code> or <code>https://</code><br>- no specific value fer all other links</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>type</strong></td>
|
||
<td>see notes</td>
|
||
<td>Th' <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type" rel="external" target="_self">button type</a> if <strong>href</strong> be JavaScript. Otherwise th' parameter be not used. If th' parameter be not given it defaults t' <code>button</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td>see notes</td>
|
||
<td>Arbitrary text fer th' button title. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwrite th' default.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other styles: <em><empty></em><br><br>If ye want no title fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="style">Style</h3>
|
||
<h4 id="by-severity">By Severity</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"caution"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"important"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"note"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"tip"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"warning"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="btn cstyle interactive caution"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-hand"></i> <span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive important"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-bolt"></i> <span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive info"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-info-circle"></i> <span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive note"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-exclamation-circle"></i> <span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive tip"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-lightbulb"></i> <span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive warning"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-exclamation-triangle"></i> <span class="title">Get Cap'n Hugo</span></a></span></p>
|
||
<h4 id="by-brand-colors">By Brand Colors</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"secondary"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"accent"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="btn cstyle interactive primary"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive secondary"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive accent"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span></p>
|
||
<h4 id="by-color">By Color</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"blue"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"cyan"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"green"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"grey"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"magenta"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"orange"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="btn cstyle interactive blue"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive cyan"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive green"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive grey"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive magenta"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive orange"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive red"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span></p>
|
||
<h4 id="by-special-color">By Special Color</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"default"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"transparent"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="btn cstyle interactive default"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span>
|
||
<span class="btn cstyle interactive transparent"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span></a></span></p>
|
||
<h3 id="icon">Ay'con</h3>
|
||
<h4 id="empty">Empty</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">" "</span> <span class="o">%</span><span class="p">}}{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="btn cstyle interactive transparent"><a href="https://gohugo.io/" target="_self"></a></span>
|
||
<h4 id="only">Only</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"download"</span> <span class="o">%</span><span class="p">}}{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="btn cstyle interactive transparent"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-download"></i></a></span>
|
||
<h4 id="to-the-left">T' th' Left</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"download"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="btn cstyle interactive transparent"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-download"></i> <span class="title">Get Cap'n Hugo</span></a></span>
|
||
<h4 id="to-the-right">T' th' Right</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"download"</span> <span class="nx">iconposit'n</span><span class="p">=</span><span class="s">"right"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="btn cstyle interactive transparent"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo</span> <i class="fa-fw fas fa-download"></i></a></span>
|
||
<h4 id="override-for-severity">Override fer Severity</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"dragon"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"warning"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="btn cstyle interactive warning"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-dragon"></i> <span class="title">Get Cap'n Hugo</span></a></span>
|
||
<h3 id="target">Target</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">target</span><span class="p">=</span><span class="s">"_self"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span> <span class="nx">'n</span> <span class="nx">same</span> <span class="nx">window</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span> <span class="nx">'n</span> <span class="nx">new</span> <span class="nx">Window</span><span class="o">/</span><span class="nf">Frame</span> <span class="p">(</span><span class="k">default</span><span class="p">){{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><span class="btn cstyle interactive transparent"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo 'n same Window/Frame</span></a></span>
|
||
<span class="btn cstyle interactive transparent"><a href="https://gohugo.io/" target="_self"><span class="title">Get Cap'n Hugo 'n new Window/Frame (default)</span></a></span></p>
|
||
<h3 id="other">Other</h3>
|
||
<h4 id="with-user-defined-color-font-awesome-brand-icon-and-markdown-title">Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown Title</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">color</span><span class="p">=</span><span class="s">"fuchsia"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"fa-fw fab fa-hackerrank"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="o">**</span><span class="nx">Cap'n Hugo</span><span class="o">**</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="btn cstyle interactive default" style="--VARIABLE-BOX-color: fuchsia;"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fab fa-hackerrank"></i> <span class="title">Get <strong>Cap'n Hugo</strong></span></a></span>
|
||
<h4 id="severity-style-with-all-defaults">Severity Style wit' All Defaults</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"tip"</span> <span class="o">%</span><span class="p">}}{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="btn cstyle interactive tip"><a href="https://gohugo.io/" target="_self"><i class="fa-fw fas fa-lightbulb"></i> <span class="title">Smarrrt Arrrse</span></a></span>
|
||
<h4 id="button-to-internal-page">Button t' Internal Plank</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"/index.html"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Home</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="btn cstyle interactive transparent"><a href="/index.html"><span class="title">Home</span></a></span>
|
||
<h4 id="button-with-javascript-action">Button wit' JavaScript Act'n</h4>
|
||
<p>If yer JavaScript act'n does not change th' focus afterwards, make sure t' call <code>this.blur()</code> 'n th' end t' unselect th' button.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"bullhorn"</span> <span class="nx">href</span><span class="p">=</span><span class="s">"javascript:alert('Hello world!');this.blur();"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Shout</span> <span class="nx">it</span> <span class="nx">out</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<span class="btn cstyle interactive primary"><button onclick="alert('Hello world!');this.blur();" type="button"><i class="fa-fw fas fa-bullhorn"></i> <span class="title">Shout it out</span></button></span>
|
||
<h4 id="button-within-a-form-element">Button within a <code>form</code> Element</h4>
|
||
<p>T' use native HTML elements 'n yer Marrrkdown, add this 'n yer <code>hugo.toml</code></p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
||
<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"><</span><span class="nt">form</span> <span class="na">act'n</span><span class="o">=</span><span class="s">"../../search.html"</span> <span class="na">method</span><span class="o">=</span><span class="s">"get"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"search-by-detail"</span> <span class="na">class</span><span class="o">=</span><span class="s">"search-by"</span> <span class="na">type</span><span class="o">=</span><span class="s">"search"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> {{% button type="submit" style="secondary" icon="search" %}}Search{{% /button %}}
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">form</span><span class="p">></span></span></span></code></pre></div>
|
||
<form action="../../search.html" method="get">
|
||
<div class="searchform" style="width: 20vw;">
|
||
<input name="search-by-detail" class="search-by" type="search" placeholder="Search...">
|
||
<span class="btn cstyle interactive secondary"><button onclick="" type="submit"><i class="fa-fw fas fa-search"></i> <span class="title">Search</span></button></span>
|
||
</div>
|
||
</form>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="children">Children</h1>
|
||
|
||
<p>Th' <code>children</code> shortcode lists th' child planks o' th' current plank an' its descendants.</p>
|
||
<ul class="children children-li children-sort-title">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html">plank 1</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html">plank 2</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html">plank 3</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/test/index.html">plank X</a></li>
|
||
</ul>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">sort</span><span class="p">=</span><span class="s">"title"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/children.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"sort"</span> <span class="s">"title"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>containerstyle</strong></td>
|
||
<td><code>ul</code></td>
|
||
<td>Choose th' style used t' group all children. It could be any HTML tag name.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>style</strong></td>
|
||
<td><code>li</code></td>
|
||
<td>Choose th' style used t' display each descendant. It could be any HTML tag name.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>showhidden</strong></td>
|
||
<td><code>false</code></td>
|
||
<td>When <code>true</code>, child planks hidden from th' menu will be displayed as well.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>descript'n</strong></td>
|
||
<td><code>false</code></td>
|
||
<td>When <code>true</code> shows a short text under each plank 'n th' list. When no descript'n or summary exists fer th' plank, th' first 70 words o' th' rrrambl'n be taken - <a href="https://gohugo.io/content/summaries/" rel="external" target="_self">read more info about summaries on gohugo.io</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>depth</strong></td>
|
||
<td><code>1</code></td>
|
||
<td>Th' depth o' descendants t' display. For example, if th' value be <code>2</code>, th' shortcode will display two levels o' child planks. T' get all descendants, set this value t' a high number eg. <code>999</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>sort</strong></td>
|
||
<td><code>auto</code></td>
|
||
<td>Th' sort criteria o' th' displayed list.<br><br>- <code>auto</code> defaults t' <code>ordersectionsby</code> o' th' page’s <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span><br> or t' <code>ordersectionsby</code> o' th' configurat'n <span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span><br> or t' <code>weight</code><br>- <code>weight</code><br>- <code>title</code><br>- <code>modifieddate</code><br>- <code>expirydate</code><br>- <code>publishdate</code><br>- <code>date</code><br>- <code>length</code><br>- <code>default</code> adher'n t' Hugo’s default sort criteria</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="all-default">All Default</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/test/index.html">plank X</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html">plank 1</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html">plank 2</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html">plank 3</a></li>
|
||
</ul>
|
||
<h3 id="with-description">Wit' Descript'n</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">descript'n</span><span class="p">=</span><span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/test/index.html">plank X</a><p>This be a plain plank test, an' th' beginn'n o' a YAML multiline descript'n...
|
||
</p></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html">plank 1</a><p>This be a demo child plank</p></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html">plank 2</a><p><p>This be a demo child plank wit' no descript'n.</p>
|
||
<p>So its rrrambl'n be used as descript'n.</p></p></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html">plank 3</a><p>This be a demo child plank</p></li>
|
||
</ul>
|
||
<h3 id="infinite-depth-and-hidden-pages">Infinite Depth an' Hidden Planks</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">depth</span><span class="p">=</span><span class="s">"999"</span> <span class="nx">showhidden</span><span class="p">=</span><span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/test/index.html">plank X</a><ul></ul></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html">plank 1</a><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">plank 1-1-1 (hidden)</a><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html">plank 1-1-1-1</a><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html">plank 1-1-1-1-1 (hidden)</a><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html">plank 1-1-1-1-1-1</a><ul></ul></li></ul></li></ul></li></ul></li>
|
||
<li><span>plank 1-1-2 (headless)</span><ul>
|
||
<li><a 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</a><ul></ul></li>
|
||
<li><a 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</a><ul></ul></li></ul></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3</a><ul></ul></li></ul></li></ul></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html">plank 2</a><ul></ul></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html">plank 3</a><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html">plank 3-1</a><ul></ul></li></ul></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html">plank 4 (hidden)</a><ul></ul></li>
|
||
</ul>
|
||
<h3 id="heading-styles-for-container-and-elements">Head'n Styles fer Container an' Elements</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">"div"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"h2"</span> <span class="nx">depth</span><span class="p">=</span><span class="s">"3"</span> <span class="nx">descript'n</span><span class="p">=</span><span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="children children-h2 children-sort-">
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/test/index.html">plank X</a></h2><p>This be a plain plank test, an' th' beginn'n o' a YAML multiline descript'n...
|
||
</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html">plank 1</a></h2><p>This be a demo child plank</p>
|
||
<h3><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a></h3><p>This be a demo child plank</p>
|
||
<h4><span>plank 1-1-2 (headless)</span></h4><p>This be a demo child plank</p>
|
||
<h4><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3</a></h4><p>This be a demo child plank</p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html">plank 2</a></h2><p><p>This be a demo child plank wit' no descript'n.</p>
|
||
<p>So its rrrambl'n be used as descript'n.</p></p>
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html">plank 3</a></h2><p>This be a demo child plank</p>
|
||
<h3><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html">plank 3-1</a></h3><p>This be a plain plank test nested 'n a parent</p>
|
||
</div>
|
||
<h3 id="divs-for-group-and-element-styles">Divs fer Group an' Element Styles</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">"div"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"div"</span> <span class="nx">depth</span><span class="p">=</span><span class="s">"3"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="children children-div children-sort-">
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/test/index.html">plank X</a></div>
|
||
.LinkTitle
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html">plank 1</a></div>
|
||
.LinkTitle
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a></div>
|
||
.LinkTitle
|
||
<div><span>plank 1-1-2 (headless)</span></div>
|
||
.LinkTitle
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3</a></div>
|
||
.LinkTitle
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html">plank 2</a></div>
|
||
.LinkTitle
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html">plank 3</a></div>
|
||
.LinkTitle
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html">plank 3-1</a></div>
|
||
.LinkTitle
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Children</h1>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="R-taxonomy taxonomy-tags 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/children/index.html">Children</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<h1 id="plank-x">plank X</h1>
|
||
|
||
<p>This be a plain demo child plank X.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="R-taxonomy taxonomy-tags 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/children/index.html">Children</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/tags/non-hidden/index.html">Non-Hidden</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<h1 id="plank-1">plank 1</h1>
|
||
|
||
<p>This be a demo child plank.</p>
|
||
<h2 id="subpages-of-this-page">Subpages o' this plank</h2>
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' plank 1</h1>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="R-taxonomy taxonomy-tags 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/children/index.html">Children</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/tags/non-hidden/index.html">Non-Hidden</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<h1 id="plank-1-1">plank 1-1</h1>
|
||
|
||
<p>This be a demo child plank wit' a hidden child. Ye can still access th' hidden child <a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">directly</a> or via th' search.</p>
|
||
<h2 id="subpages-of-this-page">Subpages o' this plank</h2>
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">plank 1-1-1 (hidden)</a></li>
|
||
<li><span>plank 1-1-2 (headless)</span></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' plank 1-1</h1>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="plank-1-1-2-headless">plank 1-1-2 (headless)</h1>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' plank 1-1-2 (headless)</h1>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="R-taxonomy taxonomy-tags 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/children/index.html">Children</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/tags/non-hidden/index.html">Non-Hidden</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<h1 id="plank-1-1-2-1">plank 1-1-2-1</h1>
|
||
|
||
<p>This be a plain demo child plank 1-1-2-1.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="R-taxonomy taxonomy-tags 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/children/index.html">Children</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/tags/non-hidden/index.html">Non-Hidden</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<h1 id="plank-1-1-2-2">plank 1-1-2-2</h1>
|
||
|
||
<p>This be a plain demo child plank 1-1-2-2.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="R-taxonomy taxonomy-tags 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/children/index.html">Children</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/tags/non-hidden/index.html">Non-Hidden</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<h1 id="plank-1-1-3">plank 1-1-3</h1>
|
||
|
||
<p>This be a plain demo child plank 1-1-3.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
</section>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="R-taxonomy taxonomy-tags 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/children/index.html">Children</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/tags/non-hidden/index.html">Non-Hidden</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<h1 id="plank-2">plank 2</h1>
|
||
|
||
<p>This be a demo child plank wit' no descript'n.</p>
|
||
<p>So its rrrambl'n be used as descript'n.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="R-taxonomy taxonomy-tags 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/children/index.html">Children</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/tags/non-hidden/index.html">Non-Hidden</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<h1 id="plank-3">plank 3</h1>
|
||
|
||
<p>This be a demo child plank.</p>
|
||
<h2 id="subpages-of-this-page">Subpages o' this plank</h2>
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html">plank 3-1</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' plank 3</h1>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="R-taxonomy taxonomy-tags 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/children/index.html">Children</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/tags/non-hidden/index.html">Non-Hidden</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<h1 id="plank-3-1">plank 3-1</h1>
|
||
|
||
<p>This be a plain demo child plank 3-1.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
</section>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="expand">Expand</h1>
|
||
|
||
<p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
|
||
<div class="expand">
|
||
<input type="checkbox" id="R-expand-912f0dcff04e230993c8f8e7b6ab3420" aria-controls="R-expandcontent-912f0dcff04e230993c8f8e7b6ab3420">
|
||
<label class="expand-label" for="R-expand-912f0dcff04e230993c8f8e7b6ab3420">
|
||
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
|
||
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Expand me…
|
||
</label>
|
||
<div id="R-expandcontent-912f0dcff04e230993c8f8e7b6ab3420" class="expand-content">
|
||
<p>Thank ye!</p>
|
||
<p>That’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’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’s th' footnote. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
||
</li>
|
||
<li id="fn:2">
|
||
<p>Anyth'n o' interest goes here.</p>
|
||
<p>Blue light glows blue. <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span class="tab-nav-text">shortcode (positional)</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Expand me..."</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Thank</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="s">"Expand me..."</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Thank</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/expand.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"Expand me..."</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"Thank ye!"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Th' <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html"><code>notice</code> shortcode</a> be also cap'ble o' display'n expandable/collaps'ble sections o' text but wit' color opt'ns.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Posit'n</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>title</strong></td>
|
||
<td>1</td>
|
||
<td><code>"Expand me..."</code></td>
|
||
<td>Arbitrary text t' appear next t' th' expand/collapse ay'con.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>expanded</strong></td>
|
||
<td>2</td>
|
||
<td><code>false</code></td>
|
||
<td>How th' rrrambl'n be displayed.<br><br>- <code>true</code>: th' rrrambl'n be initially shown<br>- <code>false</code>: th' rrrambl'n be initially hidden</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td></td>
|
||
<td><em><empty></em></td>
|
||
<td>Arbitrary text t' be displayed on expand.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="all-defaults">All Defaults</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="expand">
|
||
<input type="checkbox" id="R-expand-2e65f14358e96dc4052a67a81b32e41f" aria-controls="R-expandcontent-2e65f14358e96dc4052a67a81b32e41f">
|
||
<label class="expand-label" for="R-expand-2e65f14358e96dc4052a67a81b32e41f">
|
||
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
|
||
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Expand me…
|
||
</label>
|
||
<div id="R-expandcontent-2e65f14358e96dc4052a67a81b32e41f" class="expand-content">
|
||
<p>
|
||
Yes, ye did it!
|
||
</div>
|
||
</div>
|
||
<h3 id="initially-expanded">Initially Expanded</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Expand me..."</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="expand">
|
||
<input type="checkbox" id="R-expand-d107792a544390926fe1a4fd29bc999d" aria-controls="R-expandcontent-d107792a544390926fe1a4fd29bc999d" checked>
|
||
<label class="expand-label" for="R-expand-d107792a544390926fe1a4fd29bc999d">
|
||
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
|
||
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Expand me…
|
||
</label>
|
||
<div id="R-expandcontent-d107792a544390926fe1a4fd29bc999d" class="expand-content">
|
||
<p>
|
||
No need t' press ye!
|
||
</div>
|
||
</div>
|
||
<h3 id="arbitrary-text">Arbitrary Text</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Show me almost **endless** possibilities"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">add</span> <span class="nx">standard</span> <span class="nx">markdown</span> <span class="nx">rules</span><span class="p">:</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">an'</span> <span class="nx">even</span> <span class="o">**</span><span class="nx">_bold</span> <span class="nx">emphasized_</span><span class="o">**</span> <span class="nx">text</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">etc</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="expand">
|
||
<input type="checkbox" id="R-expand-c230ad14c80f80de23beaad5350c0935" aria-controls="R-expandcontent-c230ad14c80f80de23beaad5350c0935">
|
||
<label class="expand-label" for="R-expand-c230ad14c80f80de23beaad5350c0935">
|
||
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
|
||
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Show me almost <strong>endless</strong> possibilities
|
||
</label>
|
||
<div id="R-expandcontent-c230ad14c80f80de23beaad5350c0935" class="expand-content">
|
||
<p>Ye can add standard markdown rules:</p>
|
||
<ul>
|
||
<li>multiple paragraphs</li>
|
||
<li>bullet point lists</li>
|
||
<li><em>emphasized</em>, <strong>bold</strong> an' even <strong><em>bold emphasized</em></strong> text</li>
|
||
<li><a href="https://example.com" rel="external" target="_self">links</a></li>
|
||
<li>etc.</li>
|
||
</ul>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div>
|
||
<blockquote>
|
||
<p>th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work)</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="highlight">Highlight</h1>
|
||
|
||
<p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
|
||
<div class="tab-panel" data-tab-group="ae59b95cdc3b349d986d7cfafcd55f11">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="python"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('ae59b95cdc3b349d986d7cfafcd55f11','python')"
|
||
>
|
||
<span class="tab-nav-text">python</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="python"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code" lineNos="true"><pre tabindex="0" class="chroma"><code class="language-py" data-lang="py"><span class="line"><span class="ln">1</span><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="codeodefence"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','codeodefence')"
|
||
>
|
||
<span class="tab-nav-text">codeodefence</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span class="tab-nav-text">shortcode (positional)</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial-compat"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial-compat')"
|
||
>
|
||
<span class="tab-nav-text">partial (compat)</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="codeodefence"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```py {lineNos="true" wrap="true" title="python"}
|
||
</span></span><span class="line"><span class="cl">print("Hello World!")
|
||
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">highlight</span> <span class="nx">lineNos</span><span class="p">=</span><span class="s">"true"</span> <span class="kd">type</span><span class="p">=</span><span class="s">"py"</span> <span class="nx">wrap</span><span class="p">=</span><span class="s">"true"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"python"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s">"Hello World!"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">highlight</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">highlight</span> <span class="nx">py</span> <span class="s">"lineNos=true,wrap=true,title=python"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s">"Hello World!"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">highlight</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/highlight.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"print(\"Hello World!\")"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"lineNos"</span> <span class="s">"true"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"type"</span> <span class="s">"py"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"wrap"</span> <span class="s">"true"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"python"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial-compat"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/highlight.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"print(\"Hello World!\")"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"options"</span> <span class="s">"lineNos=true,wrap=true,title=python"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"type"</span> <span class="s">"py"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>This shortcode be fully compat'ble wit' Hugo’s <a href="https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode" rel="external" target="_self"><code>highlight</code> shortcode</a> but <strong>offers some extensions</strong>.</p>
|
||
<p>It be called interchangeably 'n th' same way as Hugo’s own shortcode by provid'n positional parameter or simply by us'n Marrrkdown codefences.</p>
|
||
<p>Ye be free t' also call this shortcode from yer own partials. In this case it resembles Hugo’s <a href="https://gohugo.io/functions/highlight/" rel="external" target="_self"><code>highlight</code> funct'n</a> rules if ye call it us'n compatibility rules.</p>
|
||
<p>Codefence rules be widely avail'ble 'n other Marrrkdown parsers like GitHub an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.</p>
|
||
<p>Th' <a href="/hugo-theme-relearn/pir/shortcodes/tab/index.html"><code>tab</code> shortcode</a> be also cap'ble o' display'n code but wit' limited opt'ns.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Posit'n</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>type</strong></td>
|
||
<td>1</td>
|
||
<td><em><empty></em></td>
|
||
<td>Th' language o' th' code t' highlight. Choose from one o' th' <a href="https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages" rel="external" target="_self">supported languages</a>. Case-insensitive.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>title</strong></td>
|
||
<td></td>
|
||
<td><em><empty></em></td>
|
||
<td><strong>Extension</strong>. Arbitrary title fer code. This displays th' code like a <a href="/hugo-theme-relearn/pir/shortcodes/tab/index.html">single tab</a> if <code>hl_inline=false</code> (which be Hugo’s default).</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>wrap</strong></td>
|
||
<td></td>
|
||
<td>see notes</td>
|
||
<td><strong>Extension</strong>. When <code>true</code> th' rrrambl'n may wrap on long lines otherwise it will be scroll'ble.<br><br>Th' default value can be set 'n yer <code>hugo.toml</code> an' overwritten via front matter. <a href="/hugo-theme-relearn/pir/shortcodes/highlight/index.html#setting-wrap-of-long-lines">See below</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>opt'ns</strong></td>
|
||
<td>2</td>
|
||
<td><em><empty></em></td>
|
||
<td>An optional, comma-separated list o' zero or more <a href="https://gohugo.io/functions/highlight/#options" rel="external" target="_self">Cap'n Hugo supported opt'ns</a> as well as extension parameter from this t'ble.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><option></strong></em></td>
|
||
<td></td>
|
||
<td><em><empty></em></td>
|
||
<td>Any o' <a href="https://gohugo.io/functions/highlight/#options" rel="external" target="_self">Hugo’s supported opt'ns</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td></td>
|
||
<td><em><empty></em></td>
|
||
<td>Yer code t' highlight.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="settings">Sett'ns</h2>
|
||
<h3 id="setting-default-values-for-hugos-options">Sett'n Default Values fer Hugo’s Opt'ns</h3>
|
||
<p>Default values fer <a href="https://gohugo.io/functions/highlight/#options" rel="external" target="_self">Hugo’s supported opt'ns</a> can be set via <a href="https://gohugo.io/getting-started/configuration-markup/#highlight" rel="external" target="_self">goldmark sett'ns</a>.</p>
|
||
<p>If used together wit' wrapp'n o' long lines, use this recommended sett'ns. Otherwise, line numbers will shift if code wraps.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">hugo.</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">highlight</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">lineNumbersInT'ble</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">marrrkup</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">highlight</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lineNumbersInT'ble</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"markup"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"highlight"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"lineNumbersInTable"</span><span class="p">:</span> <span class="kc">false</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="setting-wrap-of-long-lines">Sett'n Wrap o' Long Lines</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> By default, code will be wrapped if th' line be not long enough.</p>
|
||
<p>Ye can dis'ble wrapp'n by sett'n <code>highlightWrap=false</code> or by sett'n th' <a href="/hugo-theme-relearn/pir/shortcodes/highlight/index.html#parameter"><code>wrap</code> parameter</a> individually fer each code block.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">highlightWrap</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">highlightWrap</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"highlightWrap"</span><span class="p">:</span> <span class="kc">false</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="copy-to-clipboard-for-inline-code">Copy t' Clipboard fer Inline Code</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> By default inline code has a button t' copy th' code t' th' clipboard.</p>
|
||
<p>If ye want t' dis'ble this feature, set <code>disableInlineCopyToClipBoard=true</code>.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">hugo.</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">disableInlineCopyToClipBoard</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">disableInlineCopyToClipBoard</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"disableInlineCopyToClipBoard"</span><span class="p">:</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="copy-to-clipboard-for-block-code">Copy t' Clipboard fer Block Code</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> By default block code has a button t' copy th' code t' th' clipboard that be only vis'ble on hover.</p>
|
||
<p>Set <code>disableHoverBlockCopyToClipBoard=true</code> t' dis'ble th' hover effect an' always show th' button.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">hugo.</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">disableHoverBlockCopyToClipBoard</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">disableHoverBlockCopyToClipBoard</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"disableHoverBlockCopyToClipBoard"</span><span class="p">:</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="setting-a-specific-color-scheme">Sett'n a Specific Color Scheme</h3>
|
||
<p>Ye can configure th' color style used fer code blocks 'n yer <a href="/hugo-theme-relearn/pir/configuration/branding/modules/index.html#change-syntax-highlighting">color variants stylesheet</a> file us'n th' <code>--CODE-theme</code> vari'ble. This requires further configurat'n as described 'n th' above link.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="line-numbers-with-starting-offset">Line Numbers wit' Start'n Offset</h3>
|
||
<p>As mentioned above, line numbers 'n a <code>t'ble</code> layout will shift if code be wrapp'n, so better use <code>inline</code>. T' make th'ns easier fer ye, set <code>lineNumbersInT'ble = false</code> 'n yer <code>hugo.toml</code> an' add <code>lineNos = true</code> when call'n th' shortcode instead o' th' specific values <code>t'ble</code> or <code>inline</code>.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">highlight</span> <span class="nx">lineNos</span><span class="p">=</span><span class="s">"true"</span> <span class="nx">lineNoStart</span><span class="p">=</span><span class="s">"666"</span> <span class="kd">type</span><span class="p">=</span><span class="s">"py"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">#</span> <span class="nx">th'</span> <span class="nx">hardest</span> <span class="nx">part</span> <span class="nx">be</span> <span class="nx">t'</span> <span class="nx">start</span> <span class="nx">writ'n</span> <span class="nx">code</span><span class="p">;</span> <span class="nx">here</span><span class="err">'</span><span class="nx">s</span> <span class="nx">a</span> <span class="nx">kickstart</span><span class="p">;</span> <span class="nx">just</span> <span class="nx">copy</span> <span class="nx">an'</span> <span class="nx">paste</span> <span class="nx">this</span><span class="p">;</span> <span class="nx">it</span><span class="err">'</span><span class="nx">s</span> <span class="nx">free</span><span class="p">;</span> <span class="nx">th'</span> <span class="nx">next</span> <span class="nx">lines</span> <span class="nx">will</span> <span class="nx">cost</span> <span class="nx">ye</span> <span class="nx">serious</span> <span class="nx">credits</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s">"Hello"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s">" "</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s">"World"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s">"!"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">highlight</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
<div class="highlight wrap-code" lineNoStart="666" lineNos="true"><pre tabindex="0" class="chroma"><code class="language-py" data-lang="py"><span class="line"><span class="ln">666</span><span class="cl"><span class="c1"># th' hardest part be t' start writ'n code; here's a kickstart; just copy an' paste this; it's free; th' next lines will cost ye serious credits</span>
|
||
</span></span><span class="line"><span class="ln">667</span><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="ln">668</span><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">" "</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="ln">669</span><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"World"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="ln">670</span><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"!"</span><span class="p">)</span></span></span></code></pre></div>
|
||
|
||
<h3 id="markdown-codefence-with-title">Marrrkdown Codefence wit' Title</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```py { title="python" }
|
||
</span></span><span class="line"><span class="cl"><span class="gh"># a bit shorter
|
||
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>print("Hello World!")
|
||
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
|
||
<div class="tab-panel" data-tab-group="577261581e5e06ddec08f7cb5120f373">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="python"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('577261581e5e06ddec08f7cb5120f373','python')"
|
||
>
|
||
<span class="tab-nav-text">python</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="python"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-py" data-lang="py"><span class="line"><span class="cl"><span class="c1"># a bit shorter</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><h3 id="with-wrap">Wit' Wrap</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">highlight</span> <span class="kd">type</span><span class="p">=</span><span class="s">"py"</span> <span class="nx">wrap</span><span class="p">=</span><span class="s">"true"</span> <span class="nx">hl_lines</span><span class="p">=</span><span class="s">"2"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">#</span> <span class="nx">Quicksort</span> <span class="nx">Python</span> <span class="nx">One</span><span class="o">-</span><span class="nx">liner</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">lambda</span> <span class="nx">L</span><span class="p">:</span> <span class="p">[]</span> <span class="k">if</span> <span class="nx">L</span><span class="o">==</span><span class="p">[]</span> <span class="k">else</span> <span class="nf">qsort</span><span class="p">([</span><span class="nx">x</span> <span class="k">fer</span> <span class="nx">x</span> <span class="nx">'n</span> <span class="nx">L</span><span class="p">[</span><span class="mi">1</span><span class="p">:]</span> <span class="k">if</span> <span class="nx">x</span><span class="p"><</span> <span class="nx">L</span><span class="p">[</span><span class="mi">0</span><span class="p">]])</span> <span class="o">+</span> <span class="nx">L</span><span class="p">[</span><span class="mi">0</span><span class="p">:</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="nf">qsort</span><span class="p">([</span><span class="nx">x</span> <span class="k">fer</span> <span class="nx">x</span> <span class="nx">'n</span> <span class="nx">L</span><span class="p">[</span><span class="mi">1</span><span class="p">:]</span> <span class="k">if</span> <span class="nx">x</span><span class="o">>=</span><span class="nx">L</span><span class="p">[</span><span class="mi">0</span><span class="p">]])</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">#</span> <span class="nx">Some</span> <span class="nx">more</span> <span class="nx">stuff</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">highlight</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
<div class="highlight wrap-code" hl_lines="2"><pre tabindex="0" class="chroma"><code class="language-py" data-lang="py"><span class="line"><span class="cl"><span class="c1"># Quicksort Python One-liner</span>
|
||
</span></span><span class="line hl"><span class="cl"><span class="k">lambda</span> <span class="n">L</span><span class="p">:</span> <span class="p">[]</span> <span class="k">if</span> <span class="n">L</span><span class="o">==</span><span class="p">[]</span> <span class="k">else</span> <span class="n">qsort</span><span class="p">([</span><span class="n">x</span> <span class="k">fer</span> <span class="n">x</span> <span class="ow">'n</span> <span class="n">L</span><span class="p">[</span><span class="mi">1</span><span class="p">:]</span> <span class="k">if</span> <span class="n">x</span><span class="o"><</span> <span class="n">L</span><span class="p">[</span><span class="mi">0</span><span class="p">]])</span> <span class="o">+</span> <span class="n">L</span><span class="p">[</span><span class="mi">0</span><span class="p">:</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="n">qsort</span><span class="p">([</span><span class="n">x</span> <span class="k">fer</span> <span class="n">x</span> <span class="ow">'n</span> <span class="n">L</span><span class="p">[</span><span class="mi">1</span><span class="p">:]</span> <span class="k">if</span> <span class="n">x</span><span class="o">>=</span><span class="n">L</span><span class="p">[</span><span class="mi">0</span><span class="p">]])</span>
|
||
</span></span><span class="line"><span class="cl"><span class="c1"># Some more stuff</span></span></span></code></pre></div>
|
||
|
||
<h3 id="without-wrap">Without Wrap</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">highlight</span> <span class="kd">type</span><span class="p">=</span><span class="s">"py"</span> <span class="nx">wrap</span><span class="p">=</span><span class="s">"false"</span> <span class="nx">hl_lines</span><span class="p">=</span><span class="s">"2"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">#</span> <span class="nx">Quicksort</span> <span class="nx">Python</span> <span class="nx">One</span><span class="o">-</span><span class="nx">liner</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">lambda</span> <span class="nx">L</span><span class="p">:</span> <span class="p">[]</span> <span class="k">if</span> <span class="nx">L</span><span class="o">==</span><span class="p">[]</span> <span class="k">else</span> <span class="nf">qsort</span><span class="p">([</span><span class="nx">x</span> <span class="k">fer</span> <span class="nx">x</span> <span class="nx">'n</span> <span class="nx">L</span><span class="p">[</span><span class="mi">1</span><span class="p">:]</span> <span class="k">if</span> <span class="nx">x</span><span class="p"><</span> <span class="nx">L</span><span class="p">[</span><span class="mi">0</span><span class="p">]])</span> <span class="o">+</span> <span class="nx">L</span><span class="p">[</span><span class="mi">0</span><span class="p">:</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="nf">qsort</span><span class="p">([</span><span class="nx">x</span> <span class="k">fer</span> <span class="nx">x</span> <span class="nx">'n</span> <span class="nx">L</span><span class="p">[</span><span class="mi">1</span><span class="p">:]</span> <span class="k">if</span> <span class="nx">x</span><span class="o">>=</span><span class="nx">L</span><span class="p">[</span><span class="mi">0</span><span class="p">]])</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">#</span> <span class="nx">Some</span> <span class="nx">more</span> <span class="nx">stuff</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">highlight</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-py" data-lang="py"><span class="line"><span class="cl"><span class="c1"># Quicksort Python One-liner</span>
|
||
</span></span><span class="line hl"><span class="cl"><span class="k">lambda</span> <span class="n">L</span><span class="p">:</span> <span class="p">[]</span> <span class="k">if</span> <span class="n">L</span><span class="o">==</span><span class="p">[]</span> <span class="k">else</span> <span class="n">qsort</span><span class="p">([</span><span class="n">x</span> <span class="k">fer</span> <span class="n">x</span> <span class="ow">'n</span> <span class="n">L</span><span class="p">[</span><span class="mi">1</span><span class="p">:]</span> <span class="k">if</span> <span class="n">x</span><span class="o"><</span> <span class="n">L</span><span class="p">[</span><span class="mi">0</span><span class="p">]])</span> <span class="o">+</span> <span class="n">L</span><span class="p">[</span><span class="mi">0</span><span class="p">:</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="n">qsort</span><span class="p">([</span><span class="n">x</span> <span class="k">fer</span> <span class="n">x</span> <span class="ow">'n</span> <span class="n">L</span><span class="p">[</span><span class="mi">1</span><span class="p">:]</span> <span class="k">if</span> <span class="n">x</span><span class="o">>=</span><span class="n">L</span><span class="p">[</span><span class="mi">0</span><span class="p">]])</span>
|
||
</span></span><span class="line"><span class="cl"><span class="c1"># Some more stuff</span></span></span></code></pre></div>
|
||
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="icon">Icon</h1>
|
||
|
||
<p>Th' <code>ay'con</code> shortcode displays ay'cons us'n th' <a href="https://fontawesome.com" rel="external" target="_self">Font Awesome</a> library.</p>
|
||
<p><i class="fa-fw fas fa-exclamation-triangle"></i>
|
||
<i class="fa-fw fas fa-angle-double-up"></i>
|
||
<i class="fa-fw fas fa-skull-crossbones"></i></p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span class="tab-nav-text">shortcode (positional)</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"exclamation-triangle"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"angle-double-up"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"skull-crossbones"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">exclamat'n</span><span class="o">-</span><span class="nx">triangle</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">angle</span><span class="o">-</span><span class="nx">do'ble</span><span class="o">-</span><span class="nx">up</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">skull</span><span class="o">-</span><span class="nx">crossbones</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/icon.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"exclamation-triangle"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/icon.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"angle-double-up"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/icon.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"skull-crossbones"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Posit'n</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>ay'con</strong></td>
|
||
<td>1</td>
|
||
<td><em><empty></em></td>
|
||
<td><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> t' be displayed. It will be displayed 'n th' text color o' its accord'n context.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h3 id="finding-an-icon">Find'n an ay'con</h3>
|
||
<p>Browse through th' avail'ble ay'cons 'n th' <a href="https://fontawesome.com/v6/search?m=free" rel="external" target="_self">Font Awesome Gallery</a>. Notice that th' <strong>free</strong> filter be enabled, as only th' free ay'cons be avail'ble by default.</p>
|
||
<p>Once on th' Font Awesome plank fer a specific ay'con, fer example th' plank fer th' <a href="https://fontawesome.com/v6/icons/heart?s=solid" rel="external" target="_self">heart</a>, copy th' ay'con name an' paste into th' Marrrkdown rrrambl'n.</p>
|
||
<h3 id="customising-icons">Customis'n Ay'cons</h3>
|
||
<p>Font Awesome provides many ways t' modify th' ay'con</p>
|
||
<ul>
|
||
<li>Change color (by default th' ay'con will inherit th' parent color)</li>
|
||
<li>Increase or decrease size</li>
|
||
<li>Rotate</li>
|
||
<li>Combine wit' other ay'cons</li>
|
||
</ul>
|
||
<p>Check th' full documentat'n on <a href="https://fontawesome.com/how-to-use/web-fonts-with-css" rel="external" target="_self">web fonts wit' CSS</a> fer more.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="standard-usage">Standard Usage</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="nx">Built</span> <span class="nx">wit'</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">ay'con</span> <span class="nx">heart</span> <span class="o">%</span><span class="p">}}</span> <span class="nx">by</span> <span class="nx">Relearrrn</span> <span class="nx">an'</span> <span class="nx">Cap'n Hugo</span></span></span></code></pre></div>
|
||
<p>Built wit' <i class="fa-fw fas fa-heart"></i> by Relearrrn an' Cap'n Hugo</p>
|
||
<h3 id="advanced-html-usage">Advanced HTML Usage</h3>
|
||
<p>While th' shortcode simplifies us'n standard ay'cons, th' ay'con customizat'n an' other advanced features o' th' Font Awesome library require ye t' use HTML directly. Paste th' <code><i></code> HTML into marrrkup, an' Font Awesome will board th' relevant ay'con.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">Built wit' <span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"fas fa-heart"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span> by Relearrrn an' Cap'n Hugo</span></span></code></pre></div>
|
||
<p>Built wit' <i class="fas fa-heart"></i> by Relearrrn an' Cap'n Hugo</p>
|
||
<p>T' use these native HTML elements 'n yer Marrrkdown, add this 'n yer <code>hugo.toml</code>:</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="include">Include</h1>
|
||
|
||
<p>Th' <code>include</code> shortcode includes other planks, resources or files from yer project.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span class="tab-nav-text">shortcode (positional)</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">include</span> <span class="nx">file</span><span class="p">=</span><span class="s">"shortcodes/include/INCLUDE_ME.md"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">include</span> <span class="s">"shortcodes/include/INCLUDE_ME.md"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/include .html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"file"</span> <span class="s">"shortcodes/include/INCLUDE_ME.md"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Th' included files can even contain Marrrkdown an' will be taken into account when generat'n th' t'ble o' contents.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Posit'n</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>file</strong></td>
|
||
<td>1</td>
|
||
<td><em><empty></em></td>
|
||
<td>Th' path t' th' plank, resource or file t' be included. Plank an' resource paths adhere t' <a href="https://gohugo.io/methods/page/path/" rel="external" target="_self">Hugo’s logical path</a>. If not found by logical path it falls back t' <a href="https://gohugo.io/functions/readfile/" rel="external" target="_self">Hugo’s build-in <code>readFile</code> funct'n</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>hidefirsthead'n</strong></td>
|
||
<td>2</td>
|
||
<td><code>false</code></td>
|
||
<td>When <code>true</code> an' th' included file contains head'ns, th' first head'n will be hidden. This comes 'n handy, eg. if ye include otherwise standalone Marrrkdown files.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="settings">Sett'ns</h2>
|
||
<h3 id="enabling-link-warnings">Enabl'n Link Warn'ns</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Ye can use <code>include.errorlevel</code> t' control what should happen if a local link can not be resolved t' a resource.</p>
|
||
<p>If not set or empty, any unresolved link be written as given into th' result'n output. If set t' <code>warning</code> th' same happens an' an additional warning be printed 'n th' built console. If set t' <code>error</code> an error message be printed an' th' build be aborted.</p>
|
||
<p>Please note that this can not resolve files inside o' yer <code>static</code> directory. Th' file must be a resource o' th' plank or th' ship.</p>
|
||
<p>Link warnings be also avail'ble fer <a href="/hugo-theme-relearn/pir/authoring/frontmatter/linking/index.html#enabling-link-and-image-link-warnings">images & links</a> an' th' <a href="/hugo-theme-relearn/pir/shortcodes/openapi/index.html#enabling-link-warnings">openapi</a> shortcode.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">include</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">'warning'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">include</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">errorlevel</span><span class="p">:</span><span class="w"> </span><span class="l">warning</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"include"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"errorlevel"</span><span class="p">:</span> <span class="s2">"warning"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="arbitrary-content">Arbitrary Rrrambl'n</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">include</span> <span class="s">"shortcodes/include/INCLUDE_ME.md"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p>Ye can add standard markdown rules:</p>
|
||
<ul>
|
||
<li>multiple paragraphs</li>
|
||
<li>bullet point lists</li>
|
||
<li><em>emphasized</em>, <strong>bold</strong> an' even <strong><em>bold emphasized</em></strong> text</li>
|
||
<li><a href="https://example.com" rel="external" target="_self">links</a></li>
|
||
<li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li>
|
||
</ul>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div>
|
||
<blockquote>
|
||
<p>th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work) (almost - includ'n other shorrrtcodes may or may not work)</p>
|
||
</blockquote>
|
||
<div class="footnotes" role="doc-endnotes">
|
||
<hr>
|
||
<ol>
|
||
<li id="fn:1">
|
||
<p>Et Cetera (English: /ɛtˈsɛtərə/), abbreviated t' etc., etc, et cet., be a Latin expression that be used 'n English t' mean “and other similar things”, or “and so forth” <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="math">Math</h1>
|
||
|
||
<p>If this be not enough, th' <code>math</code> shortcode helps ye render'n math an' chemical formulae us'n th' <a href="https://mathjax.org/" rel="external" target="_self">MathJax</a> library.</p>
|
||
<span class="math align-center">
|
||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="passthrough"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','passthrough')"
|
||
>
|
||
<span class="tab-nav-text">passthrough</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="codefence"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','codefence')"
|
||
>
|
||
<span class="tab-nav-text">codefence</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="passthrough"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="codefence"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```math {align="center"}
|
||
</span></span><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">math</span> <span class="nx">align</span><span class="p">=</span><span class="s">"center"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">$$\</span><span class="nf">left</span><span class="p">(</span> <span class="err">\</span><span class="nx">sum_</span><span class="p">{</span><span class="nx">k</span><span class="p">=</span><span class="mi">1</span><span class="p">}^</span><span class="nx">n</span> <span class="nx">a_k</span> <span class="nx">b_k</span> <span class="err">\</span><span class="nx">right</span><span class="p">)^</span><span class="mi">2</span> <span class="err">\</span><span class="nx">leq</span> <span class="err">\</span><span class="nf">left</span><span class="p">(</span> <span class="err">\</span><span class="nx">sum_</span><span class="p">{</span><span class="nx">k</span><span class="p">=</span><span class="mi">1</span><span class="p">}^</span><span class="nx">n</span> <span class="nx">a_k</span><span class="p">^</span><span class="mi">2</span> <span class="err">\</span><span class="nx">right</span><span class="p">)</span> <span class="err">\</span><span class="nf">left</span><span class="p">(</span> <span class="err">\</span><span class="nx">sum_</span><span class="p">{</span><span class="nx">k</span><span class="p">=</span><span class="mi">1</span><span class="p">}^</span><span class="nx">n</span> <span class="nx">b_k</span><span class="p">^</span><span class="mi">2</span> <span class="err">\</span><span class="nx">right</span><span class="p">)</span><span class="err">$$</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">math</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/math.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"$$left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"align"</span> <span class="s">"center"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Ye can also use <a href="/hugo-theme-relearn/pir/authoring/markdown/index.html#subscript-and-superscript">pure Marrrkdown</a> fer writ'n simple math expressions.</p>
|
||
<p>Passthrough rules be only avail'ble by <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html#passthrough-configuration">further configurat'n</a> an' has limited features as it does not provide any o' th' below parameter. Nevertheless, it be widely avail'ble 'n other Marrrkdown parsers like GitHub an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>align</strong></td>
|
||
<td><code>center</code></td>
|
||
<td>Th' vertical alignment.<br><br>Allowed values be <code>left</code>, <code>center</code> or <code>right</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td><em><empty></em></td>
|
||
<td>Yer formulae.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="settings">Sett'ns</h2>
|
||
<h3 id="providing-initialization-options-for-the-mathjax-library">Provid'n Initializat'n Opt'ns fer th' MathJax Library</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Th' MathJax library be configured wit' default sett'ns fer initializat'n.</p>
|
||
<p>Ye can overwrite th' sett'ns by provid'n a JSON object 'n <code>mathJaxInitialize</code>. See <a href="https://docs.mathjax.org/en/latest/options/index.html" rel="external" target="_self">MathJax’s documentat'n</a> fer all allowed sett'ns.</p>
|
||
<p>Keep 'n mind that initializat'n sett'ns o' yer planks front matter overwrite all sett'ns o' yer configurat'n opt'ns.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">mathJaxInitialize</span> <span class="p">=</span> <span class="s1">'{ "chtml": { "displayAlign": "left" }, { "tex": { "inlineMath": [["\(", "\)"], ["@", "@"]], displayMath: [["\[", "\]"], ["@@", "@@"]] }, "options": { "enableMenu": false }'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">mathJaxInitialize</span><span class="p">:</span><span class="w"> </span><span class="s1">'{ "chtml": { "displayAlign": "left" }, { "tex": { "inlineMath":
|
||
</span></span></span><span class="line"><span class="cl"><span class="s1"> [["\(", "\)"], ["@", "@"]], displayMath: [["\[", "\]"], ["@@", "@@"]] }, "options":
|
||
</span></span></span><span class="line"><span class="cl"><span class="s1"> { "enableMenu": false }'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"mathJaxInitialize"</span><span class="p">:</span> <span class="s2">"{ \"chtml\": { \"displayAlign\": \"left\" }, { \"tex\": { \"inlineMath\": [[\"\\(\", \"\\)\"], [\"@\", \"@\"]], displayMath: [[\"\\[\", \"\\]\"], [\"@@\", \"@@\"]] }, \"options\": { \"enableMenu\": false }"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="loading-an-external-version-of-the-mathjax-library">Load'n an External Version o' th' MathJax Library</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Th' theme uses th' shipped MathJax library by default.</p>
|
||
<p>In case ye want do use a different version o' th' MathJax library but don’t want t' override th' shipped version, ye can set <code>customMathJaxURL</code> t' th' URL o' th' external MathJax library.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">customMathJaxURL</span> <span class="p">=</span> <span class="s1">'https://unpkg.com/mathjax/es5/tex-mml-chtml.js'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">customMathJaxURL</span><span class="p">:</span><span class="w"> </span><span class="l">https://unpkg.com/mathjax/es5/tex-mml-chtml.js</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"customMathJaxURL"</span><span class="p">:</span> <span class="s2">"https://unpkg.com/mathjax/es5/tex-mml-chtml.js"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="force-loading-of-the-mathjax-library">Force Load'n o' th' MathJax Library</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Th' MathJax library will be boarded if th' plank contains a <code>math</code> shortcode or codefence.</p>
|
||
<p>Ye can force load'n th' MathJax library if no shortcode or codefence was used by sett'n <code>math=true</code>. If a shortcode or codefence was found, th' opt'n has no effect. This must be set 'n case ye be us'n th' <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html#passthrough-configuration">passthrough configurat'n</a> t' render math.</p>
|
||
<p>Instead o' <code>math=true</code> ye can also use th' alias <code>math.force=true</code>.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">math</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">math</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"math"</span><span class="p">:</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="passthrough-configuration">Passthrough Configurat'n</h3>
|
||
<p>Ye can use yer math without enclos'n it 'n a shortcode or codefence by us'n a <a href="https://gohugo.io/content-management/mathematics/#step-1" rel="external" target="_self">passthrough configurat'n</a></p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">hugo.</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">extensions</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">extensions</span><span class="p">.</span><span class="nx">passthrough</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">en'ble</span> <span class="p">=</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">extensions</span><span class="p">.</span><span class="nx">passthrough</span><span class="p">.</span><span class="nx">delimiters</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">block</span> <span class="p">=</span> <span class="p">[[</span><span class="s1">'\['</span><span class="p">,</span> <span class="s1">'\]'</span><span class="p">],</span> <span class="p">[</span><span class="s1">'$$'</span><span class="p">,</span> <span class="s1">'$$'</span><span class="p">]]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">inline</span> <span class="p">=</span> <span class="p">[[</span><span class="s1">'\('</span><span class="p">,</span> <span class="s1">'\)'</span><span class="p">],</span> <span class="p">[</span><span class="s1">'$'</span><span class="p">,</span> <span class="s1">'$'</span><span class="p">]]</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">marrrkup</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">goldmark</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">extensions</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">passthrough</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">delimiters</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">block</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- - <span class="l">\[</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">\]</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- - <span class="l">$$</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">$$</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">inline</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- - <span class="l">\(</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">\)</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- - <span class="l">$</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">$</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">en'ble</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"markup"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"goldmark"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"extensions"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"passthrough"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"delimiters"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"block"</span><span class="p">:</span> <span class="p">[</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s2">"\\["</span><span class="p">,</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s2">"\\]"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s2">"$$"</span><span class="p">,</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s2">"$$"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"inline"</span><span class="p">:</span> <span class="p">[</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s2">"\\("</span><span class="p">,</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s2">"\\)"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s2">"$"</span><span class="p">,</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s2">"$"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"enable"</span><span class="p">:</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>In this case ye have t' <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html#force-loading-of-the-mathjax-library">force board</a> th' MathJax library either 'n yer <code>hugo.toml</code> or 'n yer page’s front matter as th' theme doesn’t know if math be used.</p>
|
||
<p><a href="/hugo-theme-relearn/pir/shortcodes/math/index.html#passthrough-block-math">See th' example</a> on how a passthrough configurat'ns makes us'n math really easy.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="passthrough-block-math">Passthrough Block Math</h3>
|
||
<p>Wit' <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html#passthrough-configuration">passthrough configurat'n</a> enabled ye can just drop yer math without enclos'n it by shorrrtcodes or codefences but no other <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html#parameter">parameters</a> be avail'ble.</p>
|
||
<p>In this case ye have t' <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html#force-loading-of-the-mathjax-library">force board</a> th' MathJax library by sett'n <code>math=true</code> either 'n yer <code>hugo.toml</code> or 'n yer page’s front matter.</p>
|
||
<p>In passthrough default configurat'n, block math be generated if ye use two consecutive <code>$$</code> as a delimiter around yer formulae.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">$$\left|
|
||
</span></span><span class="line"><span class="cl">\begin{array}{cc}
|
||
</span></span><span class="line"><span class="cl">a <span class="err">&</span> b \\
|
||
</span></span><span class="line"><span class="cl">c <span class="err">&</span> d
|
||
</span></span><span class="line"><span class="cl">\end{array}\right|$$</span></span></code></pre></div>
|
||
$$\left|
|
||
\begin{array}{cc}
|
||
a & b \\
|
||
c & d
|
||
\end{array}\right|$$<h3 id="passthrough-inline-math">Passthrough Inline Math</h3>
|
||
<p>Th' same usage restrict'ns as o' th' <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html#passthrough-block-math">previous example</a> apply here as well.</p>
|
||
<p>In passthrough default configurat'n, inline math be generated if ye use a single <code>$</code> as a delimiter around yer formulae.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Euclid already knew, $\sqrt{2}$ be irrational.</span></span></code></pre></div>
|
||
<p>Euclid already knew, $\sqrt{2}$ be irrational.</p>
|
||
<h3 id="codefence-block-math-with-right-alignment">Codefence Block Math wit' Right Alignment</h3>
|
||
<p>If ye be us'n codefences, more <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html#parameter">parameter</a> be avail'ble. Yer formulae still needs t' be enclosed by <code>$</code> or <code>$$</code> as delimiters respectively.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```math {align="right"}
|
||
</span></span><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
|
||
<span class="math align-right">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$</span>
|
||
<h3 id="shortcode-block-math-with-right-alignment">Shortcode Block Math wit' Right Alignment</h3>
|
||
<p>Ye can also use shortcode rules. Yer formulae still needs t' be enclosed by <code>$</code> or <code>$$</code> as delimiters respectively.</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="p"><</span> <span class="nt">math</span> <span class="na">align</span><span class="o">=</span><span class="s">"right"</span> <span class="p">></span>}}
|
||
</span></span><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span></span><span class="line"><span class="cl">{{<span class="p"><</span> <span class="p">/</span><span class="nt">math</span> <span class="p">></span>}}</span></span></code></pre></div>
|
||
<span class="math align-right">
|
||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span>
|
||
<h3 id="chemical-formulae">Chemical Formulae</h3>
|
||
<p>Th' MathJax library can also be used fer chemical formulae.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$</span></span></code></pre></div>
|
||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="merrrmaid">Merrrmaid</h1>
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates
|
||
</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may look weird in this trrranslat'n. Like seeing Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div><p>Th' <code>mermaid</code> shortcode generates diagrams an' flowcharts from text 'n a similar manner as Marrrkdown us'n th' <a href="https://mermaidjs.github.io/" rel="external" target="_self">Merrrmaid</a> library.</p>
|
||
<pre class="mermaid align-center zoomable">graph LR;
|
||
If --> Then
|
||
Then --> Else</pre>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="codefence"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','codefence')"
|
||
>
|
||
<span class="tab-nav-text">codefence</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="codefence"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```mermaid {align="center" zoom="true"}
|
||
</span></span><span class="line"><span class="cl">graph LR;
|
||
</span></span><span class="line"><span class="cl"> If --> Then
|
||
</span></span><span class="line"><span class="cl"> Then --> Else
|
||
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="nx">align</span><span class="p">=</span><span class="s">"center"</span> <span class="nx">zoom</span><span class="p">=</span><span class="s">"true"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">graph</span> <span class="nx">LR</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">If</span> <span class="o">--</span><span class="p">></span> <span class="nx">Then</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Then</span> <span class="o">--</span><span class="p">></span> <span class="nx">Else</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/mermaid.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"graph LR;\n If --> Then\n Then --> Else"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"align"</span> <span class="s">"center"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"zoom"</span> <span class="s">"true"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Codefence rules be widely avail'ble 'n other Marrrkdown parsers like GitHub an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>align</strong></td>
|
||
<td><code>center</code></td>
|
||
<td>Th' vertical alignment.<br><br>Allowed values be <code>left</code>, <code>center</code> or <code>right</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>zoom</strong></td>
|
||
<td>see notes</td>
|
||
<td>Whether th' graph be pan- an' zoom'ble.<br><br>If not set th' value be determined by th' <a href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html#configuring-pan-and-zoom"><code>mermaidZoom</code> sett'n</a> o' yer configurat'ns opt'ns or th' planks front matter or <code>false</code> if not set at all.<br><br>- <code>false</code>: no pan or zoom<br>- <code>true</code>: pan an' zoom active</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td><em><empty></em></td>
|
||
<td>Yer Merrrmaid graph.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="settings">Sett'ns</h2>
|
||
<h3 id="configuring-pan-and-zoom">Configur'n Pan an' Zoom</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Th' generated graphs can be panned by dragg'n them an' zoomed by us'n th' mousewheel. On mobile devices ye can use finger gestures.</p>
|
||
<p>By default this be disabled. Set <code>mermaidZoom=true</code> t' en'ble it.</p>
|
||
<p>Individual sett'ns o' a graphs <a href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html#parameter"><code>zoom</code> parameter</a> have precedence over th' page’s front matter an' configurat'n opt'ns 'n that order.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">mermaidZoom</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">mermaidZoom</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"mermaidZoom"</span><span class="p">:</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="providing-initialization-options-for-the-mermaid-library">Provid'n Initializat'n Opt'ns fer th' Merrrmaid Library</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Th' Merrrmaid library be configured wit' default sett'ns fer initializat'n.</p>
|
||
<p>Ye can overwrite th' sett'ns by provid'n a JSON object 'n <code>mermaidInitialize</code>. See <a href="https://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi-configuration-defaults" rel="external" target="_self">Mermaid’s documentat'n</a> fer all allowed sett'ns.</p>
|
||
<p>Keep 'n mind that initializat'n sett'ns o' yer planks front matter overwrite all sett'ns o' yer configurat'n opt'ns.</p>
|
||
<p>In addit'n, ye can merge sett'ns fer each individual graph through <a href="https://mermaid-js.github.io/mermaid/#/directives?id=directives" rel="external" target="_self">diagram directives</a> on top o' th' sett'ns o' yer page’s front matter or configurat'n opt'ns.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">mermaidInitialize</span> <span class="p">=</span> <span class="s1">'{ "securityLevel": "loose" }'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">mermaidInitialize</span><span class="p">:</span><span class="w"> </span><span class="s1">'{ "securityLevel": "loose" }'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"mermaidInitialize"</span><span class="p">:</span> <span class="s2">"{ \"securityLevel\": \"loose\" }"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="loading-an-external-version-of-the-mermaid-library">Load'n an External Version o' th' Merrrmaid Library</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Th' theme uses th' shipped Merrrmaid library by default.</p>
|
||
<p>In case ye want do use a different version o' th' Merrrmaid library but don’t want t' override th' shipped version, ye can set <code>customMermaidURL</code> t' th' URL o' th' external Merrrmaid library.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">customMermaidURL</span> <span class="p">=</span> <span class="s1">'https://unpkg.com/mermaid/dist/mermaid.min.js'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">customMermaidURL</span><span class="p">:</span><span class="w"> </span><span class="l">https://unpkg.com/mermaid/dist/mermaid.min.js</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"customMermaidURL"</span><span class="p">:</span> <span class="s2">"https://unpkg.com/mermaid/dist/mermaid.min.js"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="force-loading-of-the-mermaid-library">Force Load'n o' th' Merrrmaid Library</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Th' Merrrmaid library will be boarded if th' plank contains an <code>mermaid</code> shortcode or codefence.</p>
|
||
<p>Ye can force load'n th' Merrrmaid library if no shortcode or codefence was used by sett'n <code>mermaid.force=true</code>. If a shortcode or codefence was found, this opt'n has no effect. This comes handy 'n case ye be us'n script'n t' render a graph.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">mermaid</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">force</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">mermaid</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">force</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"mermaid"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"force"</span><span class="p">:</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="setting-a-specific-mermaid-theme">Sett'n a Specific Merrrmaid Theme</h3>
|
||
<p>While ye can configure th' Merrrmaid theme t' render yer graph by us'n one o' th' <a href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html#providing-initialization-options-for-the-mermaid-library">initializat'n opt'ns</a>, th' recommended way be t' set th' default value us'n th' <code>--MERMAID-theme</code> vari'ble 'n yer <a href="/hugo-theme-relearn/pir/configuration/branding/generator/index.html">color variant stylesheet</a>. This allows yer graphs t' look pretty when th' user switches th' color variant.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="flowchart-with-yaml-title">Flowchart wit' YAML-Title</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>---
|
||
</span></span><span class="line"><span class="cl">title: Example Diagram
|
||
</span></span><span class="line"><span class="cl">---
|
||
</span></span><span class="line"><span class="cl">graph LR;
|
||
</span></span><span class="line"><span class="cl"> A[Hard edge] -->|Link text| B(Round edge)
|
||
</span></span><span class="line"><span class="cl"> B --> C{<strong>Decision</strong>}
|
||
</span></span><span class="line"><span class="cl"> C -->|One| D[Result one]
|
||
</span></span><span class="line"><span class="cl"> C -->|Two| E[Result two]
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">---
|
||
title: Example Diagram
|
||
---
|
||
graph LR;
|
||
A[Hard edge] -->|Link text| B(Round edge)
|
||
B --> C{<strong>Decision</strong>}
|
||
C -->|One| D[Result one]
|
||
C -->|Two| E[Result two]</pre>
|
||
<h3 id="sequence-diagram-with-configuration-directive">Sequence Diagram wit' Configurat'n Directive</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
|
||
</span></span><span class="line"><span class="cl">sequenceDiagram
|
||
</span></span><span class="line"><span class="cl"> Alice->>John: Hello John, how be ye?
|
||
</span></span><span class="line"><span class="cl"> loop Healthcheck
|
||
</span></span><span class="line"><span class="cl"> John->>John: Fight against hypochondria
|
||
</span></span><span class="line"><span class="cl"> end
|
||
</span></span><span class="line"><span class="cl"> Note right of John: Rational thoughts!
|
||
</span></span><span class="line"><span class="cl"> John-->>Alice: Great!
|
||
</span></span><span class="line"><span class="cl"> John->>Bob: How about ye?
|
||
</span></span><span class="line"><span class="cl"> Bob-->>John: Jolly bloody!
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
|
||
sequenceDiagram
|
||
Alice->>John: Hello John, how be ye?
|
||
loop Healthcheck
|
||
John->>John: Fight against hypochondria
|
||
end
|
||
Note right of John: Rational thoughts!
|
||
John-->>Alice: Great!
|
||
John->>Bob: How about ye?
|
||
Bob-->>John: Jolly bloody!</pre>
|
||
<h3 id="class-diagram">Class Diagram</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>classDiagram
|
||
</span></span><span class="line"><span class="cl"> Animal <|-- Duck
|
||
</span></span><span class="line"><span class="cl"> Animal <|-- Fish
|
||
</span></span><span class="line"><span class="cl"> Animal <|-- Zebra
|
||
</span></span><span class="line"><span class="cl"> Animal : +int age
|
||
</span></span><span class="line"><span class="cl"> Animal : +Str'n gender
|
||
</span></span><span class="line"><span class="cl"> Animal: +isMammal()
|
||
</span></span><span class="line"><span class="cl"> Animal: +mate()
|
||
</span></span><span class="line"><span class="cl"> class Duck{
|
||
</span></span><span class="line"><span class="cl"> +Str'n beakColor
|
||
</span></span><span class="line"><span class="cl"> +swim()
|
||
</span></span><span class="line"><span class="cl"> +quack()
|
||
</span></span><span class="line"><span class="cl"> }
|
||
</span></span><span class="line"><span class="cl"> class Fish{
|
||
</span></span><span class="line"><span class="cl"> -int sizeInFeet
|
||
</span></span><span class="line"><span class="cl"> -canEat()
|
||
</span></span><span class="line"><span class="cl"> }
|
||
</span></span><span class="line"><span class="cl"> class Zebra{
|
||
</span></span><span class="line"><span class="cl"> +bool is_wild
|
||
</span></span><span class="line"><span class="cl"> +run()
|
||
</span></span><span class="line"><span class="cl"> }
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">classDiagram
|
||
Animal <|-- Duck
|
||
Animal <|-- Fish
|
||
Animal <|-- Zebra
|
||
Animal : +int age
|
||
Animal : +Str'n gender
|
||
Animal: +isMammal()
|
||
Animal: +mate()
|
||
class Duck{
|
||
+Str'n beakColor
|
||
+swim()
|
||
+quack()
|
||
}
|
||
class Fish{
|
||
-int sizeInFeet
|
||
-canEat()
|
||
}
|
||
class Zebra{
|
||
+bool is_wild
|
||
+run()
|
||
}</pre>
|
||
<h3 id="state-diagram-aligned-to-the-right-using-shortcode-syntax">State Diagram Aligned t' th' Right Us'n Shortcode Rules</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="nx">align</span><span class="p">=</span><span class="s">"right"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">stateDiagram</span><span class="o">-</span><span class="nx">v2</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">open</span><span class="p">:</span> <span class="nx">Open</span> <span class="nx">Door</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">closed</span><span class="p">:</span> <span class="nx">Closed</span> <span class="nx">Door</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">locked</span><span class="p">:</span> <span class="nx">Locked</span> <span class="nx">Door</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">open</span> <span class="o">--</span><span class="p">></span> <span class="nx">closed</span><span class="p">:</span> <span class="nx">Close</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">closed</span> <span class="o">--</span><span class="p">></span> <span class="nx">locked</span><span class="p">:</span> <span class="nx">Lock</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">locked</span> <span class="o">--</span><span class="p">></span> <span class="nx">closed</span><span class="p">:</span> <span class="nx">Unlock</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">closed</span> <span class="o">--</span><span class="p">></span> <span class="nx">open</span><span class="p">:</span> <span class="nx">Open</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-right zoomable">
|
||
stateDiagram-v2
|
||
open: Open Door
|
||
closed: Closed Door
|
||
locked: Locked Door
|
||
open --> closed: Close
|
||
closed --> locked: Lock
|
||
locked --> closed: Unlock
|
||
closed --> open: Open
|
||
</pre>
|
||
<h3 id="entity-relationship-model-with-non-default-mermaid-theme">Entity Relationship Model wit' Non-Default Merrrmaid Theme</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>%%{init:{"theme":"forest"}}%%
|
||
</span></span><span class="line"><span class="cl">erDiagram
|
||
</span></span><span class="line"><span class="cl"> CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||
</span></span><span class="line"><span class="cl"> CUSTOMER ||--o{ ORDER : places
|
||
</span></span><span class="line"><span class="cl"> CUSTOMER ||--o{ INVOICE : "li'ble for"
|
||
</span></span><span class="line"><span class="cl"> DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||
</span></span><span class="line"><span class="cl"> INVOICE ||--|{ ORDER : covers
|
||
</span></span><span class="line"><span class="cl"> ORDER ||--|{ ORDER-ITEM : includes
|
||
</span></span><span class="line"><span class="cl"> PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||
</span></span><span class="line"><span class="cl"> PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">%%{init:{"theme":"forest"}}%%
|
||
erDiagram
|
||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||
CUSTOMER ||--o{ ORDER : places
|
||
CUSTOMER ||--o{ INVOICE : "li'ble for"
|
||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||
INVOICE ||--|{ ORDER : covers
|
||
ORDER ||--|{ ORDER-ITEM : includes
|
||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"</pre>
|
||
<h3 id="user-journey">User Journey</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>journey
|
||
</span></span><span class="line"><span class="cl"> title My work'n day
|
||
</span></span><span class="line"><span class="cl"> section Go t' work
|
||
</span></span><span class="line"><span class="cl"> Make tea: 5: Me
|
||
</span></span><span class="line"><span class="cl"> Go upstairs: 3: Me
|
||
</span></span><span class="line"><span class="cl"> Do work: 1: Me, Cat
|
||
</span></span><span class="line"><span class="cl"> section Go home
|
||
</span></span><span class="line"><span class="cl"> Go downstairs: 5: Me
|
||
</span></span><span class="line"><span class="cl"> Sit down: 3: Me
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">journey
|
||
title My work'n day
|
||
section Go t' work
|
||
Make tea: 5: Me
|
||
Go upstairs: 3: Me
|
||
Do work: 1: Me, Cat
|
||
section Go home
|
||
Go downstairs: 5: Me
|
||
Sit down: 3: Me</pre>
|
||
<h3 id="gantt-chart">GANTT Chart</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>gantt
|
||
</span></span><span class="line"><span class="cl"> dateFormat YYYY-MM-DD
|
||
</span></span><span class="line"><span class="cl"> title Add'n GANTT diagram functionality t' Merrrmaid
|
||
</span></span><span class="line"><span class="cl"> section A section
|
||
</span></span><span class="line"><span class="cl"> Completed task :done, des1, 2014-01-06,2014-01-08
|
||
</span></span><span class="line"><span class="cl"> Active task :active, des2, 2014-01-09, 3d
|
||
</span></span><span class="line"><span class="cl"> Future task : des3, after des2, 5d
|
||
</span></span><span class="line"><span class="cl"> Future task2 : des4, after des3, 5d
|
||
</span></span><span class="line"><span class="cl"> section Critical tasks
|
||
</span></span><span class="line"><span class="cl"> Completed task 'n th' critical line :crit, done, 2014-01-06,24h
|
||
</span></span><span class="line"><span class="cl"> Implement parser an' jison :crit, done, after des1, 2d
|
||
</span></span><span class="line"><span class="cl"> Create tests fer parser :crit, active, 3d
|
||
</span></span><span class="line"><span class="cl"> Future task 'n critical line :crit, 5d
|
||
</span></span><span class="line"><span class="cl"> Create tests fer renderer :2d
|
||
</span></span><span class="line"><span class="cl"> Add t' Merrrmaid :1d
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">gantt
|
||
dateFormat YYYY-MM-DD
|
||
title Add'n GANTT diagram functionality t' Merrrmaid
|
||
section A section
|
||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||
Active task :active, des2, 2014-01-09, 3d
|
||
Future task : des3, after des2, 5d
|
||
Future task2 : des4, after des3, 5d
|
||
section Critical tasks
|
||
Completed task 'n th' critical line :crit, done, 2014-01-06,24h
|
||
Implement parser an' jison :crit, done, after des1, 2d
|
||
Create tests fer parser :crit, active, 3d
|
||
Future task 'n critical line :crit, 5d
|
||
Create tests fer renderer :2d
|
||
Add t' Merrrmaid :1d</pre>
|
||
<h3 id="pie-chart-without-zoom">Pie Chart without Zoom</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```mermaid {zoom="false"}
|
||
</span></span><span class="line"><span class="cl">pie title Pets adopted by volunteers
|
||
</span></span><span class="line"><span class="cl"> "Dogs" : 386
|
||
</span></span><span class="line"><span class="cl"> "Cats" : 85
|
||
</span></span><span class="line"><span class="cl"> "Rats" : 15
|
||
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">pie title Pets adopted by volunteers
|
||
"Dogs" : 386
|
||
"Cats" : 85
|
||
"Rats" : 15</pre>
|
||
<h3 id="quadrant-chart">Quadrant Chart</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>quadrantChart
|
||
</span></span><span class="line"><span class="cl"> title Reach an' engagement o' campaigns
|
||
</span></span><span class="line"><span class="cl"> x-axis Low Reach --> High Reach
|
||
</span></span><span class="line"><span class="cl"> y-axis Low Engagement --> High Engagement
|
||
</span></span><span class="line"><span class="cl"> quadrant-1 We should expand
|
||
</span></span><span class="line"><span class="cl"> quadrant-2 Need t' promote
|
||
</span></span><span class="line"><span class="cl"> quadrant-3 Re-evaluate
|
||
</span></span><span class="line"><span class="cl"> quadrant-4 May be improved
|
||
</span></span><span class="line"><span class="cl"> Campaign A: [0.3, 0.6]
|
||
</span></span><span class="line"><span class="cl"> Campaign B: [0.45, 0.23]
|
||
</span></span><span class="line"><span class="cl"> Campaign C: [0.57, 0.69]
|
||
</span></span><span class="line"><span class="cl"> Campaign D: [0.78, 0.34]
|
||
</span></span><span class="line"><span class="cl"> Campaign E: [0.40, 0.34]
|
||
</span></span><span class="line"><span class="cl"> Campaign F: [0.35, 0.78]
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">quadrantChart
|
||
title Reach an' engagement o' campaigns
|
||
x-axis Low Reach --> High Reach
|
||
y-axis Low Engagement --> High Engagement
|
||
quadrant-1 We should expand
|
||
quadrant-2 Need t' promote
|
||
quadrant-3 Re-evaluate
|
||
quadrant-4 May be improved
|
||
Campaign A: [0.3, 0.6]
|
||
Campaign B: [0.45, 0.23]
|
||
Campaign C: [0.57, 0.69]
|
||
Campaign D: [0.78, 0.34]
|
||
Campaign E: [0.40, 0.34]
|
||
Campaign F: [0.35, 0.78]</pre>
|
||
<h3 id="requirement-diagram">Requirement Diagram</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>requirementDiagram
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> requirement test_req {
|
||
</span></span><span class="line"><span class="cl"> id: 1
|
||
</span></span><span class="line"><span class="cl"> text: th' test text.
|
||
</span></span><span class="line"><span class="cl"> risk: high
|
||
</span></span><span class="line"><span class="cl"> verifymethod: test
|
||
</span></span><span class="line"><span class="cl"> }
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> element test_entity {
|
||
</span></span><span class="line"><span class="cl"> type: simulat'n
|
||
</span></span><span class="line"><span class="cl"> }
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> test_entity - satisfies -> test_req
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">requirementDiagram
|
||
|
||
requirement test_req {
|
||
id: 1
|
||
text: th' test text.
|
||
risk: high
|
||
verifymethod: test
|
||
}
|
||
|
||
element test_entity {
|
||
type: simulat'n
|
||
}
|
||
|
||
test_entity - satisfies -> test_req</pre>
|
||
<h3 id="git-graph">Git Graph</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>gitGraph
|
||
</span></span><span class="line"><span class="cl"> commit
|
||
</span></span><span class="line"><span class="cl"> commit
|
||
</span></span><span class="line"><span class="cl"> branch develop
|
||
</span></span><span class="line"><span class="cl"> checkout develop
|
||
</span></span><span class="line"><span class="cl"> commit
|
||
</span></span><span class="line"><span class="cl"> commit
|
||
</span></span><span class="line"><span class="cl"> checkout main
|
||
</span></span><span class="line"><span class="cl"> merge develop
|
||
</span></span><span class="line"><span class="cl"> commit
|
||
</span></span><span class="line"><span class="cl"> commit
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">gitGraph
|
||
commit
|
||
commit
|
||
branch develop
|
||
checkout develop
|
||
commit
|
||
commit
|
||
checkout main
|
||
merge develop
|
||
commit
|
||
commit</pre>
|
||
<h3 id="c4-diagrams">C4 Diagrams</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>C4Context
|
||
</span></span><span class="line"><span class="cl"> title System Context diagram fer Internet Bank'n System
|
||
</span></span><span class="line"><span class="cl"> Enterprise_Boundary(b0, "BankBoundary0") {
|
||
</span></span><span class="line"><span class="cl"> Person(customerA, "Bank'n Customer A", "A customer o' th' bank, wit' personal bank accounts.")
|
||
</span></span><span class="line"><span class="cl"> Person(customerB, "Bank'n Customer B")
|
||
</span></span><span class="line"><span class="cl"> Person_Ext(customerC, "Bank'n Customer C", "desc")
|
||
</span></span><span class="line"><span class="cl"> Person(customerD, "Bank'n Customer D", "A customer o' th' bank, <br/> wit' personal bank accounts.")
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> System(SystemAA, "Internet Bank'n System", "Allows customers t' view informat'n about their bank accounts, an' make payments.")
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> Enterprise_Boundary(b1, "BankBoundary") {
|
||
</span></span><span class="line"><span class="cl"> SystemDb_Ext(SystemE, "Mainframe Bank'n System", "Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc.")
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> System_Boundary(b2, "BankBoundary2") {
|
||
</span></span><span class="line"><span class="cl"> System(SystemA, "Bank'n System A")
|
||
</span></span><span class="line"><span class="cl"> System(SystemB, "Bank'n System B", "A system o' th' bank, wit' personal bank accounts. next line.")
|
||
</span></span><span class="line"><span class="cl"> }
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||
</span></span><span class="line"><span class="cl"> SystemDb(SystemD, "Bank'n System D Database", "A system o' th' bank, wit' personal bank accounts.")
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> Boundary(b3, "BankBoundary3", "boundary") {
|
||
</span></span><span class="line"><span class="cl"> SystemQueue(SystemF, "Bank'n System F Queue", "A system o' th' bank.")
|
||
</span></span><span class="line"><span class="cl"> SystemQueue_Ext(SystemG, "Bank'n System G Queue", "A system o' th' bank, wit' personal bank accounts.")
|
||
</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">
|
||
</span></span><span class="line"><span class="cl"> BiRel(customerA, SystemAA, "Uses")
|
||
</span></span><span class="line"><span class="cl"> BiRel(SystemAA, SystemE, "Uses")
|
||
</span></span><span class="line"><span class="cl"> Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||
</span></span><span class="line"><span class="cl"> Rel(SystemC, customerA, "Sends e-mails to")
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||
</span></span><span class="line"><span class="cl"> UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||
</span></span><span class="line"><span class="cl"> UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
||
</span></span><span class="line"><span class="cl"> UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
||
</span></span><span class="line"><span class="cl"> UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">C4Context
|
||
title System Context diagram fer Internet Bank'n System
|
||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||
Person(customerA, "Bank'n Customer A", "A customer o' th' bank, wit' personal bank accounts.")
|
||
Person(customerB, "Bank'n Customer B")
|
||
Person_Ext(customerC, "Bank'n Customer C", "desc")
|
||
Person(customerD, "Bank'n Customer D", "A customer o' th' bank, <br/> wit' personal bank accounts.")
|
||
|
||
System(SystemAA, "Internet Bank'n System", "Allows customers t' view informat'n about their bank accounts, an' make payments.")
|
||
|
||
Enterprise_Boundary(b1, "BankBoundary") {
|
||
SystemDb_Ext(SystemE, "Mainframe Bank'n System", "Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc.")
|
||
|
||
System_Boundary(b2, "BankBoundary2") {
|
||
System(SystemA, "Bank'n System A")
|
||
System(SystemB, "Bank'n System B", "A system o' th' bank, wit' personal bank accounts. next line.")
|
||
}
|
||
|
||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||
SystemDb(SystemD, "Bank'n System D Database", "A system o' th' bank, wit' personal bank accounts.")
|
||
|
||
Boundary(b3, "BankBoundary3", "boundary") {
|
||
SystemQueue(SystemF, "Bank'n System F Queue", "A system o' th' bank.")
|
||
SystemQueue_Ext(SystemG, "Bank'n System G Queue", "A system o' th' bank, wit' personal bank accounts.")
|
||
}
|
||
}
|
||
}
|
||
|
||
BiRel(customerA, SystemAA, "Uses")
|
||
BiRel(SystemAA, SystemE, "Uses")
|
||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||
Rel(SystemC, customerA, "Sends e-mails to")
|
||
|
||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||
|
||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")</pre>
|
||
<h3 id="mindmaps">Mindmaps</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>mindmap
|
||
</span></span><span class="line"><span class="cl"> root((mindmap))
|
||
</span></span><span class="line"><span class="cl"> Origins
|
||
</span></span><span class="line"><span class="cl"> Long history
|
||
</span></span><span class="line"><span class="cl"> ::icon(fa fa-book)
|
||
</span></span><span class="line"><span class="cl"> Popularisat'n
|
||
</span></span><span class="line"><span class="cl"> British popular psychology author Tony Buzan
|
||
</span></span><span class="line"><span class="cl"> Research
|
||
</span></span><span class="line"><span class="cl"> On effectiveness<br/>and features
|
||
</span></span><span class="line"><span class="cl"> On Automatic creat'n
|
||
</span></span><span class="line"><span class="cl"> Uses
|
||
</span></span><span class="line"><span class="cl"> Creative techniques
|
||
</span></span><span class="line"><span class="cl"> Strategic plann'n
|
||
</span></span><span class="line"><span class="cl"> Argument mapp'n
|
||
</span></span><span class="line"><span class="cl"> Tools
|
||
</span></span><span class="line"><span class="cl"> Pen an' paper
|
||
</span></span><span class="line"><span class="cl"> Merrrmaid
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">mindmap
|
||
root((mindmap))
|
||
Origins
|
||
Long history
|
||
::icon(fa fa-book)
|
||
Popularisat'n
|
||
British popular psychology author Tony Buzan
|
||
Research
|
||
On effectiveness<br/>and features
|
||
On Automatic creat'n
|
||
Uses
|
||
Creative techniques
|
||
Strategic plann'n
|
||
Argument mapp'n
|
||
Tools
|
||
Pen an' paper
|
||
Merrrmaid</pre>
|
||
<h3 id="timeline">Timeline</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>timeline
|
||
</span></span><span class="line"><span class="cl"> title History o' Social Media Platform
|
||
</span></span><span class="line"><span class="cl"> 2002 : LinkedIn
|
||
</span></span><span class="line"><span class="cl"> 2004 : Facebook
|
||
</span></span><span class="line"><span class="cl"> : Google
|
||
</span></span><span class="line"><span class="cl"> 2005 : Youtube
|
||
</span></span><span class="line"><span class="cl"> 2006 : Twitter
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">timeline
|
||
title History o' Social Media Platform
|
||
2002 : LinkedIn
|
||
2004 : Facebook
|
||
: Google
|
||
2005 : Youtube
|
||
2006 : Twitter</pre>
|
||
<h3 id="sankey">Sankey</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>sankey-beta
|
||
</span></span><span class="line"><span class="cl"> %% source,target,value
|
||
</span></span><span class="line"><span class="cl"> Electricity grid,Over generat'n / exports,104.453
|
||
</span></span><span class="line"><span class="cl"> Electricity grid,Heat'n an' cool'n - homes,113.726
|
||
</span></span><span class="line"><span class="cl"> Electricity grid,H2 conversion,27.14
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">sankey-beta
|
||
%% source,target,value
|
||
Electricity grid,Over generat'n / exports,104.453
|
||
Electricity grid,Heat'n an' cool'n - homes,113.726
|
||
Electricity grid,H2 conversion,27.14</pre>
|
||
<h3 id="xychart">XYChart</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>xychart-beta
|
||
</span></span><span class="line"><span class="cl"> title "Sales Revenue"
|
||
</span></span><span class="line"><span class="cl"> x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||
</span></span><span class="line"><span class="cl"> y-axis "Revenue (in $)" 4000 --> 11000
|
||
</span></span><span class="line"><span class="cl"> bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||
</span></span><span class="line"><span class="cl"> line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">xychart-beta
|
||
title "Sales Revenue"
|
||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||
y-axis "Revenue (in $)" 4000 --> 11000
|
||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]</pre>
|
||
<h3 id="block-diagram">Block Diagram</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>block-beta
|
||
</span></span><span class="line"><span class="cl"> columns 1
|
||
</span></span><span class="line"><span class="cl"> db(("DB"))
|
||
</span></span><span class="line"><span class="cl"> blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
|
||
</span></span><span class="line"><span class="cl"> block:ID
|
||
</span></span><span class="line"><span class="cl"> A
|
||
</span></span><span class="line"><span class="cl"> B["A wide one 'n th' middle"]
|
||
</span></span><span class="line"><span class="cl"> C
|
||
</span></span><span class="line"><span class="cl"> end
|
||
</span></span><span class="line"><span class="cl"> space
|
||
</span></span><span class="line"><span class="cl"> D
|
||
</span></span><span class="line"><span class="cl"> ID --> D
|
||
</span></span><span class="line"><span class="cl"> C --> D
|
||
</span></span><span class="line"><span class="cl"> style B fill:#969,stroke:#333,stroke-width:4px
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">block-beta
|
||
columns 1
|
||
db(("DB"))
|
||
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
|
||
block:ID
|
||
A
|
||
B["A wide one 'n th' middle"]
|
||
C
|
||
end
|
||
space
|
||
D
|
||
ID --> D
|
||
C --> D
|
||
style B fill:#969,stroke:#333,stroke-width:4px</pre>
|
||
<h3 id="packet">Packet</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>---
|
||
</span></span><span class="line"><span class="cl">title: "TCP Packet"
|
||
</span></span><span class="line"><span class="cl">---
|
||
</span></span><span class="line"><span class="cl">packet-beta
|
||
</span></span><span class="line"><span class="cl"> 0-15: "Source Port"
|
||
</span></span><span class="line"><span class="cl"> 16-31: "Destinat'n Port"
|
||
</span></span><span class="line"><span class="cl"> 32-63: "Sequence Number"
|
||
</span></span><span class="line"><span class="cl"> 64-95: "Acknowledgment Number"
|
||
</span></span><span class="line"><span class="cl"> 96-99: "Data Offset"
|
||
</span></span><span class="line"><span class="cl"> 100-105: "Reserved"
|
||
</span></span><span class="line"><span class="cl"> 106: "URG"
|
||
</span></span><span class="line"><span class="cl"> 107: "ACK"
|
||
</span></span><span class="line"><span class="cl"> 108: "PSH"
|
||
</span></span><span class="line"><span class="cl"> 109: "RST"
|
||
</span></span><span class="line"><span class="cl"> 110: "SYN"
|
||
</span></span><span class="line"><span class="cl"> 111: "FIN"
|
||
</span></span><span class="line"><span class="cl"> 112-127: "Window"
|
||
</span></span><span class="line"><span class="cl"> 128-143: "Checksum"
|
||
</span></span><span class="line"><span class="cl"> 144-159: "Urgent Pointer"
|
||
</span></span><span class="line"><span class="cl"> 160-191: "(Opt'ns an' Padding)"
|
||
</span></span><span class="line"><span class="cl"> 192-255: "Data (vari'ble length)"
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">---
|
||
title: "TCP Packet"
|
||
---
|
||
packet-beta
|
||
0-15: "Source Port"
|
||
16-31: "Destinat'n Port"
|
||
32-63: "Sequence Number"
|
||
64-95: "Acknowledgment Number"
|
||
96-99: "Data Offset"
|
||
100-105: "Reserved"
|
||
106: "URG"
|
||
107: "ACK"
|
||
108: "PSH"
|
||
109: "RST"
|
||
110: "SYN"
|
||
111: "FIN"
|
||
112-127: "Window"
|
||
128-143: "Checksum"
|
||
144-159: "Urgent Pointer"
|
||
160-191: "(Opt'ns an' Padding)"
|
||
192-255: "Data (vari'ble length)"</pre>
|
||
<h3 id="architecture">Architecture</h3>
|
||
<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="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>architecture-beta
|
||
</span></span><span class="line"><span class="cl"> group api(cloud)[API]
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> service db(database)[Database] 'n api
|
||
</span></span><span class="line"><span class="cl"> service disk1(disk)[Storage] 'n api
|
||
</span></span><span class="line"><span class="cl"> service disk2(disk)[Storage] 'n api
|
||
</span></span><span class="line"><span class="cl"> service server(server)[Server] 'n api
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> db:L -- R:server
|
||
</span></span><span class="line"><span class="cl"> disk1:T -- B:server
|
||
</span></span><span class="line"><span class="cl"> disk2:T -- B:db
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<pre class="mermaid align-center zoomable">architecture-beta
|
||
group api(cloud)[API]
|
||
|
||
service db(database)[Database] 'n api
|
||
service disk1(disk)[Storage] 'n api
|
||
service disk2(disk)[Storage] 'n api
|
||
service server(server)[Server] 'n api
|
||
|
||
db:L -- R:server
|
||
disk1:T -- B:server
|
||
disk2:T -- B:db</pre>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="notice">Notice</h1>
|
||
|
||
<p>Th' <code>notice</code> shortcode shows various types o' disclaimers wit' adjust'ble color, title an' ay'con t' help ye structure yer plank.</p>
|
||
<div class="box notices cstyle primary">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-skull-crossbones"></i> There may be pirates
|
||
</div>
|
||
<div class="box-content">
|
||
<p>It be all about th' boxes.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="callout"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','callout')"
|
||
>
|
||
<span class="tab-nav-text">callout</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span class="tab-nav-text">shortcode (positional)</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="callout"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<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><span class="ge">[!primary] There may be pirates
|
||
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>> It be all about th' boxes.</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"There may be pirates"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"skull-crossbones"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">It</span> <span class="nx">be</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">th'</span> <span class="nx">boxes</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">primary</span> <span class="s">"There may be pirates"</span> <span class="s">"skull-crossbones"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">It</span> <span class="nx">be</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">th'</span> <span class="nx">boxes</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/notice.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"style"</span> <span class="s">"primary"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"There may be pirates"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"skull-crossbones"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"It be all about th' boxes."</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Callout rules has limited features as it does not provide all o' th' below parameter. Nevertheless, it be widely avail'ble 'n other Marrrkdown parsers like wit' <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 alerts</a> or <a href="https://help.obsidian.md/Editing+and+formatting/Callouts#Change+the+title" rel="external" target="_self">Obsidian callouts</a> an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.</p>
|
||
<p>If ye want t' display a transparent expand'ble box without any border, ye can also use th' <a href="/hugo-theme-relearn/pir/shortcodes/expand/index.html"><code>expand</code> shortcode</a>.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Posit'n</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>style</strong></td>
|
||
<td>1</td>
|
||
<td><code>default</code></td>
|
||
<td>Th' style scheme used fer th' box.<br><br>- by severity: <code>caut'n</code>, <code>important</code>, <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>cyan</code>, <code>green</code>, <code>grey</code>, <code>magenta</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code><br><br>Ye can also <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">define yer own styles</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>color</strong></td>
|
||
<td></td>
|
||
<td>see notes</td>
|
||
<td>Th' <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel="external" target="_self">CSS color value</a> t' be used. If not set, th' chosen color depends on th' <strong>style</strong>. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n color fer th' severity<br>- fer all other styles: th' correspond'n color<br><br>This be not avail'ble us'n callout rules.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>title</strong></td>
|
||
<td>2</td>
|
||
<td>see notes</td>
|
||
<td>Arbitrary text fer th' box title. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwrite th' default.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other styles: <em><empty></em><br><br>If ye want no title fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>ay'con</strong></td>
|
||
<td>3</td>
|
||
<td>see notes</td>
|
||
<td><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n on th' <strong>style</strong> there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n ay'con fer th' severity<br>- fer all other styles: <em><empty></em><br><br>If ye want no ay'con fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)<br><br>This be not avail'ble us'n callout rules.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>expanded</strong></td>
|
||
<td></td>
|
||
<td><em><empty></em></td>
|
||
<td>Whether t' draw an expander an' how th' rrrambl'n be displayed.<br><br>- <em><empty></em>: no expander be drawn an' th' rrrambl'n be permanently shown<br>- <code>true</code>: th' expander be drawn an' th' rrrambl'n be initially shown<br>- <code>false</code>: th' expander be drawn an' th' rrrambl'n be initially hidden</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td></td>
|
||
<td><em><empty></em></td>
|
||
<td>Arbitrary text t' be displayed 'n box.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="settings">Sett'ns</h2>
|
||
<h3 id="defining-own-styles">Defin'n own Styles</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> Besides th' predefined <code>style</code> values <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#parameter">from above</a>, ye be able t' define yer own.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">hugo.</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">boxStyle</span><span class="p">]]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">color</span> <span class="p">=</span> <span class="s1">'gold'</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">i18n</span> <span class="p">=</span> <span class="s1">''</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">ay'con</span> <span class="p">=</span> <span class="s1">'rainbow'</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'magic'</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="s1">'Magic'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">boxStyle</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">color</span><span class="p">:</span><span class="w"> </span><span class="l">gold</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">i18n</span><span class="p">:</span><span class="w"> </span><span class="s2">""</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ay'con</span><span class="p">:</span><span class="w"> </span><span class="l">rainbow</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">magic</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Magic</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"boxStyle"</span><span class="p">:</span> <span class="p">[</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"color"</span><span class="p">:</span> <span class="s2">"gold"</span><span class="p">,</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"i18n"</span><span class="p">:</span> <span class="s2">""</span><span class="p">,</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"icon"</span><span class="p">:</span> <span class="s2">"rainbow"</span><span class="p">,</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"magic"</span><span class="p">,</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"Magic"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Th' <code>style</code> parameter used 'n a shortcode must match th' <code>identifier</code> 'n th' configurat'n. Th' title fer th' style will be determined from th' configured <code>title</code>. If no <code>title</code> but a <code>i18n</code> be set, th' title will be taken from th' translat'n files by that key. Th' <code>title</code> may be empty 'n which case, th' box does not contain a default title. <code>ay'con</code> an' <code>color</code> be work'n similar.</p>
|
||
<p>Ye can also redefine th' predefined styles if you’re not satisfied wit' th' default values.</p>
|
||
<p>Below be a <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#user-defined-style">usage example</a>.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="by-severity-using-callout-syntax">By Severity Us'n Callout Rules</h3>
|
||
<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><span class="ge">[!CAUTION]
|
||
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">> </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">> </span><span class="ge">[!IMPORTANT]
|
||
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">> </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">> </span><span class="ge">[!INFO]
|
||
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">> </span><span class="ge">Informat'n that users <ins>_might_</ins> 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">> </span><span class="ge">[!NOTE]
|
||
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">> </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">> </span><span class="ge">[!TIP]
|
||
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">> </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">> </span><span class="ge">[!WARNING]
|
||
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>> Urgent info that needs immediate user attent'n t' avoid problems.</span></span></code></pre></div>
|
||
<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>
|
||
<h3 id="by-brand-colors-with-title-and-icon-variantion">By Brand Colors wit' Title an' Ay'con Variant'n</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Primary"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">primary</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"secondary"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Secondary"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">secondary</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"accent"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"stopwatch"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">An</span> <span class="o">**</span><span class="nx">accent</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="box notices cstyle primary">
|
||
<div class="box-label">
|
||
Primary
|
||
</div>
|
||
<div class="box-content">
|
||
<p>A <strong>primary</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle secondary">
|
||
<div class="box-label">
|
||
Secondary
|
||
</div>
|
||
<div class="box-content">
|
||
<p>A <strong>secondary</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle accent">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-stopwatch"></i>
|
||
</div>
|
||
<div class="box-content">
|
||
<p>An <strong>accent</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="by-color">By Color</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"blue"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Blue"</span><span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">blue</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"cyan"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Cyan"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">cyan</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"green"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Green"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">green</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"grey"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"bug"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">grey</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"magenta"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Magenta"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">magenta</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"orange"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Orange"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"bug"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">orange</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Red"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">red</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="box notices cstyle blue">
|
||
<div class="box-label">
|
||
Blue
|
||
</div>
|
||
<div class="box-content">
|
||
<p>A <strong>blue</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle cyan">
|
||
<div class="box-label">
|
||
Cyan
|
||
</div>
|
||
<div class="box-content">
|
||
<p>A <strong>cyan</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle green">
|
||
<div class="box-label">
|
||
Green
|
||
</div>
|
||
<div class="box-content">
|
||
<p>A <strong>green</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle grey">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-bug"></i>
|
||
</div>
|
||
<div class="box-content">
|
||
<p>A <strong>grey</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle magenta">
|
||
<div class="box-label">
|
||
Magenta
|
||
</div>
|
||
<div class="box-content">
|
||
<p>A <strong>magenta</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle orange">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-bug"></i> Orange
|
||
</div>
|
||
<div class="box-content">
|
||
<p>A <strong>orange</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle red">
|
||
<div class="box-label">
|
||
Red
|
||
</div>
|
||
<div class="box-content">
|
||
<p>A <strong>red</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="by-special-color">By Special Color</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"default"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Default"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"skull-crossbones"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Just</span> <span class="nx">some</span> <span class="nx">grey</span> <span class="k">default</span> <span class="nx">color</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"code"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Code"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"skull-crossbones"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Colored</span> <span class="nx">like</span> <span class="nx">a</span> <span class="nx">code</span> <span class="nx">fence</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"transparent"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Transparent"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"skull-crossbones"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">No</span> <span class="nx">vis'ble</span> <span class="nx">borders</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="box notices cstyle default">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-skull-crossbones"></i> Default
|
||
</div>
|
||
<div class="box-content">
|
||
<p>Just some grey default color.</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle code">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-skull-crossbones"></i> Code
|
||
</div>
|
||
<div class="box-content">
|
||
<p>Colored like a code fence.</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle transparent">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-skull-crossbones"></i> Transparent
|
||
</div>
|
||
<div class="box-content">
|
||
<p>No vis'ble borders.</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="various-features">Various Features</h3>
|
||
<h4 id="with-user-defined-color-font-awesome-brand-icon-and-markdown-in-title-and-content">Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown 'n Title an' Rrrambl'n</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">color</span><span class="p">=</span><span class="s">"fuchsia"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"**Hugo** be _awesome_"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"fa-fw fab fa-hackerrank"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">add</span> <span class="nx">standard</span> <span class="nx">markdown</span> <span class="nx">rules</span><span class="p">:</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">an'</span> <span class="nx">even</span> <span class="o">**</span><span class="nx">_bold</span> <span class="nx">emphasized_</span><span class="o">**</span> <span class="nx">text</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">etc</span><span class="p">.[^</span><span class="nx">etc</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">[^</span><span class="nx">etc</span><span class="p">]:</span> <span class="nx">Et</span> <span class="nf">Cetera</span> <span class="p">(</span><span class="nx">English</span><span class="p">:</span> <span class="o">/</span><span class="nx">ɛtˈsɛtərə</span><span class="o">/</span><span class="p">),</span> <span class="nx">abbreviated</span> <span class="nx">t'</span> <span class="nx">etc</span><span class="p">.,</span> <span class="nx">etc</span><span class="p">,</span> <span class="nx">et</span> <span class="nx">cet</span><span class="p">.,</span> <span class="nx">be</span> <span class="nx">a</span> <span class="nx">Latin</span> <span class="nx">expression</span> <span class="nx">that</span> <span class="nx">be</span> <span class="nx">used</span> <span class="nx">'n</span> <span class="nx">English</span> <span class="nx">t'</span> <span class="nx">mean</span> <span class="s">"and other similar things"</span><span class="p">,</span> <span class="nx">or</span> <span class="s">"and so forth"</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="box notices cstyle default" style="--VARIABLE-BOX-color: fuchsia;">
|
||
<div class="box-label">
|
||
<i class="fa-fw fab fa-hackerrank"></i> <strong>Cap'n Hugo</strong> be <em>awesome</em>
|
||
</div>
|
||
<div class="box-content">
|
||
<p>Ye can add standard markdown rules:</p>
|
||
<ul>
|
||
<li>multiple paragraphs</li>
|
||
<li>bullet point lists</li>
|
||
<li><em>emphasized</em>, <strong>bold</strong> an' even <strong><em>bold emphasized</em></strong> text</li>
|
||
<li><a href="https://example.com" rel="external" target="_self">links</a></li>
|
||
<li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li>
|
||
</ul>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div>
|
||
<blockquote>
|
||
<p>th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work) (almost - includ'n other shorrrtcodes may or may not work)</p>
|
||
</blockquote>
|
||
<div class="footnotes" role="doc-endnotes">
|
||
<hr>
|
||
<ol>
|
||
<li id="fn:1">
|
||
<p>Et Cetera (English: /ɛtˈsɛtərə/), abbreviated t' etc., etc, et cet., be a Latin expression that be used 'n English t' mean “and other similar things”, or “and so forth” <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h4 id="expandable-content-area">Expand'ble Rrrambl'n Area</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"green"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Expand me..."</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Expand me..."</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">"false"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Thank</span> <span class="nx">ye</span><span class="p">!</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="expand box notices cstyle green">
|
||
<input type="checkbox" id="R-expand-4ba6ba2c5a7b9cf6e074bd0b89d29d81" aria-controls="R-expandcontent-4ba6ba2c5a7b9cf6e074bd0b89d29d81" checked>
|
||
<label class="expand-label box-label" for="R-expand-4ba6ba2c5a7b9cf6e074bd0b89d29d81">
|
||
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
|
||
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Expand me…
|
||
</label>
|
||
<div class="box-spacer"></div>
|
||
<div id="R-expandcontent-4ba6ba2c5a7b9cf6e074bd0b89d29d81" class="box-content expand-content">
|
||
<p>No need t' press ye!</p>
|
||
</div>
|
||
</div>
|
||
<div class="expand box notices cstyle red">
|
||
<input type="checkbox" id="R-expand-5079dde355402c504c96f59926cc7e86" aria-controls="R-expandcontent-5079dde355402c504c96f59926cc7e86">
|
||
<label class="expand-label box-label" for="R-expand-5079dde355402c504c96f59926cc7e86">
|
||
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
|
||
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Expand me…
|
||
</label>
|
||
<div class="box-spacer"></div>
|
||
<div id="R-expandcontent-5079dde355402c504c96f59926cc7e86" class="box-content expand-content">
|
||
<p>Thank ye!</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="no-content-or-no-title">No Rrrambl'n or No Title</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"accent"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Just a bar"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"accent"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Just</span> <span class="nx">a</span> <span class="nx">box</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="box notices cstyle accent">
|
||
<div class="box-label">
|
||
Just a bar
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle accent">
|
||
<div class="box-content">
|
||
<p>Just a box</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="various-callouts">Various Callouts</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">></span> <span class="p">[!</span><span class="nx">caut'n</span><span class="p">]</span> <span class="nx">Callouts</span> <span class="nx">can</span> <span class="nx">have</span> <span class="nx">custom</span> <span class="nx">titles</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">Like</span> <span class="nx">this</span> <span class="nx">one</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="p">[!</span><span class="nx">caut'n</span><span class="p">]</span> <span class="nx">Title</span><span class="o">-</span><span class="nx">only</span> <span class="nx">callout</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="p">[!</span><span class="nx">note</span><span class="p">]</span><span class="o">-</span> <span class="nx">Be</span> <span class="nx">callouts</span> <span class="nx">fold'ble</span><span class="err">?</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">Yes</span><span class="p">!</span> <span class="nx">In</span> <span class="nx">a</span> <span class="nx">fold'ble</span> <span class="nx">callout</span><span class="p">,</span> <span class="nx">th'</span> <span class="nx">contents</span> <span class="nx">be</span> <span class="nx">hidden</span> <span class="nx">when</span> <span class="nx">th'</span> <span class="nx">callout</span> <span class="nx">be</span> <span class="nx">collapsed</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="p">[!</span><span class="nx">note</span><span class="p">]</span><span class="o">+</span> <span class="nx">Be</span> <span class="nx">callouts</span> <span class="nx">fold'ble</span><span class="err">?</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">Yes</span><span class="p">!</span> <span class="nx">In</span> <span class="nx">a</span> <span class="nx">fold'ble</span> <span class="nx">callout</span><span class="p">,</span> <span class="nx">th'</span> <span class="nx">contents</span> <span class="nx">be</span> <span class="nx">hidden</span> <span class="nx">when</span> <span class="nx">th'</span> <span class="nx">callout</span> <span class="nx">be</span> <span class="nx">collapsed</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="p">[!</span><span class="nx">info</span><span class="p">]</span> <span class="nx">Can</span> <span class="nx">callouts</span> <span class="nx">be</span> <span class="nx">nested</span><span class="err">?</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="p">></span> <span class="p">[!</span><span class="nx">important</span><span class="p">]</span> <span class="nx">Yes</span><span class="p">!,</span> <span class="nx">they</span> <span class="nx">can</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="p">></span> <span class="p">></span> <span class="p">[!</span><span class="nx">tip</span><span class="p">]</span> <span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">even</span> <span class="nx">use</span> <span class="nx">multiple</span> <span class="nx">layers</span> <span class="nx">o'</span> <span class="nx">nest'n</span><span class="p">.</span></span></span></code></pre></div>
|
||
<div class="box notices cstyle caution">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-hand"></i> Callouts can have custom titles
|
||
</div>
|
||
<div class="box-content">
|
||
<p>Like this one.</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle caution">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-hand"></i> Title-only callout
|
||
</div>
|
||
</div>
|
||
<div class="expand box notices cstyle note">
|
||
<input type="checkbox" id="R-expand-cb1274fe123825794754cee07f2a28ff" aria-controls="R-expandcontent-cb1274fe123825794754cee07f2a28ff">
|
||
<label class="expand-label box-label" for="R-expand-cb1274fe123825794754cee07f2a28ff">
|
||
<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-cb1274fe123825794754cee07f2a28ff" class="box-content expand-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-86c75554c7a9711b867d6054d4971f93" aria-controls="R-expandcontent-86c75554c7a9711b867d6054d4971f93" checked>
|
||
<label class="expand-label box-label" for="R-expand-86c75554c7a9711b867d6054d4971f93">
|
||
<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-86c75554c7a9711b867d6054d4971f93" class="box-content expand-content">
|
||
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle info">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-info-circle"></i> Can callouts be nested?
|
||
</div>
|
||
<div class="box-content">
|
||
<p><div class="box notices cstyle important">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-bolt"></i> Yes!, they can.
|
||
</div>
|
||
<div class="box-content">
|
||
<p><div class="box notices cstyle tip">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-lightbulb"></i> Ye can even use multiple layers o' nest'n.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h4 id="code-with-collapsed-colored-borders">Code wit' Collapsed Colored Borders</h4>
|
||
<div class="highlight wrap-code"><pre tabindex="0"><code>> [!secondary]
|
||
> ```c
|
||
> // Wit' colored border 'n Marrrkdown rules
|
||
> printf("Hello World!");
|
||
> ```
|
||
|
||
{{% notice style="red" %}}
|
||
```c
|
||
// Wit' colored border 'n Shortcode rules
|
||
printf("Hello World!");
|
||
```
|
||
{{% /notice %}}</code></pre></div>
|
||
<div class="box notices cstyle secondary">
|
||
<div class="box-content">
|
||
<p><div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// Wit' colored border 'n Marrrkdown rules
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nf">printf</span><span class="p">(</span><span class="s">"Hello World!"</span><span class="p">);</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div class="box notices cstyle red">
|
||
<div class="box-content">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// Wit' colored border 'n Shortcode rules
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nf">printf</span><span class="p">(</span><span class="s">"Hello World!"</span><span class="p">);</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h4 id="user-defined-style">User-defined Style</h4>
|
||
<p>Self-defined styles can be <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">configured</a> 'n yer <code>hugo.toml</code> an' used fer every shortcode, that accepts a <code>style</code> parameter.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0"><code>> [!magic]
|
||
> Maaagic!</code></pre></div>
|
||
<div class="box notices cstyle magic">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-rainbow"></i> Magic
|
||
</div>
|
||
<div class="box-content">
|
||
<p>Maaagic!</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="openapi">OpenAPI</h1>
|
||
|
||
<p>Th' <code>openapi</code> shortcode displays yer OpenAPI / Swagger specificat'ns us'n th' <a href="https://github.com/swagger-api/swagger-ui" rel="external" target="_self">Swagger UI</a> library.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">openapi</span> <span class="nx">src</span><span class="p">=</span><span class="s">"https://petstore3.openapi.io/api/v3/openapi.json"</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/openapi.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"src"</span> <span class="s">"https://petstore3.openapi.io/api/v3/openapi.json"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>If ye want t' print out (or generate a PDF) from yer OpenAPI documentat'n, don’t initiate print'n directly from th' plank because th' elements be optimized fer interactive usage 'n a browser.</p>
|
||
<p>Instead, open th' <a href="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html">print preview</a> 'n yer browser an' initiate print'n from that plank. This plank be optimized fer read'n an' expands most o' th' avail'ble sections.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>src</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>Th' path t' th' t' th' OpenAPI specificat'n resource or URL t' be used. Resource paths adhere t' <a href="https://gohugo.io/methods/page/path/" rel="external" target="_self">Hugo’s logical path</a>.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="settings">Sett'ns</h2>
|
||
<h3 id="enabling-link-warnings">Enabl'n Link Warn'ns</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Ye can use <code>openapi.errorlevel</code> t' control what should happen if a local OpenAPI specificat'n link can not be resolved t' a resource.</p>
|
||
<p>If not set or empty, any unresolved link be written as given into th' result'n output. If set t' <code>warning</code> th' same happens an' an additional warning be printed 'n th' built console. If set t' <code>error</code> an error message be printed an' th' build be aborted.</p>
|
||
<p>Please note that this can not resolve files inside o' yer <code>static</code> directory. Th' file must be a resource o' th' plank or th' ship.</p>
|
||
<p>Link warnings be also avail'ble fer <a href="/hugo-theme-relearn/pir/authoring/frontmatter/linking/index.html#enabling-link-and-image-link-warnings">images & links</a> an' th' <a href="/hugo-theme-relearn/pir/shortcodes/include/index.html#enabling-link-warnings">include</a> shortcode.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">openapi</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">'warning'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">openapi</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">errorlevel</span><span class="p">:</span><span class="w"> </span><span class="l">warning</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"openapi"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"errorlevel"</span><span class="p">:</span> <span class="s2">"warning"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="loading-an-external-version-of-the-swagger-ui-library">Load'n an External Version o' th' Swagger UI Library</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Th' theme uses th' shipped Swagger UI library by default.</p>
|
||
<p>In case ye want do use a different version o' th' Swagger UI library but don’t want t' override th' shipped version, ye can set <code>customOpenapiURL</code> t' th' URL o' th' external Swagger UI library.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">customOpenapiURL</span> <span class="p">=</span> <span class="s1">'https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">customOpenapiURL</span><span class="p">:</span><span class="w"> </span><span class="l">https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"customOpenapiURL"</span><span class="p">:</span> <span class="s2">"https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="force-loading-of-the-swagger-ui-library">Force Load'n o' th' Swagger UI Library</h3>
|
||
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Th' Swagger UI library will be boarded if th' plank contains an <code>openapi</code> shortcode or codefence.</p>
|
||
<p>Ye can force load'n th' Swagger UI library if no shortcode or codefence was used by sett'n <code>openapi.force=true</code>. If a shortcode or codefence was found, th' opt'n has no effect. This comes handy 'n case ye be us'n script'n t' render a spec.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">openapi</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">force</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">openapi</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">force</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"openapi"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"force"</span><span class="p">:</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="setting-a-specific-swagger-ui-theme">Sett'n a Specific Swagger UI Theme</h3>
|
||
<p>Th' recommended way t' configure yer Swagger UI theme be t' set th' default value us'n th' <code>--OPENAPI-theme</code> vari'ble 'n yer <a href="/hugo-theme-relearn/pir/configuration/branding/generator/index.html">color variant stylesheet</a>. This allows yer specs t' look pretty when th' user switches th' color variant.</p>
|
||
<h2 id="example">Example</h2>
|
||
<h3 id="using-local-file">Us'n Local File</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">openapi</span> <span class="nx">src</span><span class="p">=</span><span class="s">"petstore.json"</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
<div class="sc-openapi-wrapper is-load'n helper-loading-container">
|
||
<div
|
||
class="sc-openapi-container"
|
||
id="R-openapi-85ed2c205540752eeffbe3555d724ce5"
|
||
data-openapi-url=""
|
||
data-openapi-spec="{
|
||
"openapi": "3.0.2",
|
||
"info": {
|
||
"title": "Swagger Petstore - OpenAPI 3.0",
|
||
"description": "This be a sample Pet Store Server based on th' OpenAPI 3.0 specificat'n. Ye can find out more about\nSwagger at [http://swagger.io](http://swagger.io). In th' third iterat'n o' th' pet store, we've switched t' th' design first approach!\nYou can now help us improve th' API whether it's by mak'n changes t' th' definit'n itself or t' th' code.\nThat way, wit' time, we can improve th' API 'n general, an' expose some o' th' new features 'n OAS3.\n\nSome useful links:\n- [The Pet Store repository](https://github.com/swagger-api/swagger-petstore)\n- [The source API definit'n fer th' Pet Store](https://github.com/swagger-api/swagger-petstore/blob/master/src/main/resources/openapi.yaml)",
|
||
"termsOfService": "http://swagger.io/terms/",
|
||
"contact": {
|
||
"email": "apiteam@swagger.io"
|
||
},
|
||
"license": {
|
||
"name": "Apache 2.0",
|
||
"url": "http://www.apache.org/licenses/LICENSE-2.0.html"
|
||
},
|
||
"version": "1.0.18"
|
||
},
|
||
"externalDocs": {
|
||
"description": "Find out more about Swagger",
|
||
"url": "http://swagger.io"
|
||
},
|
||
"servers": [
|
||
{
|
||
"url": "/api/v3"
|
||
}
|
||
],
|
||
"tags": [
|
||
{
|
||
"name": "pet",
|
||
"description": "Everyth'n about yer Pets",
|
||
"externalDocs": {
|
||
"description": "Find out more",
|
||
"url": "http://swagger.io"
|
||
}
|
||
},
|
||
{
|
||
"name": "store",
|
||
"description": "Access t' Petstore orders",
|
||
"externalDocs": {
|
||
"description": "Find out more about our store",
|
||
"url": "http://swagger.io"
|
||
}
|
||
},
|
||
{
|
||
"name": "user",
|
||
"description": "Operat'ns about user"
|
||
}
|
||
],
|
||
"paths": {
|
||
"/pet": {
|
||
"put": {
|
||
"tags": [
|
||
"pet"
|
||
],
|
||
"summary": "Update an exist'n pet",
|
||
"description": "Update an exist'n pet by Id",
|
||
"operationId": "updatePet",
|
||
"requestBody": {
|
||
"description": "Update an existent pet 'n th' store",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
},
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
},
|
||
"application/x-www-form-urlencoded": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
},
|
||
"required": true
|
||
},
|
||
"responses": {
|
||
"200": {
|
||
"description": "Successful operation",
|
||
"content": {
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
},
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"400": {
|
||
"description": "Invalid ID supplied"
|
||
},
|
||
"404": {
|
||
"description": "Pet not found"
|
||
},
|
||
"405": {
|
||
"description": "Validat'n exception"
|
||
}
|
||
},
|
||
"security": [
|
||
{
|
||
"petstore_auth": [
|
||
"write:pets",
|
||
"read:pets"
|
||
]
|
||
}
|
||
]
|
||
},
|
||
"post": {
|
||
"tags": [
|
||
"pet"
|
||
],
|
||
"summary": "Add a new pet t' th' store",
|
||
"description": "Add a new pet t' th' store",
|
||
"operationId": "addPet",
|
||
"requestBody": {
|
||
"description": "Create a new pet 'n th' store",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
},
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
},
|
||
"application/x-www-form-urlencoded": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
},
|
||
"required": true
|
||
},
|
||
"responses": {
|
||
"200": {
|
||
"description": "Successful operation",
|
||
"content": {
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
},
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"405": {
|
||
"description": "Invalid input"
|
||
}
|
||
},
|
||
"security": [
|
||
{
|
||
"petstore_auth": [
|
||
"write:pets",
|
||
"read:pets"
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
"/pet/findByStatus": {
|
||
"get": {
|
||
"tags": [
|
||
"pet"
|
||
],
|
||
"summary": "Finds Pets by status",
|
||
"description": "Multiple status values can be provided wit' comma separated strings",
|
||
"operationId": "findPetsByStatus",
|
||
"parameters": [
|
||
{
|
||
"name": "status",
|
||
"in": "query",
|
||
"description": "Status values that need t' be considered fer filter",
|
||
"required": false,
|
||
"explode": true,
|
||
"schema": {
|
||
"type": "string",
|
||
"default": "available",
|
||
"enum": [
|
||
"available",
|
||
"pending",
|
||
"sold"
|
||
]
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"200": {
|
||
"description": "successful operation",
|
||
"content": {
|
||
"application/xml": {
|
||
"schema": {
|
||
"type": "array",
|
||
"items": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
},
|
||
"application/json": {
|
||
"schema": {
|
||
"type": "array",
|
||
"items": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"400": {
|
||
"description": "Invalid status value"
|
||
}
|
||
},
|
||
"security": [
|
||
{
|
||
"petstore_auth": [
|
||
"write:pets",
|
||
"read:pets"
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
"/pet/findByTags": {
|
||
"get": {
|
||
"tags": [
|
||
"pet"
|
||
],
|
||
"summary": "Finds Pets by tags",
|
||
"description": "Multiple tags can be provided wit' comma separated str'ns. Use tag1, tag2, tag3 fer test'n.",
|
||
"operationId": "findPetsByTags",
|
||
"parameters": [
|
||
{
|
||
"name": "tags",
|
||
"in": "query",
|
||
"description": "Tags t' filter by",
|
||
"required": false,
|
||
"explode": true,
|
||
"schema": {
|
||
"type": "array",
|
||
"items": {
|
||
"type": "string"
|
||
}
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"200": {
|
||
"description": "successful operation",
|
||
"content": {
|
||
"application/xml": {
|
||
"schema": {
|
||
"type": "array",
|
||
"items": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
},
|
||
"application/json": {
|
||
"schema": {
|
||
"type": "array",
|
||
"items": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"400": {
|
||
"description": "Invalid tag value"
|
||
}
|
||
},
|
||
"security": [
|
||
{
|
||
"petstore_auth": [
|
||
"write:pets",
|
||
"read:pets"
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
"/pet/{petId}": {
|
||
"get": {
|
||
"tags": [
|
||
"pet"
|
||
],
|
||
"summary": "Find pet by ID",
|
||
"description": "Returns a single pet",
|
||
"operationId": "getPetById",
|
||
"parameters": [
|
||
{
|
||
"name": "petId",
|
||
"in": "path",
|
||
"description": "ID o' pet t' return",
|
||
"required": true,
|
||
"schema": {
|
||
"type": "integer",
|
||
"format": "int64"
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"200": {
|
||
"description": "successful operation",
|
||
"content": {
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
},
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"400": {
|
||
"description": "Invalid ID supplied"
|
||
},
|
||
"404": {
|
||
"description": "Pet not found"
|
||
}
|
||
},
|
||
"security": [
|
||
{
|
||
"api_key": []
|
||
},
|
||
{
|
||
"petstore_auth": [
|
||
"write:pets",
|
||
"read:pets"
|
||
]
|
||
}
|
||
]
|
||
},
|
||
"post": {
|
||
"tags": [
|
||
"pet"
|
||
],
|
||
"summary": "Updates a pet 'n th' store wit' form data",
|
||
"description": "",
|
||
"operationId": "updatePetWithForm",
|
||
"parameters": [
|
||
{
|
||
"name": "petId",
|
||
"in": "path",
|
||
"description": "ID o' pet that needs t' be updated",
|
||
"required": true,
|
||
"schema": {
|
||
"type": "integer",
|
||
"format": "int64"
|
||
}
|
||
},
|
||
{
|
||
"name": "name",
|
||
"in": "query",
|
||
"description": "Name o' pet that needs t' be updated",
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
},
|
||
{
|
||
"name": "status",
|
||
"in": "query",
|
||
"description": "Status o' pet that needs t' be updated",
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"405": {
|
||
"description": "Invalid input"
|
||
}
|
||
},
|
||
"security": [
|
||
{
|
||
"petstore_auth": [
|
||
"write:pets",
|
||
"read:pets"
|
||
]
|
||
}
|
||
]
|
||
},
|
||
"delete": {
|
||
"tags": [
|
||
"pet"
|
||
],
|
||
"summary": "Deletes a pet",
|
||
"description": "",
|
||
"operationId": "deletePet",
|
||
"parameters": [
|
||
{
|
||
"name": "api_key",
|
||
"in": "header",
|
||
"description": "",
|
||
"required": false,
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
},
|
||
{
|
||
"name": "petId",
|
||
"in": "path",
|
||
"description": "Pet id t' delete",
|
||
"required": true,
|
||
"schema": {
|
||
"type": "integer",
|
||
"format": "int64"
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"400": {
|
||
"description": "Invalid pet value"
|
||
}
|
||
},
|
||
"security": [
|
||
{
|
||
"petstore_auth": [
|
||
"write:pets",
|
||
"read:pets"
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
"/pet/{petId}/uploadImage": {
|
||
"post": {
|
||
"tags": [
|
||
"pet"
|
||
],
|
||
"summary": "uploads an image",
|
||
"description": "",
|
||
"operationId": "uploadFile",
|
||
"parameters": [
|
||
{
|
||
"name": "petId",
|
||
"in": "path",
|
||
"description": "ID o' pet t' update",
|
||
"required": true,
|
||
"schema": {
|
||
"type": "integer",
|
||
"format": "int64"
|
||
}
|
||
},
|
||
{
|
||
"name": "additionalMetadata",
|
||
"in": "query",
|
||
"description": "Additional Metadata",
|
||
"required": false,
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
}
|
||
],
|
||
"requestBody": {
|
||
"content": {
|
||
"application/octet-stream": {
|
||
"schema": {
|
||
"type": "string",
|
||
"format": "binary"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"responses": {
|
||
"200": {
|
||
"description": "successful operation",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/ApiResponse"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"security": [
|
||
{
|
||
"petstore_auth": [
|
||
"write:pets",
|
||
"read:pets"
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
"/store/inventory": {
|
||
"get": {
|
||
"tags": [
|
||
"store"
|
||
],
|
||
"summary": "Returns pet inventories by status",
|
||
"description": "Returns a map o' status codes t' quantities",
|
||
"operationId": "getInventory",
|
||
"responses": {
|
||
"200": {
|
||
"description": "successful operation",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"type": "object",
|
||
"additionalProperties": {
|
||
"type": "integer",
|
||
"format": "int32"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"security": [
|
||
{
|
||
"api_key": []
|
||
}
|
||
]
|
||
}
|
||
},
|
||
"/store/order": {
|
||
"post": {
|
||
"tags": [
|
||
"store"
|
||
],
|
||
"summary": "Place an order fer a pet",
|
||
"description": "Place a new order 'n th' store",
|
||
"operationId": "placeOrder",
|
||
"requestBody": {
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Order"
|
||
}
|
||
},
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Order"
|
||
}
|
||
},
|
||
"application/x-www-form-urlencoded": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Order"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"responses": {
|
||
"200": {
|
||
"description": "successful operation",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Order"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"405": {
|
||
"description": "Invalid input"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"/store/order/{orderId}": {
|
||
"get": {
|
||
"tags": [
|
||
"store"
|
||
],
|
||
"summary": "Find purchase order by ID",
|
||
"description": "For valid response try integer IDs wit' value <= 5 or > 10. Other values will generate except'ns.",
|
||
"operationId": "getOrderById",
|
||
"parameters": [
|
||
{
|
||
"name": "orderId",
|
||
"in": "path",
|
||
"description": "ID o' order that needs t' be fetched",
|
||
"required": true,
|
||
"schema": {
|
||
"type": "integer",
|
||
"format": "int64"
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"200": {
|
||
"description": "successful operation",
|
||
"content": {
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Order"
|
||
}
|
||
},
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Order"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"400": {
|
||
"description": "Invalid ID supplied"
|
||
},
|
||
"404": {
|
||
"description": "Order not found"
|
||
}
|
||
}
|
||
},
|
||
"delete": {
|
||
"tags": [
|
||
"store"
|
||
],
|
||
"summary": "Delete purchase order by ID",
|
||
"description": "For valid response try integer IDs wit' value < 1000. Anyth'n above 1000 or nonintegers will generate API errors",
|
||
"operationId": "deleteOrder",
|
||
"parameters": [
|
||
{
|
||
"name": "orderId",
|
||
"in": "path",
|
||
"description": "ID o' th' order that needs t' be deleted",
|
||
"required": true,
|
||
"schema": {
|
||
"type": "integer",
|
||
"format": "int64"
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"400": {
|
||
"description": "Invalid ID supplied"
|
||
},
|
||
"404": {
|
||
"description": "Order not found"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"/user": {
|
||
"post": {
|
||
"tags": [
|
||
"user"
|
||
],
|
||
"summary": "Create user",
|
||
"description": "This can only be done by th' logged 'n user.",
|
||
"operationId": "createUser",
|
||
"requestBody": {
|
||
"description": "Created user object",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
},
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
},
|
||
"application/x-www-form-urlencoded": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"responses": {
|
||
"default": {
|
||
"description": "successful operation",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
},
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"/user/createWithList": {
|
||
"post": {
|
||
"tags": [
|
||
"user"
|
||
],
|
||
"summary": "Creates list o' users wit' given input array",
|
||
"description": "Creates list o' users wit' given input array",
|
||
"operationId": "createUsersWithListInput",
|
||
"requestBody": {
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"type": "array",
|
||
"items": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"responses": {
|
||
"200": {
|
||
"description": "Successful operation",
|
||
"content": {
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
},
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"default": {
|
||
"description": "successful operation"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"/user/login": {
|
||
"get": {
|
||
"tags": [
|
||
"user"
|
||
],
|
||
"summary": "Logs user into th' system",
|
||
"description": "",
|
||
"operationId": "loginUser",
|
||
"parameters": [
|
||
{
|
||
"name": "username",
|
||
"in": "query",
|
||
"description": "The user name fer login",
|
||
"required": false,
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
},
|
||
{
|
||
"name": "password",
|
||
"in": "query",
|
||
"description": "The password fer login 'n clear text",
|
||
"required": false,
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"200": {
|
||
"description": "successful operation",
|
||
"headers": {
|
||
"X-Rate-Limit": {
|
||
"description": "calls per hour allowed by th' user",
|
||
"schema": {
|
||
"type": "integer",
|
||
"format": "int32"
|
||
}
|
||
},
|
||
"X-Expires-After": {
|
||
"description": "date 'n UTC when token expires",
|
||
"schema": {
|
||
"type": "string",
|
||
"format": "date-time"
|
||
}
|
||
}
|
||
},
|
||
"content": {
|
||
"application/xml": {
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
},
|
||
"application/json": {
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"400": {
|
||
"description": "Invalid username/password supplied"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"/user/logout": {
|
||
"get": {
|
||
"tags": [
|
||
"user"
|
||
],
|
||
"summary": "Logs out current logged 'n user session",
|
||
"description": "",
|
||
"operationId": "logoutUser",
|
||
"parameters": [],
|
||
"responses": {
|
||
"default": {
|
||
"description": "successful operation"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"/user/{username}": {
|
||
"get": {
|
||
"tags": [
|
||
"user"
|
||
],
|
||
"summary": "Get user by user name",
|
||
"description": "",
|
||
"operationId": "getUserByName",
|
||
"parameters": [
|
||
{
|
||
"name": "username",
|
||
"in": "path",
|
||
"description": "The name that needs t' be fetched. Use user1 fer test'n. ",
|
||
"required": true,
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"200": {
|
||
"description": "successful operation",
|
||
"content": {
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
},
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"400": {
|
||
"description": "Invalid username supplied"
|
||
},
|
||
"404": {
|
||
"description": "User not found"
|
||
}
|
||
}
|
||
},
|
||
"put": {
|
||
"tags": [
|
||
"user"
|
||
],
|
||
"summary": "Update user",
|
||
"description": "This can only be done by th' logged 'n user.",
|
||
"operationId": "updateUser",
|
||
"parameters": [
|
||
{
|
||
"name": "username",
|
||
"in": "path",
|
||
"description": "name that needs t' be updated",
|
||
"required": true,
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
}
|
||
],
|
||
"requestBody": {
|
||
"description": "Update an existent user 'n th' store",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
},
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
},
|
||
"application/x-www-form-urlencoded": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"responses": {
|
||
"default": {
|
||
"description": "successful operation"
|
||
}
|
||
}
|
||
},
|
||
"delete": {
|
||
"tags": [
|
||
"user"
|
||
],
|
||
"summary": "Delete user",
|
||
"description": "This can only be done by th' logged 'n user.",
|
||
"operationId": "deleteUser",
|
||
"parameters": [
|
||
{
|
||
"name": "username",
|
||
"in": "path",
|
||
"description": "The name that needs t' be deleted",
|
||
"required": true,
|
||
"schema": {
|
||
"type": "string"
|
||
}
|
||
}
|
||
],
|
||
"responses": {
|
||
"400": {
|
||
"description": "Invalid username supplied"
|
||
},
|
||
"404": {
|
||
"description": "User not found"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"components": {
|
||
"schemas": {
|
||
"Order": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"petId": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 198772
|
||
},
|
||
"quantity": {
|
||
"type": "integer",
|
||
"format": "int32",
|
||
"example": 7
|
||
},
|
||
"shipDate": {
|
||
"type": "string",
|
||
"format": "date-time"
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "Order Status",
|
||
"example": "approved",
|
||
"enum": [
|
||
"placed",
|
||
"approved",
|
||
"delivered"
|
||
]
|
||
},
|
||
"complete": {
|
||
"type": "boolean"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "order"
|
||
}
|
||
},
|
||
"petId": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"petId": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 198772
|
||
},
|
||
"quantity": {
|
||
"type": "integer",
|
||
"format": "int32",
|
||
"example": 7
|
||
},
|
||
"shipDate": {
|
||
"type": "string",
|
||
"format": "date-time"
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "Order Status",
|
||
"example": "approved",
|
||
"enum": [
|
||
"placed",
|
||
"approved",
|
||
"delivered"
|
||
]
|
||
},
|
||
"complete": {
|
||
"type": "boolean"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "order"
|
||
}
|
||
},
|
||
"quantity": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"petId": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 198772
|
||
},
|
||
"quantity": {
|
||
"type": "integer",
|
||
"format": "int32",
|
||
"example": 7
|
||
},
|
||
"shipDate": {
|
||
"type": "string",
|
||
"format": "date-time"
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "Order Status",
|
||
"example": "approved",
|
||
"enum": [
|
||
"placed",
|
||
"approved",
|
||
"delivered"
|
||
]
|
||
},
|
||
"complete": {
|
||
"type": "boolean"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "order"
|
||
}
|
||
},
|
||
"shipDate": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"petId": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 198772
|
||
},
|
||
"quantity": {
|
||
"type": "integer",
|
||
"format": "int32",
|
||
"example": 7
|
||
},
|
||
"shipDate": {
|
||
"type": "string",
|
||
"format": "date-time"
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "Order Status",
|
||
"example": "approved",
|
||
"enum": [
|
||
"placed",
|
||
"approved",
|
||
"delivered"
|
||
]
|
||
},
|
||
"complete": {
|
||
"type": "boolean"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "order"
|
||
}
|
||
},
|
||
"status": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"petId": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 198772
|
||
},
|
||
"quantity": {
|
||
"type": "integer",
|
||
"format": "int32",
|
||
"example": 7
|
||
},
|
||
"shipDate": {
|
||
"type": "string",
|
||
"format": "date-time"
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "Order Status",
|
||
"example": "approved",
|
||
"enum": [
|
||
"placed",
|
||
"approved",
|
||
"delivered"
|
||
]
|
||
},
|
||
"complete": {
|
||
"type": "boolean"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "order"
|
||
}
|
||
},
|
||
"complete": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"petId": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 198772
|
||
},
|
||
"quantity": {
|
||
"type": "integer",
|
||
"format": "int32",
|
||
"example": 7
|
||
},
|
||
"shipDate": {
|
||
"type": "string",
|
||
"format": "date-time"
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "Order Status",
|
||
"example": "approved",
|
||
"enum": [
|
||
"placed",
|
||
"approved",
|
||
"delivered"
|
||
]
|
||
},
|
||
"complete": {
|
||
"type": "boolean"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "order"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "order"
|
||
}
|
||
},
|
||
"Customer": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 100000
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "fehguy"
|
||
},
|
||
"address": {
|
||
"type": "array",
|
||
"xml": {
|
||
"name": "addresses",
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"$ref": "#/components/schemas/Address"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "customer"
|
||
}
|
||
},
|
||
"username": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 100000
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "fehguy"
|
||
},
|
||
"address": {
|
||
"type": "array",
|
||
"xml": {
|
||
"name": "addresses",
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"$ref": "#/components/schemas/Address"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "customer"
|
||
}
|
||
},
|
||
"address": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 100000
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "fehguy"
|
||
},
|
||
"address": {
|
||
"type": "array",
|
||
"xml": {
|
||
"name": "addresses",
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"$ref": "#/components/schemas/Address"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "customer"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "customer"
|
||
}
|
||
},
|
||
"Address": {
|
||
"type": "object",
|
||
"properties": {
|
||
"street": {
|
||
"type": "object",
|
||
"properties": {
|
||
"street": {
|
||
"type": "string",
|
||
"example": "437 Lytton"
|
||
},
|
||
"city": {
|
||
"type": "string",
|
||
"example": "Palo Alto"
|
||
},
|
||
"state": {
|
||
"type": "string",
|
||
"example": "CA"
|
||
},
|
||
"zip": {
|
||
"type": "string",
|
||
"example": "94301"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "address"
|
||
}
|
||
},
|
||
"city": {
|
||
"type": "object",
|
||
"properties": {
|
||
"street": {
|
||
"type": "string",
|
||
"example": "437 Lytton"
|
||
},
|
||
"city": {
|
||
"type": "string",
|
||
"example": "Palo Alto"
|
||
},
|
||
"state": {
|
||
"type": "string",
|
||
"example": "CA"
|
||
},
|
||
"zip": {
|
||
"type": "string",
|
||
"example": "94301"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "address"
|
||
}
|
||
},
|
||
"state": {
|
||
"type": "object",
|
||
"properties": {
|
||
"street": {
|
||
"type": "string",
|
||
"example": "437 Lytton"
|
||
},
|
||
"city": {
|
||
"type": "string",
|
||
"example": "Palo Alto"
|
||
},
|
||
"state": {
|
||
"type": "string",
|
||
"example": "CA"
|
||
},
|
||
"zip": {
|
||
"type": "string",
|
||
"example": "94301"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "address"
|
||
}
|
||
},
|
||
"zip": {
|
||
"type": "object",
|
||
"properties": {
|
||
"street": {
|
||
"type": "string",
|
||
"example": "437 Lytton"
|
||
},
|
||
"city": {
|
||
"type": "string",
|
||
"example": "Palo Alto"
|
||
},
|
||
"state": {
|
||
"type": "string",
|
||
"example": "CA"
|
||
},
|
||
"zip": {
|
||
"type": "string",
|
||
"example": "94301"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "address"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "address"
|
||
}
|
||
},
|
||
"Category": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 1
|
||
},
|
||
"name": {
|
||
"type": "string",
|
||
"example": "Dogs"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "category"
|
||
}
|
||
},
|
||
"name": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 1
|
||
},
|
||
"name": {
|
||
"type": "string",
|
||
"example": "Dogs"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "category"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "category"
|
||
}
|
||
},
|
||
"User": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "theUser"
|
||
},
|
||
"firstName": {
|
||
"type": "string",
|
||
"example": "John"
|
||
},
|
||
"lastName": {
|
||
"type": "string",
|
||
"example": "James"
|
||
},
|
||
"email": {
|
||
"type": "string",
|
||
"example": "john@email.com"
|
||
},
|
||
"password": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"phone": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"userStatus": {
|
||
"type": "integer",
|
||
"description": "User Status",
|
||
"format": "int32",
|
||
"example": 1
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "user"
|
||
}
|
||
},
|
||
"username": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "theUser"
|
||
},
|
||
"firstName": {
|
||
"type": "string",
|
||
"example": "John"
|
||
},
|
||
"lastName": {
|
||
"type": "string",
|
||
"example": "James"
|
||
},
|
||
"email": {
|
||
"type": "string",
|
||
"example": "john@email.com"
|
||
},
|
||
"password": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"phone": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"userStatus": {
|
||
"type": "integer",
|
||
"description": "User Status",
|
||
"format": "int32",
|
||
"example": 1
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "user"
|
||
}
|
||
},
|
||
"firstName": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "theUser"
|
||
},
|
||
"firstName": {
|
||
"type": "string",
|
||
"example": "John"
|
||
},
|
||
"lastName": {
|
||
"type": "string",
|
||
"example": "James"
|
||
},
|
||
"email": {
|
||
"type": "string",
|
||
"example": "john@email.com"
|
||
},
|
||
"password": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"phone": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"userStatus": {
|
||
"type": "integer",
|
||
"description": "User Status",
|
||
"format": "int32",
|
||
"example": 1
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "user"
|
||
}
|
||
},
|
||
"lastName": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "theUser"
|
||
},
|
||
"firstName": {
|
||
"type": "string",
|
||
"example": "John"
|
||
},
|
||
"lastName": {
|
||
"type": "string",
|
||
"example": "James"
|
||
},
|
||
"email": {
|
||
"type": "string",
|
||
"example": "john@email.com"
|
||
},
|
||
"password": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"phone": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"userStatus": {
|
||
"type": "integer",
|
||
"description": "User Status",
|
||
"format": "int32",
|
||
"example": 1
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "user"
|
||
}
|
||
},
|
||
"email": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "theUser"
|
||
},
|
||
"firstName": {
|
||
"type": "string",
|
||
"example": "John"
|
||
},
|
||
"lastName": {
|
||
"type": "string",
|
||
"example": "James"
|
||
},
|
||
"email": {
|
||
"type": "string",
|
||
"example": "john@email.com"
|
||
},
|
||
"password": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"phone": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"userStatus": {
|
||
"type": "integer",
|
||
"description": "User Status",
|
||
"format": "int32",
|
||
"example": 1
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "user"
|
||
}
|
||
},
|
||
"password": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "theUser"
|
||
},
|
||
"firstName": {
|
||
"type": "string",
|
||
"example": "John"
|
||
},
|
||
"lastName": {
|
||
"type": "string",
|
||
"example": "James"
|
||
},
|
||
"email": {
|
||
"type": "string",
|
||
"example": "john@email.com"
|
||
},
|
||
"password": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"phone": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"userStatus": {
|
||
"type": "integer",
|
||
"description": "User Status",
|
||
"format": "int32",
|
||
"example": 1
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "user"
|
||
}
|
||
},
|
||
"phone": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "theUser"
|
||
},
|
||
"firstName": {
|
||
"type": "string",
|
||
"example": "John"
|
||
},
|
||
"lastName": {
|
||
"type": "string",
|
||
"example": "James"
|
||
},
|
||
"email": {
|
||
"type": "string",
|
||
"example": "john@email.com"
|
||
},
|
||
"password": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"phone": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"userStatus": {
|
||
"type": "integer",
|
||
"description": "User Status",
|
||
"format": "int32",
|
||
"example": 1
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "user"
|
||
}
|
||
},
|
||
"userStatus": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"username": {
|
||
"type": "string",
|
||
"example": "theUser"
|
||
},
|
||
"firstName": {
|
||
"type": "string",
|
||
"example": "John"
|
||
},
|
||
"lastName": {
|
||
"type": "string",
|
||
"example": "James"
|
||
},
|
||
"email": {
|
||
"type": "string",
|
||
"example": "john@email.com"
|
||
},
|
||
"password": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"phone": {
|
||
"type": "string",
|
||
"example": "12345"
|
||
},
|
||
"userStatus": {
|
||
"type": "integer",
|
||
"description": "User Status",
|
||
"format": "int32",
|
||
"example": 1
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "user"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "user"
|
||
}
|
||
},
|
||
"Tag": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64"
|
||
},
|
||
"name": {
|
||
"type": "string"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "tag"
|
||
}
|
||
},
|
||
"name": {
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64"
|
||
},
|
||
"name": {
|
||
"type": "string"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "tag"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "tag"
|
||
}
|
||
},
|
||
"Pet": {
|
||
"required": [
|
||
"name",
|
||
"photoUrls"
|
||
],
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"required": [
|
||
"name",
|
||
"photoUrls"
|
||
],
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"name": {
|
||
"type": "string",
|
||
"example": "doggie"
|
||
},
|
||
"category": {
|
||
"$ref": "#/components/schemas/Category"
|
||
},
|
||
"photoUrls": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"type": "string",
|
||
"xml": {
|
||
"name": "photoUrl"
|
||
}
|
||
}
|
||
},
|
||
"tags": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"$ref": "#/components/schemas/Tag"
|
||
}
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "pet status 'n th' store",
|
||
"enum": [
|
||
"available",
|
||
"pending",
|
||
"sold"
|
||
]
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "pet"
|
||
}
|
||
},
|
||
"name": {
|
||
"required": [
|
||
"name",
|
||
"photoUrls"
|
||
],
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"name": {
|
||
"type": "string",
|
||
"example": "doggie"
|
||
},
|
||
"category": {
|
||
"$ref": "#/components/schemas/Category"
|
||
},
|
||
"photoUrls": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"type": "string",
|
||
"xml": {
|
||
"name": "photoUrl"
|
||
}
|
||
}
|
||
},
|
||
"tags": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"$ref": "#/components/schemas/Tag"
|
||
}
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "pet status 'n th' store",
|
||
"enum": [
|
||
"available",
|
||
"pending",
|
||
"sold"
|
||
]
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "pet"
|
||
}
|
||
},
|
||
"category": {
|
||
"required": [
|
||
"name",
|
||
"photoUrls"
|
||
],
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"name": {
|
||
"type": "string",
|
||
"example": "doggie"
|
||
},
|
||
"category": {
|
||
"$ref": "#/components/schemas/Category"
|
||
},
|
||
"photoUrls": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"type": "string",
|
||
"xml": {
|
||
"name": "photoUrl"
|
||
}
|
||
}
|
||
},
|
||
"tags": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"$ref": "#/components/schemas/Tag"
|
||
}
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "pet status 'n th' store",
|
||
"enum": [
|
||
"available",
|
||
"pending",
|
||
"sold"
|
||
]
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "pet"
|
||
}
|
||
},
|
||
"photoUrls": {
|
||
"required": [
|
||
"name",
|
||
"photoUrls"
|
||
],
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"name": {
|
||
"type": "string",
|
||
"example": "doggie"
|
||
},
|
||
"category": {
|
||
"$ref": "#/components/schemas/Category"
|
||
},
|
||
"photoUrls": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"type": "string",
|
||
"xml": {
|
||
"name": "photoUrl"
|
||
}
|
||
}
|
||
},
|
||
"tags": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"$ref": "#/components/schemas/Tag"
|
||
}
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "pet status 'n th' store",
|
||
"enum": [
|
||
"available",
|
||
"pending",
|
||
"sold"
|
||
]
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "pet"
|
||
}
|
||
},
|
||
"tags": {
|
||
"required": [
|
||
"name",
|
||
"photoUrls"
|
||
],
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"name": {
|
||
"type": "string",
|
||
"example": "doggie"
|
||
},
|
||
"category": {
|
||
"$ref": "#/components/schemas/Category"
|
||
},
|
||
"photoUrls": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"type": "string",
|
||
"xml": {
|
||
"name": "photoUrl"
|
||
}
|
||
}
|
||
},
|
||
"tags": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"$ref": "#/components/schemas/Tag"
|
||
}
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "pet status 'n th' store",
|
||
"enum": [
|
||
"available",
|
||
"pending",
|
||
"sold"
|
||
]
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "pet"
|
||
}
|
||
},
|
||
"status": {
|
||
"required": [
|
||
"name",
|
||
"photoUrls"
|
||
],
|
||
"type": "object",
|
||
"properties": {
|
||
"id": {
|
||
"type": "integer",
|
||
"format": "int64",
|
||
"example": 10
|
||
},
|
||
"name": {
|
||
"type": "string",
|
||
"example": "doggie"
|
||
},
|
||
"category": {
|
||
"$ref": "#/components/schemas/Category"
|
||
},
|
||
"photoUrls": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"type": "string",
|
||
"xml": {
|
||
"name": "photoUrl"
|
||
}
|
||
}
|
||
},
|
||
"tags": {
|
||
"type": "array",
|
||
"xml": {
|
||
"wrapped": true
|
||
},
|
||
"items": {
|
||
"$ref": "#/components/schemas/Tag"
|
||
}
|
||
},
|
||
"status": {
|
||
"type": "string",
|
||
"description": "pet status 'n th' store",
|
||
"enum": [
|
||
"available",
|
||
"pending",
|
||
"sold"
|
||
]
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "pet"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "pet"
|
||
}
|
||
},
|
||
"ApiResponse": {
|
||
"type": "object",
|
||
"properties": {
|
||
"code": {
|
||
"type": "object",
|
||
"properties": {
|
||
"code": {
|
||
"type": "integer",
|
||
"format": "int32"
|
||
},
|
||
"type": {
|
||
"type": "string"
|
||
},
|
||
"message": {
|
||
"type": "string"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "##default"
|
||
}
|
||
},
|
||
"type": {
|
||
"type": "object",
|
||
"properties": {
|
||
"code": {
|
||
"type": "integer",
|
||
"format": "int32"
|
||
},
|
||
"type": {
|
||
"type": "string"
|
||
},
|
||
"message": {
|
||
"type": "string"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "##default"
|
||
}
|
||
},
|
||
"message": {
|
||
"type": "object",
|
||
"properties": {
|
||
"code": {
|
||
"type": "integer",
|
||
"format": "int32"
|
||
},
|
||
"type": {
|
||
"type": "string"
|
||
},
|
||
"message": {
|
||
"type": "string"
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "##default"
|
||
}
|
||
}
|
||
},
|
||
"xml": {
|
||
"name": "##default"
|
||
}
|
||
}
|
||
},
|
||
"requestBodies": {
|
||
"Pet": {
|
||
"description": "Pet object that needs t' be added t' th' store",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
},
|
||
"application/xml": {
|
||
"schema": {
|
||
"$ref": "#/components/schemas/Pet"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"UserArray": {
|
||
"description": "List o' user object",
|
||
"content": {
|
||
"application/json": {
|
||
"schema": {
|
||
"type": "array",
|
||
"items": {
|
||
"$ref": "#/components/schemas/User"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"securitySchemes": {
|
||
"petstore_auth": {
|
||
"type": "oauth2",
|
||
"flows": {
|
||
"implicit": {
|
||
"authorizationUrl": "https://petstore3.swagger.io/oauth/authorize",
|
||
"scopes": {
|
||
"write:pets": "modify pets 'n yer account",
|
||
"read:pets": "read yer pets"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"api_key": {
|
||
"type": "apiKey",
|
||
"name": "api_key",
|
||
"in": "header"
|
||
}
|
||
}
|
||
}
|
||
}"
|
||
></div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="resources">Resources</h1>
|
||
|
||
<div class="box attachments cstyle transparent">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-paperclip"></i> Attachments
|
||
</div>
|
||
<ul class="attachments-files box-content">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/MaybeTreasure.pir.txt">MaybeTreasure.txt</a> (31 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/NoTreasure.en.txt">NoTreasure.en.txt</a> (23 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/Treasure.pir.txt">Treasure.pir.txt</a> (31 B)</li>
|
||
</ul>
|
||
</div>
|
||
<p>Th' <code>resources</code> shortcode displays links t' resources contained 'n a <a href="https://gohugo.io/content-management/page-bundles/" rel="external" target="_self">plank bundle</a>.</p>
|
||
<div class="box attachments cstyle transparent">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-paperclip"></i> Attachments
|
||
</div>
|
||
<ul class="attachments-files box-content">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/MaybeTreasure.en.txt">MaybeTreasure.txt</a> (23 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/NoTreasure.en.txt">NoTreasure.en.txt</a> (23 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/Treasure.pir.txt">Treasure.pir.txt</a> (31 B)</li>
|
||
</ul>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">resources</span> <span class="nx">sort</span><span class="p">=</span><span class="s">"asc"</span> <span class="o">/%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/resources.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"sort"</span> <span class="s">"asc"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Multilanguage features be not supported directly by th' shortcode but rely on Hugo’s handl'n fer resource translat'ns applied when th' theme iterates over all avail'ble resources.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>style</strong></td>
|
||
<td><code>transparent</code></td>
|
||
<td>Th' style scheme used fer th' box.<br><br>- by severity: <code>caut'n</code>, <code>important</code>, <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>cyan</code>, <code>green</code>, <code>grey</code>, <code>magenta</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code><br><br>Ye can also <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">define yer own styles</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>color</strong></td>
|
||
<td>see notes</td>
|
||
<td>Th' <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel="external" target="_self">CSS color value</a> t' be used. If not set, th' chosen color depends on th' <strong>style</strong>. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n color fer th' severity<br>- fer all other styles: th' correspond'n color</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>title</strong></td>
|
||
<td>see notes</td>
|
||
<td>Arbitrary text fer th' box title. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwrite th' default.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other styles: <code>Resources</code><br><br>If ye want no title fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>ay'con</strong></td>
|
||
<td>see notes</td>
|
||
<td><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n on th' <strong>style</strong> there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n ay'con fer th' severity<br>- fer all other styles: <code>paperclip</code><br><br>If ye want no ay'con, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>expanded</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>Whether t' draw an expander an' how th' resource list be displayed.<br><br>- <em><empty></em>: no expander be drawn an' th' resource list be permanently shown<br>- <code>true</code>: th' expander be drawn an' th' resource list be initially shown<br>- <code>false</code>: th' expander be drawn an' th' resource list be initially hidden</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>sort</strong></td>
|
||
<td><code>asc</code></td>
|
||
<td>Sort'n th' output 'n <code>asc</code>end'n or <code>desc</code>end'n order.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>pattern</strong></td>
|
||
<td><code>.*</code></td>
|
||
<td>A <a href="https://en.wikipedia.org/wiki/Regular_expression" rel="external" target="_self">regular expressions</a>, used t' filter th' resources <a href="https://gohugo.io/methods/resource/name/" rel="external" target="_self">by name</a>. For example:<br><br>- t' match a file suffix o' ‘jpg’, use <code>.*\.jpg</code> (not <code>*.\.jpg</code>)<br>- t' match file names end'n 'n <code>jpg</code> or <code>png</code>, use <code>.*\.(jpg|png)</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="custom-title-list-of-resources-ending-in-png-jpg-or-gif">Custom Title, List o' Resources End'n 'n png, jpg or gif</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">resources</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Related **files**"</span> <span class="nx">pattern</span><span class="p">=</span><span class="s">".*\.(png|jpg|gif)"</span> <span class="o">/%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="box attachments cstyle transparent">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-paperclip"></i> Related <strong>files</strong>
|
||
</div>
|
||
<ul class="attachments-files box-content">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/hugo.png">hugo.png</a> (17 KB)</li>
|
||
</ul>
|
||
</div>
|
||
<h3 id="info-styled-box-descending-sort-order">Ahoi Styled Box, Descend'n Sort Order</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">resources</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="nx">sort</span><span class="p">=</span><span class="s">"desc"</span> <span class="o">/%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="box attachments cstyle info">
|
||
<div class="box-label">
|
||
<i class="fa-fw fas fa-info-circle"></i> Ahoi
|
||
</div>
|
||
<ul class="attachments-files box-content">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/Treasure.pir.txt">Treasure.pir.txt</a> (31 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/NoTreasure.en.txt">NoTreasure.en.txt</a> (23 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/MaybeTreasure.en.txt">MaybeTreasure.txt</a> (23 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/hugo.png">hugo.png</a> (17 KB)</li>
|
||
</ul>
|
||
</div>
|
||
<h3 id="with-user-defined-color-and-font-awesome-brand-icon">Wit' User-Defined Color an' Font Awesome Brand Ay'con</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">resources</span> <span class="nx">color</span><span class="p">=</span><span class="s">"fuchsia"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"fa-fw fab fa-hackerrank"</span> <span class="o">/%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="box attachments cstyle default" style="--VARIABLE-BOX-color: fuchsia;">
|
||
<div class="box-label">
|
||
<i class="fa-fw fab fa-hackerrank"></i> Attachments
|
||
</div>
|
||
<ul class="attachments-files box-content">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/MaybeTreasure.en.txt">MaybeTreasure.txt</a> (23 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/NoTreasure.en.txt">NoTreasure.en.txt</a> (23 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/Treasure.pir.txt">Treasure.pir.txt</a> (31 B)</li>
|
||
</ul>
|
||
</div>
|
||
<h3 id="expander-with-initially-hidden-resource-list">Expander wit' Initially Hidden Resource List</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">resources</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">"false"</span> <span class="o">/%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="expand box attachments cstyle primary">
|
||
<input type="checkbox" id="R-expand-66607e0a308b7ed763b074f953926b66" aria-controls="R-expandcontent-66607e0a308b7ed763b074f953926b66">
|
||
<label class="expand-label box-label" for="R-expand-66607e0a308b7ed763b074f953926b66">
|
||
<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-paperclip"></i> Attachments
|
||
</label>
|
||
<div class="box-spacer"></div>
|
||
<ul id="R-expandcontent-66607e0a308b7ed763b074f953926b66" class="attachments-files box-content expand-content">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/MaybeTreasure.en.txt">MaybeTreasure.txt</a> (23 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/NoTreasure.en.txt">NoTreasure.en.txt</a> (23 B)</li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/resources/Treasure.pir.txt">Treasure.pir.txt</a> (31 B)</li>
|
||
</ul>
|
||
</div>
|
||
<h3 id="style-color-title-and-icons">Style, Color, Title an' Ay'cons</h3>
|
||
<p>For further examples fer <strong>style</strong>, <strong>color</strong>, <strong>title</strong> an' <strong>ay'con</strong>, see th' <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html"><code>notice</code> shortcode</a> documentat'n. Th' parameter be work'n th' same way fer both shorrrtcodes, besides hav'n different defaults.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="siteparam">SiteParam</h1>
|
||
|
||
<p>Th' <code>siteparam</code> shortcode prints values o' params contained 'n yer <code>hugo.toml</code>.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span class="tab-nav-text">shortcode (positional)</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">siteparam</span> <span class="nx">name</span><span class="p">=</span><span class="s">"editURL"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">siteparam</span> <span class="s">"editURL"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/siteparam.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"name"</span> <span class="s">"editURL"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Posit'n</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>name</strong></td>
|
||
<td>1</td>
|
||
<td><em><empty></em></td>
|
||
<td>Th' name o' th' ship param t' be displayed.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="editurl"><code>editURL</code></h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="s">`editURL`</span> <span class="nx">value</span><span class="p">:</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">siteparam</span> <span class="nx">name</span><span class="p">=</span><span class="s">"editURL"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p><code>editURL</code> value: <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/$%7BFilePath%7D" rel="external" target="_self">https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/${FilePath}</a></p>
|
||
<h3 id="nested-parameter-with-markdown-and-html-formatting">Nested Parameter wit' Marrrkdown an' HTML Formatt'n</h3>
|
||
<p>T' use formatted parameter, add this 'n yer <code>hugo.toml</code>:</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">hugo.</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">marrrkup</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">goldmark</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">renderer</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">unsafe</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"markup"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"goldmark"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"renderer"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"unsafe"</span><span class="p">:</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Now values contain'n Marrrkdown will be formatted correctly.</p>
|
||
<div class="tab-panel" data-tab-group="config-code">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">hugo.</div>
|
||
<button
|
||
data-tab-item="toml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('config-code','toml')"
|
||
>
|
||
<span class="tab-nav-text">toml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="yaml"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','yaml')"
|
||
>
|
||
<span class="tab-nav-text">yaml</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('config-code','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="toml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">siteparam</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">siteparam</span><span class="p">.</span><span class="nx">test</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">text</span> <span class="p">=</span> <span class="s1">'A **nested** parameter <b>with</b> formatting'</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="yaml"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">siteparam</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">test</span><span class="p">:</span><span class="w">
|
||
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">text</span><span class="p">:</span><span class="w"> </span><span class="l">A **nested** parameter <b>with</b> formatt'n</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"siteparam"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"test"</span><span class="p">:</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"text"</span><span class="p">:</span> <span class="s2">"A **nested** parameter \u003cb\u003ewith\u003c/b\u003e formatting"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="nx">Formatted</span> <span class="nx">parameter</span><span class="p">:</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">siteparam</span> <span class="nx">name</span><span class="p">=</span><span class="s">"siteparam.test.text"</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<p>Formatted parameter: A <strong>nested</strong> opt'n <b>with</b> formatt'n</p>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="tab">Tab</h1>
|
||
|
||
<p>Ye can use a <code>tab</code> shortcode t' display a single tab wit' a title.</p>
|
||
<div class="tab-panel" data-tab-group="93db8fb4fde5981ad8d929cba301c60f">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="c"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('93db8fb4fde5981ad8d929cba301c60f','c')"
|
||
>
|
||
<span class="tab-nav-text">c</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="c"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">printf</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">);</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"c"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```c
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">printf("Hello World!");
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/tab.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"c"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="p">(</span><span class="s">"```c\nprintf(\"Hello World!\")\n```"</span> <span class="p">|</span> <span class="p">.</span><span class="nx">RenderStr'n</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="/hugo-theme-relearn/pir/shortcodes/tabs/index.html"><code>tabs</code> shortcode</a>.</p>
|
||
<p>If ye want further opt'ns when us'n a single code tab, ye can also use th' <a href="/hugo-theme-relearn/pir/shortcodes/highlight/index.html"><code>highlight</code> shortcode</a>.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>style</strong></td>
|
||
<td>see notes</td>
|
||
<td>Th' style scheme used fer th' tab. If ye don’t set a style an' ye display a single code block inside o' th' tab, its default styl'n will adapt t' that o' a <code>code</code> block. Otherwise <code>default</code> be used.<br><br>- by severity: <code>caut'n</code>, <code>important</code>, <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>cyan</code>, <code>green</code>, <code>grey</code>, <code>magenta</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code><br><br>Ye can also <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">define yer own styles</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>color</strong></td>
|
||
<td>see notes</td>
|
||
<td>Th' <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel="external" target="_self">CSS color value</a> t' be used. If not set, th' chosen color depends on th' <strong>style</strong>. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n color fer th' severity<br>- fer all other styles: th' correspond'n color</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>title</strong></td>
|
||
<td>see notes</td>
|
||
<td>Arbitrary title fer th' tab. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwrite th' default.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other styles: <em><empty></em><br><br>If ye want no title fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>ay'con</strong></td>
|
||
<td>see notes</td>
|
||
<td><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n on th' <strong>style</strong> there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n ay'con fer th' severity<br>- fer all other styles: <em><empty></em><br><br>If ye want no ay'con fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td><em><empty></em></td>
|
||
<td>Arbitrary text t' be displayed 'n th' tab.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="single-code-block-with-collapsed-margins">Single Code Block wit' Collapsed Margins</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Code"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```python
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">printf("Hello World!");
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="tab-panel" data-tab-group="fd0ac192cd5c06faf4043fb3154b1c98">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="code"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('fd0ac192cd5c06faf4043fb3154b1c98','code')"
|
||
>
|
||
<span class="tab-nav-text">Code</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="code"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">printf</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">);</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="mixed-markdown-content">Mixed Marrrkdown Rrrambl'n</h3>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"_**Mixed**_"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="nx">tab</span> <span class="nx">can</span> <span class="nx">not</span> <span class="nx">only</span> <span class="nx">contain</span> <span class="nx">code</span> <span class="nx">but</span> <span class="nx">arbitrary</span> <span class="nx">text</span><span class="p">.</span> <span class="nx">In</span> <span class="nx">this</span> <span class="k">case</span> <span class="nx">text</span> <span class="o">**</span><span class="nx">an'</span><span class="o">**</span> <span class="nx">code</span> <span class="nx">will</span> <span class="nx">get</span> <span class="nx">a</span> <span class="nx">margin</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```python
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">printf("Hello World!");
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
|
||
<div class="tab-panel" data-tab-group="371db4536494d066b8337aefa2f645e8">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="mixed"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('371db4536494d066b8337aefa2f645e8','mixed')"
|
||
>
|
||
<span class="tab-nav-text"><em><strong>Mixed</strong></em></span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="mixed"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<p>A tab can not only contain code but arbitrary text. In this case text <strong>an'</strong> code will get a margin.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">printf</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">);</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="understanding-style-and-color-behavior">Understand'n <code>style</code> an' <code>color</code> Behavior</h3>
|
||
<p>Th' <code>style</code> parameter affects how th' <code>color</code> parameter be applied.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tabs</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"just colored style"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"blue"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Th'</span> <span class="s">`style`</span> <span class="nx">parameter</span> <span class="nx">be</span> <span class="nx">set</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">color</span> <span class="nx">style</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">style</span> <span class="nx">color</span> <span class="nx">as</span> <span class="nx">configured</span> <span class="nx">'n</span> <span class="nx">yer</span> <span class="nx">theme</span> <span class="nx">variant</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"just color"</span> <span class="nx">color</span><span class="p">=</span><span class="s">"blue"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Only</span> <span class="nx">th'</span> <span class="s">`color`</span> <span class="nx">parameter</span> <span class="nx">be</span> <span class="nx">set</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"default style an' color"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"default"</span> <span class="nx">color</span><span class="p">=</span><span class="s">"blue"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Th'</span> <span class="s">`style`</span> <span class="nx">parameter</span> <span class="nx">affects</span> <span class="nx">how</span> <span class="nx">th'</span> <span class="s">`color`</span> <span class="nx">parameter</span> <span class="nx">be</span> <span class="nx">applied</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Th'</span> <span class="s">`default`</span> <span class="nx">style</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">yer</span> <span class="s">`--MAIN-BG-color`</span> <span class="nx">as</span> <span class="nx">configured</span> <span class="k">fer</span> <span class="nx">yer</span> <span class="nx">theme</span> <span class="nx">variant</span> <span class="nx">resembl'n</span> <span class="nx">th'</span> <span class="k">default</span> <span class="nx">style</span> <span class="nx">but</span> <span class="nx">wit'</span> <span class="nx">different</span> <span class="nx">color</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"just severity style"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Th'</span> <span class="s">`style`</span> <span class="nx">parameter</span> <span class="nx">be</span> <span class="nx">set</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">severity</span> <span class="nx">style</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">style</span> <span class="nx">color</span> <span class="nx">as</span> <span class="nx">configured</span> <span class="nx">'n</span> <span class="nx">yer</span> <span class="nx">theme</span> <span class="nx">variant</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"severity style an' color"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</span> <span class="nx">color</span><span class="p">=</span><span class="s">"blue"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Th'</span> <span class="s">`style`</span> <span class="nx">parameter</span> <span class="nx">affects</span> <span class="nx">how</span> <span class="nx">th'</span> <span class="s">`color`</span> <span class="nx">parameter</span> <span class="nx">be</span> <span class="nx">applied</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
<div class="tab-panel" data-tab-group="4a15406bb79070bd27b2f4365739b69e">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="just-colored-style"
|
||
class="tab-nav-button tab-panel-style cstyle blue active" tabindex="-1"
|
||
onclick="switchTab('4a15406bb79070bd27b2f4365739b69e','just-colored-style')"
|
||
>
|
||
<span class="tab-nav-text">just colored style</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="just-color"
|
||
class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
|
||
onclick="switchTab('4a15406bb79070bd27b2f4365739b69e','just-color')"
|
||
>
|
||
<span class="tab-nav-text">just color</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="default-style-and-color"
|
||
class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
|
||
onclick="switchTab('4a15406bb79070bd27b2f4365739b69e','default-style-and-color')"
|
||
>
|
||
<span class="tab-nav-text">default style an' color</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
|
||
class="tab-nav-button tab-panel-style cstyle info"
|
||
onclick="switchTab('4a15406bb79070bd27b2f4365739b69e','just-severity-stylefa-fw-fas-fa-info-circle')"
|
||
>
|
||
<span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
|
||
class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
|
||
onclick="switchTab('4a15406bb79070bd27b2f4365739b69e','severity-style-and-colorfa-fw-fas-fa-info-circle')"
|
||
>
|
||
<span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="just-colored-style"
|
||
class="tab-content tab-panel-style cstyle blue active">
|
||
<div class="tab-content-text">
|
||
<p>Th' <code>style</code> parameter be set t' a color style.</p>
|
||
<p>This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant.</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="just-color"
|
||
class="tab-content tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;">
|
||
<div class="tab-content-text">
|
||
<p>Only th' <code>color</code> parameter be set.</p>
|
||
<p>This will set th' background t' a lighter version o' th' chosen CSS color value.</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="default-style-and-color"
|
||
class="tab-content tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;">
|
||
<div class="tab-content-text">
|
||
<p>Th' <code>style</code> parameter affects how th' <code>color</code> parameter be applied.</p>
|
||
<p>Th' <code>default</code> style will set th' background t' yer <code>--MAIN-BG-color</code> as configured fer yer theme variant resembl'n th' default style but wit' different color.</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
|
||
class="tab-content tab-panel-style cstyle info">
|
||
<div class="tab-content-text">
|
||
<p>Th' <code>style</code> parameter be set t' a severity style.</p>
|
||
<p>This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant an' also affects th' chosen ay'con.</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
|
||
class="tab-content tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;">
|
||
<div class="tab-content-text">
|
||
<p>Th' <code>style</code> parameter affects how th' <code>color</code> parameter be applied.</p>
|
||
<p>This will set th' background t' a lighter version o' th' chosen CSS color value an' also affects th' chosen ay'con.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
|
||
<h1 id="tabs">Tabs</h1>
|
||
|
||
<p>Th' <code>tabs</code> shortcode displays arbitrary rrrambl'n 'n an unlimited number o' tabs.</p>
|
||
<div class="tab-panel" data-tab-group="f2737aca7cf39fb35ae3c2f0ccaa7c94">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">hello.</div>
|
||
<button
|
||
data-tab-item="py"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('f2737aca7cf39fb35ae3c2f0ccaa7c94','py')"
|
||
>
|
||
<span class="tab-nav-text">py</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="sh"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('f2737aca7cf39fb35ae3c2f0ccaa7c94','sh')"
|
||
>
|
||
<span class="tab-nav-text">sh</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="c"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('f2737aca7cf39fb35ae3c2f0ccaa7c94','c')"
|
||
>
|
||
<span class="tab-nav-text">c</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="py"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="sh"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">"Hello World!"</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="c"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="nf">printf</span><span class="p">(</span><span class="s">"Hello World!"</span><span class="p">);</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span class="tab-nav-text">shortcode</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span class="tab-nav-text">partial</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="shortcode"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tabs</span> <span class="nx">title</span><span class="p">=</span><span class="s">"hello."</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"py"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```python
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">print("Hello World!")
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"sh"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```bash
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">echo "Hello World!"
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"c"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```c
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">printf"Hello World!");
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="partial"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/tabs.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"hello."</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="p">(</span><span class="nf">slice</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"py"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="p">(</span><span class="s">"```python\nprint(\"Hello World!\")\n```"</span> <span class="p">|</span> <span class="p">.</span><span class="nx">RenderStr'n</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"sh"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="p">(</span><span class="s">"```bash\necho \"Hello World!\"\n```"</span> <span class="p">|</span> <span class="p">.</span><span class="nx">RenderStr'n</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"c"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="p">(</span><span class="s">"```c\nprintf(\"Hello World!\");\n```"</span> <span class="p">|</span> <span class="p">.</span><span class="nx">RenderStr'n</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>If ye just want a single tab ye can instead call th' <a href="/hugo-theme-relearn/pir/shortcodes/tab/index.html"><code>tab</code> shortcode</a> standalone.</p>
|
||
<p>Also follow th' above link t' see th' parameter fer a nested tab.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>groupid</strong></td>
|
||
<td><em><random></em></td>
|
||
<td>Arbitrary name o' th' group th' tab view belongs t'.<br><br>Tab views wit' th' same <strong>groupid</strong> sychr'nize their selected tab. Th' tab select'n be restored automatically based on th' <code>groupid</code> fer tab view. If th' selected tab can not be found 'n a tab group th' first tab be selected instead.<br><br>This sychronizat'n applies t' th' whole ship!</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>style</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>Sets a default value fer every contained tab. Can be overridden by each tab. See th' <a href="/hugo-theme-relearn/pir/shortcodes/tab/index.html#parameter"><code>tab</code> shortcode</a> fer poss'ble values.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>color</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>Sets a default value fer every contained tab. Can be overridden by each tab. See th' <a href="/hugo-theme-relearn/pir/shortcodes/tab/index.html#parameter"><code>tab</code> shortcode</a> fer poss'ble values.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>title</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>Arbitrary title written 'n front o' th' tab view.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>ay'con</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td><em><empty></em></td>
|
||
<td>Arbitrary number o' tabs defined wit' th' <code>tab</code> sub-shortcode.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="behavior-of-the-groupid">Behavior o' th' <code>groupid</code></h3>
|
||
<p>See what happens t' th' tab views while ye select different tabs.</p>
|
||
<p>While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.</p>
|
||
<div class="tab-panel" data-tab-group="27e836b9557d66e040801f74f313012d">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="group-a-tab-view-1"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('27e836b9557d66e040801f74f313012d','group-a-tab-view-1')"
|
||
>
|
||
<span class="tab-nav-text">Group A, Tab View 1</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="group-a-tab-view-2"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('27e836b9557d66e040801f74f313012d','group-a-tab-view-2')"
|
||
>
|
||
<span class="tab-nav-text">Group A, Tab View 2</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="group-b"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('27e836b9557d66e040801f74f313012d','group-b')"
|
||
>
|
||
<span class="tab-nav-text">Group B</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="group-a-tab-view-1"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tabs</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">"a"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"json"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">highlight</span> <span class="nx">json</span> <span class="s">"linenos=true"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{</span> <span class="s">"Hello"</span><span class="p">:</span> <span class="s">"World"</span> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">highlight</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"_**XML**_ stuff"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```xml
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"><Hello>World</Hello>
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"text"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Hello</span> <span class="nx">World</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="group-a-tab-view-2"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tabs</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">"a"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"json"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">highlight</span> <span class="nx">json</span> <span class="s">"linenos=true"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{</span> <span class="s">"Hello"</span><span class="p">:</span> <span class="s">"World"</span> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">highlight</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"XML stuff"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```xml
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"><Hello>World</Hello>
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="group-b"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tabs</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">"b"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"json"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">highlight</span> <span class="nx">json</span> <span class="s">"linenos=true"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{</span> <span class="s">"Hello"</span><span class="p">:</span> <span class="s">"World"</span> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">highlight</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"XML stuff"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```xml
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"><Hello>World</Hello>
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h4 id="group-a-tab-view-1">Group A, Tab View 1</h4>
|
||
<div class="tab-panel" data-tab-group="tab-example-a">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('tab-example-a','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="xml-stuff"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tab-example-a','xml-stuff')"
|
||
>
|
||
<span class="tab-nav-text"><em><strong>XML</strong></em> stuff</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="text"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tab-example-a','text')"
|
||
>
|
||
<span class="tab-nav-text">text</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code" linenos="true"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">{</span> <span class="nt">"Hello"</span><span class="p">:</span> <span class="s2">"World"</span> <span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="xml-stuff"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="nt"><Hello></span>World<span class="nt"></Hello></span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="text"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<pre><code>Hello World
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h4 id="group-a-tab-view-2">Group A, Tab View 2</h4>
|
||
<div class="tab-panel" data-tab-group="tab-example-a">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('tab-example-a','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="xml-stuff"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tab-example-a','xml-stuff')"
|
||
>
|
||
<span class="tab-nav-text">XML stuff</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code" linenos="true"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">{</span> <span class="nt">"Hello"</span><span class="p">:</span> <span class="s2">"World"</span> <span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="xml-stuff"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="nt"><Hello></span>World<span class="nt"></Hello></span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h4 id="group-b">Group B</h4>
|
||
<div class="tab-panel" data-tab-group="tab-example-b">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="json"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('tab-example-b','json')"
|
||
>
|
||
<span class="tab-nav-text">json</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="xml-stuff"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tab-example-b','xml-stuff')"
|
||
>
|
||
<span class="tab-nav-text">XML stuff</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="json"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code" linenos="true"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">{</span> <span class="nt">"Hello"</span><span class="p">:</span> <span class="s2">"World"</span> <span class="p">}</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="xml-stuff"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="nt"><Hello></span>World<span class="nt"></Hello></span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="nested-tab-views-and-color">Nested Tab Views an' Color</h3>
|
||
<p>In case ye want t' nest tab views, th' parent tab that contains nested tab views needs t' be declared wit' <code>{{< tab >}}</code> instead o' <code>{{% tab %}}</code>. Avast, that 'n this case it be not poss'ble t' put markdown 'n th' parent tab.</p>
|
||
<p>Ye can also set style an' color parameter fer all tabs an' overwrite them on tab level. See th' <a href="/hugo-theme-relearn/pir/shortcodes/tab/index.html#parameter"><code>tab</code> shortcode</a> fer poss'ble values.</p>
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tabs</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">"main"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Rationale"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"thumbtack"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Text"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Simple</span> <span class="nx">text</span> <span class="nx">be</span> <span class="nx">poss'ble</span> <span class="nx">here</span><span class="o">...</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{<</span> <span class="nx">tabs</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">"tabs-example-language"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"python"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Python</span> <span class="nx">be</span> <span class="o">**</span><span class="nx">super</span><span class="o">**</span> <span class="nx">easy</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="o">-</span> <span class="nx">most</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">time</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="o">-</span> <span class="k">if</span> <span class="nx">ye</span> <span class="nx">don</span><span class="err">'</span><span class="nx">t</span> <span class="nx">want</span> <span class="nx">t'</span> <span class="nx">output</span> <span class="nx">unicode</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"bash"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Bash</span> <span class="nx">be</span> <span class="k">fer</span> <span class="o">**</span><span class="nx">hackers</span><span class="o">**</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tab</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Code"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"default"</span> <span class="nx">color</span><span class="p">=</span><span class="s">"darkorchid"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="o">...</span><span class="nx">but</span> <span class="nx">no</span> <span class="nx">markdown</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{<</span> <span class="nx">tabs</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">"tabs-example-language"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"python"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">```python
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> print("Hello World!")
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> ```</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">"bash"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">```bash
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> echo "Hello World!"
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> ```</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tab</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span></span></span></code></pre></div>
|
||
<div class="tab-panel" data-tab-group="main">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title"><i class="fa-fw fas fa-thumbtack"></i> Rationale</div>
|
||
<button
|
||
data-tab-item="text"
|
||
class="tab-nav-button tab-panel-style cstyle primary active" tabindex="-1"
|
||
onclick="switchTab('main','text')"
|
||
>
|
||
<span class="tab-nav-text">Text</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="code"
|
||
class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: darkorchid;"
|
||
onclick="switchTab('main','code')"
|
||
>
|
||
<span class="tab-nav-text">Code</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="text"
|
||
class="tab-content tab-panel-style cstyle primary active">
|
||
<div class="tab-content-text">
|
||
<p>
|
||
Simple text be poss'ble here...
|
||
<div class="tab-panel" data-tab-group="tabs-example-language">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="python"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('tabs-example-language','python')"
|
||
>
|
||
<span class="tab-nav-text">python</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="bash"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tabs-example-language','bash')"
|
||
>
|
||
<span class="tab-nav-text">bash</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="python"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<p>Python be <strong>super</strong> easy.</p>
|
||
<ul>
|
||
<li>most o' th' time.</li>
|
||
<li>if ye don’t want t' output unicode</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="bash"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<p>Bash be fer <strong>hackers</strong>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="code"
|
||
class="tab-content tab-panel-style cstyle default" style="--VARIABLE-BOX-color: darkorchid;">
|
||
<div class="tab-content-text">
|
||
<p>
|
||
...but no markdown
|
||
<div class="tab-panel" data-tab-group="tabs-example-language">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="python"
|
||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||
onclick="switchTab('tabs-example-language','python')"
|
||
>
|
||
<span class="tab-nav-text">python</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="bash"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tabs-example-language','bash')"
|
||
>
|
||
<span class="tab-nav-text">bash</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="python"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-tab-item="bash"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">"Hello World!"</span></span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
||
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<script src="/hugo-theme-relearn/js/clipboard.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1729808083" defer></script>
|
||
<script>
|
||
function useMathJax( config ){
|
||
window.MathJax = Object.assign( window.MathJax || {}, {
|
||
tex: {
|
||
inlineMath: [['\\(', '\\)'], ['$', '$']],
|
||
displayMath: [['\\[', '\\]'], ['$$', '$$']],
|
||
},
|
||
options: {
|
||
enableMenu: false
|
||
}
|
||
}, config );
|
||
}
|
||
useMathJax( JSON.parse("{}") );
|
||
</script>
|
||
<script id="MathJax-script" async src="/hugo-theme-relearn/js/mathjax/tex-mml-chtml.js?1729808083"></script>
|
||
<script src="/hugo-theme-relearn/js/d3/d3-color.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/d3/d3-dispatch.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/d3/d3-drag.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/d3/d3-ease.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/d3/d3-interpolate.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/d3/d3-selection.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/d3/d3-timer.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/d3/d3-transition.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/d3/d3-zoom.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/js-yaml.min.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/mermaid.min.js?1729808083" defer></script>
|
||
<script>
|
||
window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
|
||
</script>
|
||
<script src="/hugo-theme-relearn/js/js-yaml.min.js?1729808083" defer></script>
|
||
<script>window.noZensmooth = true;</script>
|
||
<script src="/hugo-theme-relearn/js/swagger-ui/swagger-ui-bundle.js?1729808083" defer></script>
|
||
<script src="/hugo-theme-relearn/js/swagger-ui/swagger-ui-standalone-preset.js?1729808083" defer></script>
|
||
<script>
|
||
window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1729808083", cssInProject: true, assetsBuster: "?1729808083" };
|
||
</script>
|
||
<script src="/hugo-theme-relearn/js/theme.js?1729808083" defer></script>
|
||
</body>
|
||
</html>
|