mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 17:53:07 +00:00
4518 lines
351 KiB
HTML
4518 lines
351 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pir" dir="rtl">
|
||
<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.118.2">
|
||
<meta name="generator" content="Relearn 5.21.0+tip">
|
||
<meta name="description" content="Documentation for Hugo Relearn Theme">
|
||
<meta name="author" content="Sören Weber">
|
||
<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="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="../../pir/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shorrrtcodes :: Cap'n Hugo Relearrrn Theme">
|
||
<link href="../../images/logo.svg?1695511490" rel="icon" type="image/svg+xml">
|
||
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
|
||
<link href="../../css/fontawesome-all.min.css?1695511494" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1695511494" rel="stylesheet"></noscript>
|
||
<link href="../../css/nucleus.css?1695511494" rel="stylesheet">
|
||
<link href="../../css/auto-complete.css?1695511494" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1695511494" rel="stylesheet"></noscript>
|
||
<link href="../../css/perfect-scrollbar.min.css?1695511494" rel="stylesheet">
|
||
<link href="../../css/fonts.css?1695511494" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1695511494" rel="stylesheet"></noscript>
|
||
<link href="../../css/theme.css?1695511494" rel="stylesheet">
|
||
<link href="../../css/theme-auto.css?1695511494" rel="stylesheet" id="R-variant-style">
|
||
<link href="../../css/variant.css?1695511494" rel="stylesheet">
|
||
<link href="../../css/print.css?1695511494" rel="stylesheet" media="print">
|
||
<link href="../../css/format-print.css?1695511494" rel="stylesheet">
|
||
<link href="../../css/ie.css?1695511494" rel="stylesheet">
|
||
<script src="../../js/url.js?1695511494"></script>
|
||
<script src="../../js/variant.js?1695511494"></script>
|
||
<script>
|
||
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
|
||
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
|
||
window.index_js_url="../../pir/index.search.js";
|
||
var root_url="../../";
|
||
var baseUri=root_url.replace(/\/$/, '');
|
||
// translations
|
||
window.T_Copy_to_clipboard = 'Copy t\u0027 clipboard';
|
||
window.T_Copied_to_clipboard = 'Copied t\u0027 clipboard!';
|
||
window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
|
||
window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
|
||
window.T_No_results_found = 'No rrresults found fer \u0022{0}\u0022';
|
||
window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
|
||
// some further base stuff
|
||
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
|
||
window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
||
</script>
|
||
<style>
|
||
#R-body img.bg-white {
|
||
background-color: white;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../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>
|
||
<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>
|
||
</div>
|
||
</nav>
|
||
<div id="R-main-overlay"></div>
|
||
<main id="R-body-inner" class="highlightable chapter narrow" tabindex="-1">
|
||
<div class="flex-block-wrapper">
|
||
<article class="chapter">
|
||
<header class="headline">
|
||
</header>
|
||
<div class="article-subheading">T' chapterrr 3</div>
|
||
<h1 id="shorrrtcodes">Shorrrtcodes</h1>
|
||
|
||
|
||
<p>Cap'n Hugo uses Marrrkdown fer its simple rrrambl'n format. However, there be a lot o' th'ns that Marrrkdown doesn’t support well. Ye could use pure HTML t' expand possibilities.</p>
|
||
<p>But this happens t' be a bad idea. Everyone uses Marrrkdown because it’s pure an' simple t' read even non-rendered. Ye should avoid HTML t' keep it as simple as poss'ble.</p>
|
||
<p>T' avoid this limitat'ns, Cap'n Hugo created <a href="https://gohugo.io/extras/shortcodes/" target="_blank">shorrrtcodes</a>. A shortcode be a simple snippet inside a plank.</p>
|
||
<p>Th' Relearrrn theme provides multiple shorrrtcodes on top o' exist'n ones.</p>
|
||
|
||
<div class="children children-h2 children-sort-">
|
||
|
||
<h2><a href="../../shortcodes/attachments/index.html">Attachments</a></h2><p>List o' files attached t' a plank</p>
|
||
<h2><a href="../../shortcodes/badge/index.html">Badge</a></h2><p>Marker badges t' display 'n yer text</p>
|
||
<h2><a href="../../shortcodes/button/index.html">Button</a></h2><p>Click'ble buttons</p>
|
||
<h2><a href="../../shortcodes/children/index.html">Children</a></h2><p>List th' child planks o' a plank</p>
|
||
<h2><a href="../../shortcodes/expand/index.html">Expand</a></h2><p>Expandable/collaps'ble sections o' text</p>
|
||
<h2><a href="../../shortcodes/highlight/index.html">Highlight</a></h2><p>Render code wit' a rules highlighter</p>
|
||
<h2><a href="../../shortcodes/icon/index.html">Ay'con</a></h2><p>Nice ay'cons fer yer plank</p>
|
||
<h2><a href="../../shortcodes/include/index.html">Include</a></h2><p>Displays rrrambl'n from other files</p>
|
||
<h2><a href="../../shortcodes/math/index.html">Math</a></h2><p>Beautiful math an' chemical formulae</p>
|
||
<h2><a href="../../shortcodes/mermaid/index.html">Merrrmaid</a></h2><p>Generate diagrams an' flowcharts from text</p>
|
||
<h2><a href="../../shortcodes/notice/index.html">Notice</a></h2><p>Disclaimers t' help ye structure yer plank</p>
|
||
<h2><a href="../../shortcodes/openapi/index.html">OpenAPI</a></h2><p>UI fer yer OpenAPI / Swagger specificat'ns</p>
|
||
<h2><a href="../../shortcodes/siteparam/index.html">SiteParam</a></h2><p>Get value o' ship params</p>
|
||
<h2><a href="../../shortcodes/tab/index.html">Tab</a></h2><p>Show rrrambl'n 'n a single tab</p>
|
||
<h2><a href="../../shortcodes/tabs/index.html">Tabs</a></h2><p>Show rrrambl'n 'n tabbed views</p>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Shorrrtcodes</h1>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
<h1 id="attachments">Attachments</h1>
|
||
|
||
|
||
<div class="box attachments cstyle transparent">
|
||
<div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="../../pir/shortcodes/attachments/index.pir.files/NoTreasure.txt">NoTreasure.txt</a> (26 B)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p>Th' <code>attachments</code> shortcode displays a list o' files attached t' a plank wit' adjust'ble color, title an' ay'con.</p>
|
||
|
||
<div class="box attachments cstyle transparent">
|
||
<div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="../../shortcodes/attachments/index.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
</ul>
|
||
</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>Since Cap'n Hugo <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.112.0</span></span> this only works fer leaf bundles. Branch bundles an' simple planks must be switched t' leaf bundles or ye be currently locked t' a Cap'n Hugo version < <code>0.112.0</code>.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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">attachments</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="wrap-code highlight"><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/attachments.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>
|
||
<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>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>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code></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" target="_blank">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>Attachments</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="../../shortcodes/icon/#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 d wit' spaces)</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" target="_blank">regular expressions</a>, used t' filter th' attachments by file name. 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="setup">Setup</h2>
|
||
<h3 id="single-language">Single language</h3>
|
||
<p>Th' shortcode lists files found 'n a specific folder. Th' name o' th' folder depends on yer plank type (either branch bundle, leaf bundle or page).</p>
|
||
<ol>
|
||
<li>
|
||
<p>If yer plank be a leaf bundle, attachments must be placed 'n a nested <code>index.files</code> folder, accordingly.</p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>rrrambl'n
|
||
<ul>
|
||
<li>_index.md</li>
|
||
<li>plank
|
||
<ul>
|
||
<li>_index.md</li>
|
||
<li><strong>_index.files</strong>
|
||
<ul>
|
||
<li>attachment.pdf</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</blockquote>
|
||
</li>
|
||
<li>
|
||
<p>If yer plank be a branch bundle, attachments must be placed 'n a nested <code>_index.files</code> folder, accordingly.</p>
|
||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Arrr</span></span> This be only avail'ble fer Cap'n Hugo < <code>0.112.0</code></p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>rrrambl'n
|
||
<ul>
|
||
<li>_index.md</li>
|
||
<li>plank
|
||
<ul>
|
||
<li>index.md</li>
|
||
<li><strong>index.files</strong>
|
||
<ul>
|
||
<li>attachment.pdf</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</blockquote>
|
||
</li>
|
||
<li>
|
||
<p>For simple planks, attachments must be placed 'n a folder named like yer plank an' end'n wit' <code>.files</code>.</p>
|
||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Arrr</span></span> This be only avail'ble fer Cap'n Hugo < <code>0.112.0</code></p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>rrrambl'n
|
||
<ul>
|
||
<li>_index.md</li>
|
||
<li><strong>plank.files</strong>
|
||
<ul>
|
||
<li>attachment.pdf</li>
|
||
</ul>
|
||
</li>
|
||
<li>plank.md</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</blockquote>
|
||
</li>
|
||
</ol>
|
||
<h3 id="multilingual">Multilingual</h3>
|
||
<p>Be aware that if ye use a multilingual website, ye will need t' have as many folders as languages an' th' language code must be part o' th' folder name.</p>
|
||
<p>Eg. fer a ship 'n English an' Piratish:</p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>rrrambl'n
|
||
<ul>
|
||
<li>index.en.md</li>
|
||
<li>index.pir.md</li>
|
||
<li>plank
|
||
<ul>
|
||
<li>index.en.md</li>
|
||
<li>index.pir.md</li>
|
||
<li><strong>index.en.files</strong>
|
||
<ul>
|
||
<li>attachment.pdf</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>index.pir.files</strong>
|
||
<ul>
|
||
<li>attachment.pdf</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</blockquote>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="custom-title-list-of-attachments-ending-in-pdf-or-mp4">Custom Title, List o' Attachments End'n 'n pdf or mp4</h3>
|
||
<div class="wrap-code highlight"><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">attachments</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">".*\.(pdf|mp4)"</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="box-content attachments-files">
|
||
<li><a href="../../shortcodes/attachments/index.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
</ul>
|
||
</div>
|
||
<h3 id="info-styled-box-descending-sort-order">Ahoi Styled Box, Descend'n Sort Order</h3>
|
||
<div class="wrap-code highlight"><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">attachments</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="box-content attachments-files">
|
||
<li><a href="../../shortcodes/attachments/index.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 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="wrap-code highlight"><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">attachments</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">"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="fab fa-hackerrank"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="../../shortcodes/attachments/index.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="../../shortcodes/attachments/index.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</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="../../shortcodes/notice/"><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">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<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="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Awesome</span></span></p>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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">"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="wrap-code highlight"><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>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>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code></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" target="_blank">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="../../shortcodes/icon/#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="wrap-code highlight"><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="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">style</span><span class="p">=</span><span class="s">"note"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Change</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">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">"warning"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Break'n</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 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 note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</span><span class="badge-content">Change</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">Optional</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">Break'n</span></span></p>
|
||
<h4 id="by-brand-colors">By Brand Colors</h4>
|
||
<div class="wrap-code highlight"><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="wrap-code highlight"><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">"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">"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 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 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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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">"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="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="../../shortcodes/icon/"><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="wrap-code highlight"><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="wrap-code highlight"><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">
|
||
|
||
</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 transparent">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle warning">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fa-fw fas fa-dragon"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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>
|
||
<p>Once th' button be clicked, it opens another browser tab fer th' given URL.</p>
|
||
<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>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>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code></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" target="_blank">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="../../shortcodes/icon/#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" target="_blank">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="wrap-code highlight"><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">"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 info">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fa-fw fas fa-info-circle"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle note">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fa-fw fas fa-exclamation-circle"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle tip">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fa-fw fas fa-lightbulb"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle warning">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fa-fw fas fa-exclamation-triangle"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h4 id="by-brand-colors">By Brand Colors</h4>
|
||
<div class="wrap-code highlight"><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 primary">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle secondary">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle accent">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h4 id="by-color">By Color</h4>
|
||
<div class="wrap-code highlight"><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">"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">"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 blue">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle green">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle grey">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle orange">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle red">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h4 id="by-special-color">By Special Color</h4>
|
||
<div class="wrap-code highlight"><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 default">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle transparent">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h3 id="icon">Ay'con</h3>
|
||
<h4 id="empty">Empty</h4>
|
||
<div class="wrap-code highlight"><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 transparent">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
|
||
</a>
|
||
</span>
|
||
<h4 id="only">Only</h4>
|
||
<div class="wrap-code highlight"><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 transparent">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fa-fw fas fa-download"></i>
|
||
|
||
</a>
|
||
</span>
|
||
<h4 id="to-the-left">T' th' Left</h4>
|
||
<div class="wrap-code highlight"><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 transparent">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fa-fw fas fa-download"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
<h4 id="to-the-right">T' th' Right</h4>
|
||
<div class="wrap-code highlight"><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 transparent">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo
|
||
<i class="fa-fw fas fa-download"></i>
|
||
</a>
|
||
</span>
|
||
<h4 id="override-for-severity">Override fer Severity</h4>
|
||
<div class="wrap-code highlight"><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 warning">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fa-fw fas fa-dragon"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
<h3 id="target">Target</h3>
|
||
<div class="wrap-code highlight"><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 transparent">
|
||
<a href="https://gohugo.io/" target="_self">
|
||
Get Cap'n Hugo 'n same Window/Frame
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle transparent">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
Get Cap'n Hugo 'n new Window/Frame (default)
|
||
</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="wrap-code highlight"><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">"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 default" style="--VARIABLE-BOX-color: fuchsia;">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fab fa-hackerrank"></i>
|
||
Get <strong>Cap'n Hugo</strong>
|
||
</a>
|
||
</span>
|
||
<h4 id="severity-style-with-all-defaults">Severity Style wit' All Defaults</h4>
|
||
<div class="wrap-code highlight"><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 tip">
|
||
<a href="https://gohugo.io/" target="_blank">
|
||
<i class="fa-fw fas fa-lightbulb"></i>
|
||
Smarrrt Arrrse
|
||
</a>
|
||
</span>
|
||
<h4 id="button-to-internal-page">Button t' Internal Plank</h4>
|
||
<div class="wrap-code highlight"><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 transparent">
|
||
<a href="../../index.html">
|
||
Home
|
||
</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="wrap-code highlight"><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 primary">
|
||
<button onclick="alert('Hello world!');this.blur();" type="button">
|
||
<i class="fa-fw fas fa-bullhorn"></i>
|
||
Shout it out
|
||
</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>config.toml</code></p>
|
||
<div class="wrap-code highlight"><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="wrap-code highlight"><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 secondary">
|
||
<button type="submit">
|
||
<i class="fa-fw fas fa-search"></i>
|
||
Search
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</form>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</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-weight">
|
||
|
||
<li><a href="../../shortcodes/children/test/index.html">plank X</a></li>
|
||
<li><a href="../../shortcodes/children/children-1/index.html">plank 1</a></li>
|
||
<li><a href="../../shortcodes/children/children-2/index.html">plank 2</a></li>
|
||
<li><a href="../../shortcodes/children/children-3/index.html">plank 3</a></li>
|
||
</ul>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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">"weight"</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="wrap-code highlight"><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">"weight"</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/" target="_blank">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>see notes</td>
|
||
<td>Th' sort order o' th' displayed list.<br><br>If not set it be sorted by th' <a href="../../basics/configuration/#global-site-parameters"><code>ordersectionsby</code></a> sett'n o' th' ship an' th' planks frontmatter<br><br>- <code>weight</code>: t' sort on menu order<br>- <code>title</code>: t' sort alphabetically on menu label.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="all-default">All Default</h3>
|
||
<div class="wrap-code highlight"><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="../../shortcodes/children/test/index.html">plank X</a></li>
|
||
<li><a href="../../shortcodes/children/children-1/index.html">plank 1</a></li>
|
||
<li><a href="../../shortcodes/children/children-2/index.html">plank 2</a></li>
|
||
<li><a href="../../shortcodes/children/children-3/index.html">plank 3</a></li>
|
||
</ul>
|
||
<h3 id="with-description">Wit' Descript'n</h3>
|
||
<div class="wrap-code highlight"><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="../../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="../../shortcodes/children/children-1/index.html">plank 1</a><p>This be a demo child plank</p></li>
|
||
<li><a href="../../shortcodes/children/children-2/index.html">plank 2</a><p>This be a demo child plank wit' no descript'n.
|
||
So its rrrambl'n be used as descript'n.</p></li>
|
||
<li><a href="../../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="wrap-code highlight"><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="../../shortcodes/children/test/index.html">plank X</a><ul>
|
||
</ul></li>
|
||
<li><a href="../../shortcodes/children/children-1/index.html">plank 1</a><ul>
|
||
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a><ul>
|
||
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">plank 1-1-1 (hidden)</a><ul>
|
||
|
||
<li><a href="../../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="../../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="../../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="../../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="../../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="../../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="../../shortcodes/children/children-2/index.html">plank 2</a><ul>
|
||
</ul></li>
|
||
<li><a href="../../shortcodes/children/children-3/index.html">plank 3</a><ul>
|
||
|
||
<li><a href="../../shortcodes/children/children-3/test3/index.html">plank 3-1</a><ul>
|
||
</ul></li></ul></li>
|
||
<li><a href="../../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="wrap-code highlight"><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="../../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="../../shortcodes/children/children-1/index.html">plank 1</a></h2><p>This be a demo child plank</p>
|
||
|
||
<h3><a href="../../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="../../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="../../shortcodes/children/children-2/index.html">plank 2</a></h2><p>This be a demo child plank wit' no descript'n.
|
||
So its rrrambl'n be used as descript'n.</p>
|
||
|
||
<h2><a href="../../shortcodes/children/children-3/index.html">plank 3</a></h2><p>This be a demo child plank</p>
|
||
|
||
<h3><a href="../../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="wrap-code highlight"><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="../../shortcodes/children/test/index.html">plank X</a></div>
|
||
|
||
<div><a href="../../shortcodes/children/children-1/index.html">plank 1</a></div>
|
||
|
||
<div><a href="../../shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a></div>
|
||
|
||
<div><span>plank 1-1-2 (headless)</span></div>
|
||
<div><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3</a></div>
|
||
<div><a href="../../shortcodes/children/children-2/index.html">plank 2</a></div>
|
||
|
||
<div><a href="../../shortcodes/children/children-3/index.html">plank 3</a></div>
|
||
|
||
<div><a href="../../shortcodes/children/children-3/test3/index.html">plank 3-1</a></div>
|
||
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Children</h1>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">Children</a>
|
||
</div>
|
||
</header>
|
||
<h1 id="plank-x">plank X</h1>
|
||
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">children</a>
|
||
<a class="tag-link" href="../../pir/tags/non-hidden/index.html">non-hidden</a>
|
||
</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="../../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="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">children</a>
|
||
<a class="tag-link" href="../../pir/tags/non-hidden/index.html">non-hidden</a>
|
||
</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="../../shortcodes/children/children-1/children-1-1/children-1-1-1/">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="../../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="../../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">
|
||
<div class="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">children</a>
|
||
<a class="tag-link" href="../../pir/tags/headless/index.html">headless</a>
|
||
<a class="tag-link" href="../../pir/tags/non-hidden/index.html">non-hidden</a>
|
||
</div>
|
||
</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="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">children</a>
|
||
<a class="tag-link" href="../../pir/tags/non-hidden/index.html">non-hidden</a>
|
||
</div>
|
||
</header>
|
||
<h1 id="plank-1-1-2-1">plank 1-1-2-1</h1>
|
||
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">children</a>
|
||
<a class="tag-link" href="../../pir/tags/non-hidden/index.html">non-hidden</a>
|
||
</div>
|
||
</header>
|
||
<h1 id="plank-1-1-2-2">plank 1-1-2-2</h1>
|
||
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
</section>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">children</a>
|
||
<a class="tag-link" href="../../pir/tags/non-hidden/index.html">non-hidden</a>
|
||
</div>
|
||
</header>
|
||
<h1 id="plank-1-1-3">plank 1-1-3</h1>
|
||
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
</section>
|
||
</section>
|
||
<article class="default">
|
||
<header class="headline">
|
||
<div class="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">children</a>
|
||
<a class="tag-link" href="../../pir/tags/non-hidden/index.html">non-hidden</a>
|
||
</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="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">children</a>
|
||
<a class="tag-link" href="../../pir/tags/non-hidden/index.html">non-hidden</a>
|
||
</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="../../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="tags">
|
||
<a class="tag-link" href="../../pir/tags/children/index.html">children</a>
|
||
<a class="tag-link" href="../../pir/tags/non-hidden/index.html">non-hidden</a>
|
||
</div>
|
||
</header>
|
||
<h1 id="plank-3-1">plank 3-1</h1>
|
||
|
||
|
||
<p>This be a plain demo child plank.</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-6ee48eeb4ee9707d30e15e1a3b8e6480" aria-controls="expandcontent-6ee48eeb4ee9707d30e15e1a3b8e6480" >
|
||
<label class="expand-label" for="R-expand-6ee48eeb4ee9707d30e15e1a3b8e6480" >
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Expand me…
|
||
</label>
|
||
<div id="R-expandcontent-6ee48eeb4ee9707d30e15e1a3b8e6480" 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>
|
||
|
||
<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>This only works 'n modern browsers flawlessly. While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional as well or also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode (positional)</div>
|
||
<div class="tab-nav-text">shortcode (positional)</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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>
|
||
<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>open</strong></td>
|
||
<td>2</td>
|
||
<td><code>false</code></td>
|
||
<td>When <code>true</code> th' rrrambl'n text will be initially shown as expanded.</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="wrap-code highlight"><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-57f7cda1bfb5938d4e1251424a0e2cfd" aria-controls="expandcontent-57f7cda1bfb5938d4e1251424a0e2cfd" >
|
||
<label class="expand-label" for="R-expand-57f7cda1bfb5938d4e1251424a0e2cfd" >
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Expand me…
|
||
</label>
|
||
<div id="R-expandcontent-57f7cda1bfb5938d4e1251424a0e2cfd" class="expand-content">
|
||
<p>
|
||
Yes, ye did it!</div>
|
||
</div>
|
||
<h3 id="initially-expanded">Initially Expanded</h3>
|
||
<div class="wrap-code highlight"><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">open</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-1a92ddeb7897c89c9441d22c4fb77682" aria-controls="expandcontent-1a92ddeb7897c89c9441d22c4fb77682" checked>
|
||
<label class="expand-label" for="R-expand-1a92ddeb7897c89c9441d22c4fb77682" >
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Expand me…
|
||
</label>
|
||
<div id="R-expandcontent-1a92ddeb7897c89c9441d22c4fb77682" class="expand-content">
|
||
<p>
|
||
No need t' press ye!</div>
|
||
</div>
|
||
<h3 id="arbitrary-text">Arbitrary Text</h3>
|
||
<div class="wrap-code highlight"><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-055a14ef9475223ecb85bb8a9cd2823b" aria-controls="expandcontent-055a14ef9475223ecb85bb8a9cd2823b" >
|
||
<label class="expand-label" for="R-expand-055a14ef9475223ecb85bb8a9cd2823b" >
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show me almost <strong>endless</strong> possibilities
|
||
</label>
|
||
<div id="R-expandcontent-055a14ef9475223ecb85bb8a9cd2823b" 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" target="_blank">links</a></li>
|
||
<li>etc.</li>
|
||
</ul>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div><blockquote>
|
||
<p>th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work)</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
<h1 id="highlight">Highlight</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 <b>some stuff may look weird</b> in this trrranslat'n. Like <b>Merrrmaids</b>, do'n <b>math or chemistrrry</b> and stuff.</p>
|
||
</div>
|
||
</div>
|
||
<p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
|
||
|
||
|
||
<div class="tab-panel" data-tab-group="fa98806fc2abda79a213e9a386225781">
|
||
<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"
|
||
onclick="switchTab('fa98806fc2abda79a213e9a386225781','python')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">python</div>
|
||
<div class="tab-nav-text">python</div>
|
||
</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="wrap-code highlight"><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>
|
||
<p>This shortcode be fully compat'ble wit' Hugo’s <a href="https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode" target="_blank"><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 provid'n positional parameter or by simply us'n 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/" target="_blank"><code>highlight</code> funct'n</a> rules if ye call this shortcode as a partial us'n compatiblity rules.</p>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports codefences (eg. GitHub) an' so yer markdown becomes more port'ble.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','codefence')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">codefence</div>
|
||
<div class="tab-nav-text">codefence</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode (positional)</div>
|
||
<div class="tab-nav-text">shortcode (positional)</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial-compat"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial-compat')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial (compat)</div>
|
||
<div class="tab-nav-text">partial (compat)</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>type</strong></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" target="_blank">supported languages</a>. Case-insensitive.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>title</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td><strong>Extension</strong>. Arbitrary title fer code. This displays th' code like a <a href="../../shortcodes/tab/">single tab</a> if <code>hl_inline=false</code> (which be Hugos default).</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>wrap</strong></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>config.toml</code> an' overwritten via frontmatter. <a href="#configuration">See below</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>opt'ns</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>An optional, comma-separated list o' zero or more <a href="https://gohugo.io/functions/highlight/#options" target="_blank">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><em><empty></em></td>
|
||
<td>Any o' <a href="https://gohugo.io/functions/highlight/#options" target="_blank">Hugo’s supported opt'ns</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><em><strong><content></strong></em></td>
|
||
<td><em><empty></em></td>
|
||
<td>Yer code t' highlight.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="configuration">Configurat'n</h2>
|
||
<p>Default values fer <a href="https://gohugo.io/functions/highlight/#options" target="_blank">Hugo’s supported opt'ns</a> can be set via <a href="https://gohugo.io/getting-started/configuration-markup/#highlight" target="_blank">goldmark sett'ns</a> 'n yer <code>config.toml</code></p>
|
||
<p>Default values fer extension opt'ns can be set via params sett'ns 'n yer <code>config.toml</code> or be overwritten by frontmatter fer each individual plank.</p>
|
||
<h3 id="global-configuration-file">Global Configurat'n File</h3>
|
||
<h4 id="recommended-settings">Recommended Sett'ns</h4>
|
||
<div class="wrap-code highlight"><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="c"># line numbers 'n a t'ble layout will shift if code be wrapp'n, so better</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># use inline; besides that visually both layouts have th' same look an' behavior</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><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># if `guessSyntax = true`, there will be no unstyled code even if no language</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># was given BUT Merrrmaid an' Math codefences will not work anymore! So this be a</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># mandatory sett'n fer yer ship if ye want t' use Merrrmaid or Math codefences</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">guessSyntax</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># th' shipped variants come wit' their own modified chroma rules highlightn'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># style which be imported 'n theme-relearn-light.css, theme-relearn-dark.css, etc.;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># if ye want t' use a predefined style instead:</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># - remove `noClasses` or set `noClasses = true`</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># - set `style` t' a predefined style name</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">noClasses</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># style = "tango"</span></span></span></code></pre></div><h4 id="optional-settings">Optional Sett'ns</h4>
|
||
<div class="wrap-code highlight"><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">highlightWrap</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div><h3 id="pages-frontmatter">Page’s Frontmatter</h3>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">highlightWrap</span> <span class="p">=</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><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>config.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="wrap-code highlight"><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="wrap-code highlight"><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="codefence-with-title">Codefence wit' Title</h3>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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="1abd213b3ee7e7014024adf654b11713">
|
||
<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"
|
||
onclick="switchTab('1abd213b3ee7e7014024adf654b11713','python')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">python</div>
|
||
<div class="tab-nav-text">python</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code 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>
|
||
<h3 id="without-wrap">Without Wrap</h3>
|
||
<div class="wrap-code highlight"><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">
|
||
|
||
</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" target="_blank">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>
|
||
<p>While th' examples be us'n shorrrtcodes wit' positional parameter ye be free t' also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode (positional)</div>
|
||
<div class="tab-nav-text">shortcode (positional)</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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="#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/v5/search?m=free" target="_blank">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/v5/icons/heart?s=solid" target="_blank">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" target="_blank">web fonts wit' CSS</a> fer more.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="standard-usage">Standard Usage</h3>
|
||
<div class="wrap-code highlight"><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="wrap-code highlight"><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>config.toml</code>:</p>
|
||
<div class="wrap-code highlight"><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">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
<h1 id="include">Include</h1>
|
||
|
||
|
||
<p>Th' <code>include</code> shortcode includes other files from yer project inside o' th' current plank.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional aswell or also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode (positional)</div>
|
||
<div class="tab-nav-text">shortcode (positional)</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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_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="wrap-code highlight"><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_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="wrap-code highlight"><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_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' file t' be included. Path resolut'n adheres t' <a href="https://gohugo.io/functions/readfile/" target="_blank">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="examples">Examples</h2>
|
||
<h3 id="arbitrary-content">Arbitrary Rrrambl'n</h3>
|
||
<div class="wrap-code highlight"><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_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" target="_blank">links</a></li>
|
||
<li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li>
|
||
</ul>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div><blockquote>
|
||
<p>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">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
<h1 id="math">Math</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 <b>some stuff may look weird</b> in this trrranslat'n. Like <b>Merrrmaids</b>, do'n <b>math or chemistrrry</b> and stuff.</p>
|
||
</div>
|
||
</div>
|
||
<p>Th' <code>math</code> shortcode generates beautiful formatted math an' chemical formulae us'n th' <a href="https://mathjax.org/" target="_blank">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>
|
||
|
||
<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>This only works 'n modern browsers.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports Math codefences (eg. GitHub) an' so yer markdown becomes more port'ble.</p>
|
||
<p>Ye be free t' also call this shortcode from yer own partials.</p>
|
||
|
||
<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>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n (<a href="#configuration">see th' configurat'n section</a>).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','codefence')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">codefence</div>
|
||
<div class="tab-nav-text">codefence</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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>
|
||
<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>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 formuale.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="configuration">Configurat'n</h2>
|
||
<p>MathJax be configured wit' default sett'ns. Ye can cust'mize MathJax’s default sett'ns fer all o' yer files thru a JSON object 'n yer <code>config.toml</code> or override these sett'ns per plank thru yer planks frontmatter.</p>
|
||
<p>Th' JSON object o' yer <code>config.toml</code> / frontmatter be forwarded into MathJax’s configurat'n object.</p>
|
||
<p>See <a href="https://docs.mathjax.org/en/latest/options/index.html" target="_blank">MathJax documentat'n</a> fer all allowed sett'ns.</p>
|
||
|
||
<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>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n.</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="global-configuration-file">Global Configurat'n File</h3>
|
||
<div class="wrap-code highlight"><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">mathJaxInitialize</span> <span class="p">=</span> <span class="s2">"{ \"chtml\": { \"displayAlign\": \"left\" } }"</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></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="c"># if `guessSyntax = true`, there will be no unstyled code even if no language</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># was given BUT Merrrmaid an' Math codefences will not work anymore! So this be a</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># mandatory sett'n fer yer ship if ye want t' use Math codefences</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">guessSyntax</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div><h3 id="pages-frontmatter">Page’s Frontmatter</h3>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">mathJaxInitialize</span> <span class="p">=</span> <span class="s2">"{ \"chtml\": { \"displayAlign\": \"left\" } }"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><h2 id="examples">Examples</h2>
|
||
<h3 id="inline-math">Inline Math</h3>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Inline math be generated if ye use a single <span class="sb">`$`</span> as a delimiter around yer formulae: {{<span class="p"><</span> <span class="nt">math</span> <span class="p">></span>}}$\sqrt{3}${{<span class="p"><</span> <span class="p">/</span><span class="nt">math</span> <span class="p">></span>}}</span></span></code></pre></div><p>Inline math be generated if ye use a single <code>$</code> as a delimiter around yer formulae:
|
||
<span class="math align-center">$\sqrt{3}$</span></p>
|
||
<h3 id="blocklevel-math-with-right-alignment">Blocklevel Math wit' Right Alignment</h3>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">If ye delimit yer formulae by two consecutive <span class="sb">`$$`</span> it generates a new block.
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><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><p>If ye delimit yer formulae by two consecutive <code>$$</code> it generates a new block.</p>
|
||
|
||
<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="codefence">Codefence</h3>
|
||
<p>Ye can also use codefences.</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="s">```math
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>$$\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="s">```</span></span></span></code></pre></div>
|
||
<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><h3 id="chemical-formulae">Chemical Formulae</h3>
|
||
<div class="wrap-code highlight"><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="p">></span>}}
|
||
</span></span><span class="line"><span class="cl">$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||
</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-center">
|
||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||
</span>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</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 <b>some stuff may look weird</b> in this trrranslat'n. Like <b>Merrrmaids</b>, do'n <b>math or chemistrrry</b> 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/" target="_blank">Merrrmaid</a> library.</p>
|
||
|
||
<div class="mermaid align-center zoom">
|
||
graph LR;
|
||
If --> Then
|
||
Then --> Else
|
||
</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>This only works 'n modern browsers.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports Merrrmaid codefences (eg. GitHub) an' so yer markdown becomes more port'ble.</p>
|
||
<p>Ye be free t' also call this shortcode from yer own partials.</p>
|
||
|
||
<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>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n (<a href="#configuration">see th' configurat'n section</a>).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','codefence')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">codefence</div>
|
||
<div class="tab-nav-text">codefence</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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;\nIf --> Then\nThen --> 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>Th' generated graphs can be be panned by dragg'n them an' zoomed by us'n th' mousewheel. On mobile devices ye can use finger gestures.</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>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' <code>mermaidZoom</code> sett'n o' th' <a href="#global-configuration-file">ship</a> or th' <a href="#pages-frontmatter">planks frontmatter</a> 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="configuration">Configurat'n</h2>
|
||
<p>Merrrmaid be configured wit' default sett'ns. Ye can cust'mize Mermaid’s default sett'ns fer all o' yer files thru a JSON object 'n yer <code>config.toml</code>, override these sett'ns per plank thru yer planks frontmatter or override these sett'n per diagramm thru <a href="https://mermaid-js.github.io/mermaid/#/directives?id=directives" target="_blank">diagram directives</a>.</p>
|
||
<p>Th' JSON object o' yer <code>config.toml</code> / frontmatter be forwarded into Mermaid’s <code>mermaid.initialize()</code> funct'n.</p>
|
||
<p>See <a href="https://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi-configuration-defaults" target="_blank">Merrrmaid documentat'n</a> fer all allowed sett'ns.</p>
|
||
<p>Th' <code>theme</code> sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n <code>config.toml</code>, frontmatter or diagram directives.</p>
|
||
|
||
<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>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n.</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="global-configuration-file">Global Configurat'n File</h3>
|
||
<div class="wrap-code highlight"><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">mermaidInitialize</span> <span class="p">=</span> <span class="s2">"{ \"theme\": \"dark\" }"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">mermaidZoom</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></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="c"># if `guessSyntax = true`, there will be no unstyled code even if no language</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># was given BUT Merrrmaid an' Math codefences will not work anymore! So this be a</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># mandatory sett'n fer yer ship if ye want t' use Merrrmaid codefences</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">guessSyntax</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div><h3 id="pages-frontmatter">Page’s Frontmatter</h3>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">mermaidInitialize</span> <span class="p">=</span> <span class="s2">"{ \"theme\": \"dark\" }"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">mermaidZoom</span> <span class="p">=</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><h2 id="examples">Examples</h2>
|
||
<h3 id="flowchart-with-yaml-title">Flowchart wit' YAML-Title</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">---</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">title</span><span class="p">:</span> <span class="nx">Example</span> <span class="nx">Diagram</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">---</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">A</span><span class="p">[</span><span class="nx">Hard</span> <span class="nx">edge</span><span class="p">]</span> <span class="o">--</span><span class="p">>|</span><span class="nx">Link</span> <span class="nx">text</span><span class="p">|</span> <span class="nf">B</span><span class="p">(</span><span class="nx">Round</span> <span class="nx">edge</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">B</span> <span class="o">--</span><span class="p">></span> <span class="nx">C</span><span class="p">{<</span><span class="nx">strong</span><span class="p">></span><span class="nx">Decision</span><span class="p"><</span><span class="o">/</span><span class="nx">strong</span><span class="p">>}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">C</span> <span class="o">--</span><span class="p">>|</span><span class="nx">One</span><span class="p">|</span> <span class="nx">D</span><span class="p">[</span><span class="nx">Result</span> <span class="nx">one</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">C</span> <span class="o">--</span><span class="p">>|</span><span class="nx">Two</span><span class="p">|</span> <span class="nx">E</span><span class="p">[</span><span class="nx">Result</span> <span class="nx">two</span><span class="p">]</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 class="mermaid align-center zoom">
|
||
---
|
||
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]
|
||
</div>
|
||
<h3 id="sequence-diagram-with-configuration-directive">Sequence Diagram wit' Configurat'n Directive</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">%%</span><span class="p">{</span><span class="nx">init</span><span class="p">:{</span><span class="s">"fontFamily"</span><span class="p">:</span><span class="s">"monospace"</span><span class="p">,</span> <span class="s">"sequence"</span><span class="p">:{</span><span class="s">"showSequenceNumbers"</span><span class="p">:</span><span class="kc">true</span><span class="p">}}}</span><span class="o">%%</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">sequenceDiagram</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Alice</span><span class="o">->></span><span class="nx">John</span><span class="p">:</span> <span class="nx">Hello</span> <span class="nx">John</span><span class="p">,</span> <span class="nx">how</span> <span class="nx">be</span> <span class="nx">ye</span><span class="err">?</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">loop</span> <span class="nx">Healthcheck</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">->></span><span class="nx">John</span><span class="p">:</span> <span class="nx">Fight</span> <span class="nx">against</span> <span class="nx">hypochondria</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">end</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Avast</span> <span class="nx">right</span> <span class="nx">o'</span> <span class="nx">John</span><span class="p">:</span> <span class="nx">Rational</span> <span class="nx">thoughts</span><span class="p">!</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">-->></span><span class="nx">Alice</span><span class="p">:</span> <span class="nx">Great</span><span class="p">!</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">->></span><span class="nx">Bob</span><span class="p">:</span> <span class="nx">How</span> <span class="nx">about</span> <span class="nx">ye</span><span class="err">?</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Bob</span><span class="o">-->></span><span class="nx">John</span><span class="p">:</span> <span class="nx">Jolly</span> <span class="nx">bloody</span><span class="p">!</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 class="mermaid align-center zoom">
|
||
%%{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!
|
||
</div>
|
||
<h3 id="class-diagram-with-codefence-syntax">Class Diagram wit' Codefence Rules</h3>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">classDiagram
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal <|-- Duck
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal <|-- Fish
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal <|-- Zebra
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal : +int age
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal : +Str'n gender
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal: +isMammal()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal: +mate()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> class Duck{
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +Str'n beakColor
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +swim()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +quack()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> }
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> class Fish{
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> -int sizeInFeet
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> -canEat()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> }
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> class Zebra{
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +bool is_wild
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +run()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> }
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
|
||
<div class="mermaid align-center zoom">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()
|
||
}</div><h3 id="state-diagram-aligned-to-the-right">State Diagram Aligned t' th' Right</h3>
|
||
<div class="wrap-code highlight"><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>
|
||
<div class="mermaid align-right zoom">
|
||
stateDiagram-v2
|
||
open: Open Door
|
||
closed: Closed Door
|
||
locked: Locked Door
|
||
open --> closed: Close
|
||
closed --> locked: Lock
|
||
locked --> closed: Unlock
|
||
closed --> open: Open
|
||
</div>
|
||
<h3 id="entity-relationship-model-with-non-default-mermaid-theme">Entity Relationship Model wit' Non-Default Merrrmaid Theme</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">%%</span><span class="p">{</span><span class="nx">init</span><span class="p">:{</span><span class="s">"theme"</span><span class="p">:</span><span class="s">"forest"</span><span class="p">}}</span><span class="o">%%</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">erDiagram</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">CUSTOMER</span> <span class="p">}|..|{</span> <span class="nx">DELIVERY</span><span class="o">-</span><span class="nx">ADDRESS</span> <span class="p">:</span> <span class="nx">has</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">CUSTOMER</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">ORDER</span> <span class="p">:</span> <span class="nx">places</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">CUSTOMER</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">INVOICE</span> <span class="p">:</span> <span class="s">"li'ble for"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">DELIVERY</span><span class="o">-</span><span class="nx">ADDRESS</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">ORDER</span> <span class="p">:</span> <span class="nx">receives</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">INVOICE</span> <span class="o">||--</span><span class="p">|{</span> <span class="nx">ORDER</span> <span class="p">:</span> <span class="nx">covers</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">ORDER</span> <span class="o">||--</span><span class="p">|{</span> <span class="nx">ORDER</span><span class="o">-</span><span class="nx">ITEM</span> <span class="p">:</span> <span class="nx">includes</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">PRODUCT</span><span class="o">-</span><span class="nx">CATEGORY</span> <span class="o">||--</span><span class="p">|{</span> <span class="nx">PRODUCT</span> <span class="p">:</span> <span class="nx">contains</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">PRODUCT</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">ORDER</span><span class="o">-</span><span class="nx">ITEM</span> <span class="p">:</span> <span class="s">"ordered in"</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 class="mermaid align-center zoom">
|
||
%%{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"
|
||
</div>
|
||
<h3 id="user-journey">User Journey</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">journey</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">My</span> <span class="nx">work'n</span> <span class="nx">day</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">Go</span> <span class="nx">t'</span> <span class="nx">work</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Make</span> <span class="nx">tea</span><span class="p">:</span> <span class="mi">5</span><span class="p">:</span> <span class="nx">Me</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Go</span> <span class="nx">upstairs</span><span class="p">:</span> <span class="mi">3</span><span class="p">:</span> <span class="nx">Me</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Do</span> <span class="nx">work</span><span class="p">:</span> <span class="mi">1</span><span class="p">:</span> <span class="nx">Me</span><span class="p">,</span> <span class="nx">Cat</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">Go</span> <span class="nx">home</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Go</span> <span class="nx">downstairs</span><span class="p">:</span> <span class="mi">5</span><span class="p">:</span> <span class="nx">Me</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Sit</span> <span class="nx">down</span><span class="p">:</span> <span class="mi">3</span><span class="p">:</span> <span class="nx">Me</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 class="mermaid align-center zoom">
|
||
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
|
||
</div>
|
||
<h3 id="gantt-chart">GANTT Chart</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">gantt</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">dateFormat</span> <span class="nx">YYYY</span><span class="o">-</span><span class="nx">MM</span><span class="o">-</span><span class="nx">DD</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">Add'n</span> <span class="nx">GANTT</span> <span class="nx">diagram</span> <span class="nx">functionality</span> <span class="nx">t'</span> <span class="nx">Merrrmaid</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">A</span> <span class="nx">section</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Completed</span> <span class="nx">task</span> <span class="p">:</span><span class="nx">done</span><span class="p">,</span> <span class="nx">des1</span><span class="p">,</span> <span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mo">06</span><span class="p">,</span><span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mi">08</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Active</span> <span class="nx">task</span> <span class="p">:</span><span class="nx">active</span><span class="p">,</span> <span class="nx">des2</span><span class="p">,</span> <span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mi">09</span><span class="p">,</span> <span class="mi">3</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Future</span> <span class="nx">task</span> <span class="p">:</span> <span class="nx">des3</span><span class="p">,</span> <span class="nx">after</span> <span class="nx">des2</span><span class="p">,</span> <span class="mi">5</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Future</span> <span class="nx">task2</span> <span class="p">:</span> <span class="nx">des4</span><span class="p">,</span> <span class="nx">after</span> <span class="nx">des3</span><span class="p">,</span> <span class="mi">5</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">Critical</span> <span class="nx">tasks</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Completed</span> <span class="nx">task</span> <span class="nx">'n</span> <span class="nx">th'</span> <span class="nx">critical</span> <span class="nx">line</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="nx">done</span><span class="p">,</span> <span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mo">06</span><span class="p">,</span><span class="mi">24</span><span class="nx">h</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Implement</span> <span class="nx">parser</span> <span class="nx">an'</span> <span class="nx">jison</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="nx">done</span><span class="p">,</span> <span class="nx">after</span> <span class="nx">des1</span><span class="p">,</span> <span class="mi">2</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Create</span> <span class="nx">tests</span> <span class="k">fer</span> <span class="nx">parser</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="nx">active</span><span class="p">,</span> <span class="mi">3</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Future</span> <span class="nx">task</span> <span class="nx">'n</span> <span class="nx">critical</span> <span class="nx">line</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="mi">5</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Create</span> <span class="nx">tests</span> <span class="k">fer</span> <span class="nx">renderer</span> <span class="p">:</span><span class="mi">2</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Add</span> <span class="nx">t'</span> <span class="nx">Merrrmaid</span> <span class="p">:</span><span class="mi">1</span><span class="nx">d</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 class="mermaid align-center zoom">
|
||
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
|
||
</div>
|
||
<h3 id="pie-chart-without-zoom">Pie Chart without Zoom</h3>
|
||
<div class="wrap-code highlight"><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">zoom</span><span class="p">=</span><span class="s">"false"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">pie</span> <span class="nx">title</span> <span class="nx">Pets</span> <span class="nx">adopted</span> <span class="nx">by</span> <span class="nx">volunteers</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"Dogs"</span> <span class="p">:</span> <span class="mi">386</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"Cats"</span> <span class="p">:</span> <span class="mi">85</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"Rats"</span> <span class="p">:</span> <span class="mi">15</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 class="mermaid align-center">
|
||
pie title Pets adopted by volunteers
|
||
"Dogs" : 386
|
||
"Cats" : 85
|
||
"Rats" : 15
|
||
</div>
|
||
<h3 id="quadrant-chart">Quadrant Chart</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">pie</span> <span class="nx">title</span> <span class="nx">Pets</span> <span class="nx">adopted</span> <span class="nx">by</span> <span class="nx">volunteers</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">Reach</span> <span class="nx">an'</span> <span class="nx">engagement</span> <span class="nx">o'</span> <span class="nx">campaigns</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">-</span><span class="nx">axis</span> <span class="nx">Low</span> <span class="nx">Reach</span> <span class="o">--</span><span class="p">></span> <span class="nx">High</span> <span class="nx">Reach</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">y</span><span class="o">-</span><span class="nx">axis</span> <span class="nx">Low</span> <span class="nx">Engagement</span> <span class="o">--</span><span class="p">></span> <span class="nx">High</span> <span class="nx">Engagement</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">quadrant</span><span class="o">-</span><span class="mi">1</span> <span class="nx">We</span> <span class="nx">should</span> <span class="nx">expand</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">quadrant</span><span class="o">-</span><span class="mi">2</span> <span class="nx">Need</span> <span class="nx">t'</span> <span class="nx">promote</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">quadrant</span><span class="o">-</span><span class="mi">3</span> <span class="nx">Re</span><span class="o">-</span><span class="nx">evaluate</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">quadrant</span><span class="o">-</span><span class="mi">4</span> <span class="nx">May</span> <span class="nx">be</span> <span class="nx">improved</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">A</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.3</span><span class="p">,</span> <span class="mf">0.6</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">B</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.45</span><span class="p">,</span> <span class="mf">0.23</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">C</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.57</span><span class="p">,</span> <span class="mf">0.69</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">D</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.78</span><span class="p">,</span> <span class="mf">0.34</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">E</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.40</span><span class="p">,</span> <span class="mf">0.34</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">F</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.35</span><span class="p">,</span> <span class="mf">0.78</span><span class="p">]</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 class="mermaid align-center zoom">
|
||
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]
|
||
</div>
|
||
<h3 id="requirement-diagram">Requirement Diagram</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">requirementDiagram</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">requirement</span> <span class="nx">test_req</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="p">:</span> <span class="mi">1</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">text</span><span class="p">:</span> <span class="nx">th'</span> <span class="nx">test</span> <span class="nx">text</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">risk</span><span class="p">:</span> <span class="nx">high</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">verifymethod</span><span class="p">:</span> <span class="nx">test</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">element</span> <span class="nx">test_entity</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kd">type</span><span class="p">:</span> <span class="nx">simulat'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">test_entity</span> <span class="o">-</span> <span class="nx">satisfies</span> <span class="o">-</span><span class="p">></span> <span class="nx">test_req</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 class="mermaid align-center zoom">
|
||
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
|
||
</div>
|
||
<h3 id="git-graph">Git Graph</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">gitGraph</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">branch</span> <span class="nx">develop</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">checkout</span> <span class="nx">develop</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">checkout</span> <span class="nx">main</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">merge</span> <span class="nx">develop</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</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 class="mermaid align-center zoom">
|
||
gitGraph
|
||
commit
|
||
commit
|
||
branch develop
|
||
checkout develop
|
||
commit
|
||
commit
|
||
checkout main
|
||
merge develop
|
||
commit
|
||
commit
|
||
</div>
|
||
<h3 id="c4-diagrams">C4 Diagrams</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">C4Context</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">System</span> <span class="nx">Context</span> <span class="nx">diagram</span> <span class="k">fer</span> <span class="nx">Internet</span> <span class="nx">Bank'n</span> <span class="nx">System</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Enterprise_Boundary</span><span class="p">(</span><span class="nx">b0</span><span class="p">,</span> <span class="s">"BankBoundary0"</span><span class="p">)</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Person</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="s">"Bank'n Customer A"</span><span class="p">,</span> <span class="s">"A customer o' th' bank, wit' personal bank accounts."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Person</span><span class="p">(</span><span class="nx">customerB</span><span class="p">,</span> <span class="s">"Bank'n Customer B"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Person_Ext</span><span class="p">(</span><span class="nx">customerC</span><span class="p">,</span> <span class="s">"Bank'n Customer C"</span><span class="p">,</span> <span class="s">"desc"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Person</span><span class="p">(</span><span class="nx">customerD</span><span class="p">,</span> <span class="s">"Bank'n Customer D"</span><span class="p">,</span> <span class="s">"A customer o' th' bank, <br/> wit' personal bank accounts."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">System</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="s">"Internet Bank'n System"</span><span class="p">,</span> <span class="s">"Allows customers t' view informat'n about their bank accounts, an' make payments."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Enterprise_Boundary</span><span class="p">(</span><span class="nx">b1</span><span class="p">,</span> <span class="s">"BankBoundary"</span><span class="p">)</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">SystemDb_Ext</span><span class="p">(</span><span class="nx">SystemE</span><span class="p">,</span> <span class="s">"Mainframe Bank'n System"</span><span class="p">,</span> <span class="s">"Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">System_Boundary</span><span class="p">(</span><span class="nx">b2</span><span class="p">,</span> <span class="s">"BankBoundary2"</span><span class="p">)</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">System</span><span class="p">(</span><span class="nx">SystemA</span><span class="p">,</span> <span class="s">"Bank'n System A"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">System</span><span class="p">(</span><span class="nx">SystemB</span><span class="p">,</span> <span class="s">"Bank'n System B"</span><span class="p">,</span> <span class="s">"A system o' th' bank, wit' personal bank accounts. next line."</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></span><span class="line"><span class="cl"> <span class="nf">System_Ext</span><span class="p">(</span><span class="nx">SystemC</span><span class="p">,</span> <span class="s">"E-mail system"</span><span class="p">,</span> <span class="s">"The internal Microsoft Exchange e-mail system."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">SystemDb</span><span class="p">(</span><span class="nx">SystemD</span><span class="p">,</span> <span class="s">"Bank'n System D Database"</span><span class="p">,</span> <span class="s">"A system o' th' bank, wit' personal bank accounts."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Boundary</span><span class="p">(</span><span class="nx">b3</span><span class="p">,</span> <span class="s">"BankBoundary3"</span><span class="p">,</span> <span class="s">"boundary"</span><span class="p">)</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">SystemQueue</span><span class="p">(</span><span class="nx">SystemF</span><span class="p">,</span> <span class="s">"Bank'n System F Queue"</span><span class="p">,</span> <span class="s">"A system o' th' bank."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">SystemQueue_Ext</span><span class="p">(</span><span class="nx">SystemG</span><span class="p">,</span> <span class="s">"Bank'n System G Queue"</span><span class="p">,</span> <span class="s">"A system o' th' bank, wit' personal bank accounts."</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><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">BiRel</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="nx">SystemAA</span><span class="p">,</span> <span class="s">"Uses"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">BiRel</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemE</span><span class="p">,</span> <span class="s">"Uses"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Rel</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemC</span><span class="p">,</span> <span class="s">"Sends e-mails"</span><span class="p">,</span> <span class="s">"SMTP"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Rel</span><span class="p">(</span><span class="nx">SystemC</span><span class="p">,</span> <span class="nx">customerA</span><span class="p">,</span> <span class="s">"Sends e-mails to"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateElementStyle</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="err">$</span><span class="nx">fontColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">,</span> <span class="err">$</span><span class="nx">bgColor</span><span class="p">=</span><span class="s">"grey"</span><span class="p">,</span> <span class="err">$</span><span class="nx">borderColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="nx">SystemAA</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetX</span><span class="p">=</span><span class="s">"5"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemE</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetY</span><span class="p">=</span><span class="s">"-10"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemC</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetY</span><span class="p">=</span><span class="s">"-40"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetX</span><span class="p">=</span><span class="s">"-50"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">SystemC</span><span class="p">,</span> <span class="nx">customerA</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetX</span><span class="p">=</span><span class="s">"-50"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetY</span><span class="p">=</span><span class="s">"20"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateLayoutConfig</span><span class="p">(</span><span class="err">$</span><span class="nx">c4ShapeInRow</span><span class="p">=</span><span class="s">"3"</span><span class="p">,</span> <span class="err">$</span><span class="nx">c4BoundaryInRow</span><span class="p">=</span><span class="s">"1"</span><span class="p">)</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 class="mermaid align-center zoom">
|
||
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")
|
||
</div>
|
||
<h3 id="mindmaps">Mindmaps</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">mindmap</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">root</span><span class="p">((</span><span class="nx">mindmap</span><span class="p">))</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Origins</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Long</span> <span class="nx">history</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">::</span><span class="nf">ay'con</span><span class="p">(</span><span class="nx">fa</span> <span class="nx">fa</span><span class="o">-</span><span class="nx">book</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Popularisat'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">British</span> <span class="nx">popular</span> <span class="nx">psychology</span> <span class="nx">author</span> <span class="nx">Tony</span> <span class="nx">Buzan</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Research</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">On</span> <span class="nx">effectiveness</span><span class="p"><</span><span class="nx">br</span><span class="o">/</span><span class="p">></span><span class="nx">an'</span> <span class="nx">features</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">On</span> <span class="nx">Automatic</span> <span class="nx">creat'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Uses</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Creative</span> <span class="nx">techniques</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Strategic</span> <span class="nx">plann'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Argument</span> <span class="nx">mapp'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Tools</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Pen</span> <span class="nx">an'</span> <span class="nx">paper</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Merrrmaid</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 class="mermaid align-center zoom">
|
||
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
|
||
</div>
|
||
<h3 id="timeline">Timeline</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">timeline</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">History</span> <span class="nx">o'</span> <span class="nx">Social</span> <span class="nx">Media</span> <span class="nx">Platform</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="mi">2002</span> <span class="p">:</span> <span class="nx">LinkedIn</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="mi">2004</span> <span class="p">:</span> <span class="nx">Facebook</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">:</span> <span class="nx">Google</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="mi">2005</span> <span class="p">:</span> <span class="nx">Youtube</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="mi">2006</span> <span class="p">:</span> <span class="nx">Twitter</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 class="mermaid align-center zoom">
|
||
timeline
|
||
title History o' Social Media Platform
|
||
2002 : LinkedIn
|
||
2004 : Facebook
|
||
: Google
|
||
2005 : Youtube
|
||
2006 : Twitter
|
||
</div>
|
||
<h3 id="sankey">Sankey</h3>
|
||
<div class="wrap-code highlight"><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="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">sankey</span><span class="o">-</span><span class="nx">beta</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="o">%%</span> <span class="nx">source</span><span class="p">,</span><span class="nx">target</span><span class="p">,</span><span class="nx">value</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Electricity</span> <span class="nx">grid</span><span class="p">,</span><span class="nx">Over</span> <span class="nx">generat'n</span> <span class="o">/</span> <span class="nx">exports</span><span class="p">,</span><span class="mf">104.453</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Electricity</span> <span class="nx">grid</span><span class="p">,</span><span class="nx">Heat'n</span> <span class="nx">an'</span> <span class="nx">cool'n</span> <span class="o">-</span> <span class="nx">homes</span><span class="p">,</span><span class="mf">113.726</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Electricity</span> <span class="nx">grid</span><span class="p">,</span><span class="nx">H2</span> <span class="nx">conversion</span><span class="p">,</span><span class="mf">27.14</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 class="mermaid align-center zoom">
|
||
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
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</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>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional as well or also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode (positional)</div>
|
||
<div class="tab-nav-text">shortcode (positional)</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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>
|
||
<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>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>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code></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" target="_blank">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>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="../../shortcodes/icon/#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></td>
|
||
<td><em><empty></em></td>
|
||
<td>Arbitrary text t' be displayed 'n box.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="by-severity">By Severity</h3>
|
||
<h4 id="info-with-markup">Ahoi wit' marrrkup</h4>
|
||
<div class="wrap-code highlight"><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">"info"</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">informat'n</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</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">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></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>An <strong>informat'n</strong> disclaimer</p>
|
||
<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" target="_blank">links</a></li>
|
||
<li>etc.</li>
|
||
</ul>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div><blockquote>
|
||
<p>th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work)</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
<h4 id="note">Avast</h4>
|
||
<div class="wrap-code highlight"><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">"note"</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">notice</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 note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
|
||
<p>A <strong>notice</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="tip">Smarrrt Arrrse</h4>
|
||
<div class="wrap-code highlight"><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">"tip"</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">tip</span><span class="o">**</span> <span class="nx">disclaimer</span></span></span></code></pre></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>A <strong>tip</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="warning">Arrr</h4>
|
||
<div class="wrap-code highlight"><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">"warning"</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">warning</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 warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> Arrr</div>
|
||
<div class="box-content">
|
||
|
||
<p>A <strong>warning</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="warning-with-non-default-title-and-icon">Arrr wit' Non-Default Title an' Ay'con</h4>
|
||
<div class="wrap-code highlight"><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">"warning"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Here be dragons"</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></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">warning</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 warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-dragon"></i> Here be dragons</div>
|
||
<div class="box-content">
|
||
|
||
<p>A <strong>warning</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="warning-without-a-title-and-icon">Arrr without a Title an' Ay'con</h4>
|
||
<div class="wrap-code highlight"><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">"warning"</span> <span class="nx">title</span><span class="p">=</span><span class="s">" "</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">" "</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">warning</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 warning">
|
||
<div class="box-label"></div>
|
||
<div class="box-content">
|
||
|
||
<p>A <strong>warning</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="by-brand-colors">By Brand Colors</h3>
|
||
<h4 id="primary-with-title-only">Primary wit' Title only</h4>
|
||
<div class="wrap-code highlight"><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></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>
|
||
<h4 id="secondary-with-icon-only">Secondary wit' Ay'con only</h4>
|
||
<div class="wrap-code highlight"><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">"secondary"</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">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></code></pre></div>
|
||
<div class="box notices cstyle secondary">
|
||
<div class="box-label"><i class="fa-fw fas fa-stopwatch"></i></div>
|
||
<div class="box-content">
|
||
|
||
<p>A <strong>secondary</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="accent">Accent</h4>
|
||
<div class="wrap-code highlight"><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="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 accent">
|
||
<div class="box-label"></div>
|
||
<div class="box-content">
|
||
|
||
<p>An <strong>accent</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="by-color">By Color</h3>
|
||
<h4 id="blue-without-a-title-and-icon">Blue without a Title an' Ay'con</h4>
|
||
<div class="wrap-code highlight"><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="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></code></pre></div>
|
||
<div class="box notices cstyle blue">
|
||
<div class="box-label"></div>
|
||
<div class="box-content">
|
||
|
||
<p>A <strong>blue</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="green-with-title-only">Green wit' Title only</h4>
|
||
<div class="wrap-code highlight"><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">"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></code></pre></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>
|
||
<h4 id="grey-with-icon-only">Grey wit' Ay'con only</h4>
|
||
<div class="wrap-code highlight"><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">"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></code></pre></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>
|
||
<h4 id="orange-with-title-and-icon">Orange wit' Title an' Ay'con</h4>
|
||
<div class="wrap-code highlight"><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">"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></code></pre></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>
|
||
<h4 id="red-without-a-title-and-icon">Red without a Title an' Ay'con</h4>
|
||
<div class="wrap-code highlight"><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">"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 red">
|
||
<div class="box-label"></div>
|
||
<div class="box-content">
|
||
|
||
<p>A <strong>red</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="by-special-color">By Special Color</h3>
|
||
<h4 id="default-with-positional-parameter">Default wit' Positional Parameter</h4>
|
||
<div class="wrap-code highlight"><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="k">default</span> <span class="s">"Pay Attent'n t' this Avast!"</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">Some</span> <span class="nx">serious</span> <span class="nx">informat'n</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> Pay Attent'n t' this Avast!</div>
|
||
<div class="box-content">
|
||
|
||
<p>Some serious informat'n.</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="transparent-with-title-and-icon">Transparent wit' Title an' Ay'con</h4>
|
||
<div class="wrap-code highlight"><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">"transparent"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Pay Attent'n t' this Avast!"</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">Some</span> <span class="nx">serious</span> <span class="nx">informat'n</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 transparent">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Pay Attent'n t' this Avast!</div>
|
||
<div class="box-content">
|
||
|
||
<p>Some serious informat'n.</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="with-user-defined-color-font-awesome-brand-icon-and-markdown-title">Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown Title</h3>
|
||
<div class="wrap-code highlight"><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**"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"fab fa-hackerrank"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Victor</span><span class="err">?</span> <span class="nx">Be</span> <span class="nx">it</span> <span class="nx">ye</span><span class="err">?</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" style="--VARIABLE-BOX-color: fuchsia;">
|
||
<div class="box-label"><i class="fab fa-hackerrank"></i> <strong>Cap'n Hugo</strong></div>
|
||
<div class="box-content">
|
||
|
||
<p>Victor? Be it ye?</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
<h1 id="openapi">OpenAPI</h1>
|
||
|
||
|
||
<p>Th' <code>openapi</code> shortcode uses th' <a href="https://github.com/swagger-api/swagger-ui" target="_blank">Swagger UI</a> library t' display yer OpenAPI / Swagger specificat'ns.</p>
|
||
|
||
<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>This only works 'n modern browsers.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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>
|
||
<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' URL t' th' OpenAPI specificat'n file. This can be relative t' th' URL o' yer plank if it be a leaf or branch bundle.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
|
||
<p>If ye want t' 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="../../basics/configuration/#activate-print-support">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>
|
||
</div>
|
||
</div>
|
||
<h2 id="example">Example</h2>
|
||
<h3 id="using-local-file">Us'n Local File</h3>
|
||
<div class="wrap-code highlight"><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-6f4525cdd6ad0e5a8ec8918f33a6ee86"
|
||
data-openapi-url="../../shortcodes/openapi/petstore.json"
|
||
></div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
<h1 id="siteparam">SiteParam</h1>
|
||
|
||
|
||
<p>Th' <code>siteparam</code> shortcode prints values o' ship params.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional aswell or call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="shortcode-positional"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','shortcode-positional')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode (positional)</div>
|
||
<div class="tab-nav-text">shortcode (positional)</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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-from-configtoml"><code>editURL</code> from <code>config.toml</code></h3>
|
||
<div class="wrap-code highlight"><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/" target="_blank">https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/</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>config.toml</code>:</p>
|
||
<div class="wrap-code highlight"><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="tab-panel" data-tab-group="567e6950887c229465098f4fdd97d8e6">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="configtoml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active"
|
||
onclick="switchTab('567e6950887c229465098f4fdd97d8e6','configtoml')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">config.toml</div>
|
||
<div class="tab-nav-text">config.toml</div>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="configtoml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code highlight"><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 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="s2">"A **nested** parameter <b>with</b> formatting"</span></span></span></code></pre></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap-code highlight"><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> parameter <b>with</b> formatt'n</p>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</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.</p>
|
||
<p>This be especially useful if ye want t' flag yer code example wit' an explicit language.</p>
|
||
<p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="../../shortcodes/tabs/"><code>tabs</code> shortcode</a>.</p>
|
||
|
||
<div class="tab-panel" data-tab-group="c35ea905c6a639188b7e9a4fd2e49689">
|
||
<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"
|
||
onclick="switchTab('c35ea905c6a639188b7e9a4fd2e49689','c')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">c</div>
|
||
<div class="tab-nav-text">c</div>
|
||
</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="wrap-code highlight"><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>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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>
|
||
<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>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>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code></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" target="_blank">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="../../shortcodes/icon/#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="wrap-code highlight"><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="269afdf80a9e61527b8127648cbfcf45">
|
||
<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"
|
||
onclick="switchTab('269afdf80a9e61527b8127648cbfcf45','code')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">Code</div>
|
||
<div class="tab-nav-text">Code</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="c439d4a47e0005abd44f3c945d2afba4">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="emstrongmixedstrongem"
|
||
class="tab-nav-button tab-panel-style cstyle initial active"
|
||
onclick="switchTab('c439d4a47e0005abd44f3c945d2afba4','emstrongmixedstrongem')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
|
||
<div class="tab-nav-text"><em><strong>Mixed</strong></em></div>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="emstrongmixedstrongem"
|
||
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="wrap-code highlight"><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="wrap-code highlight"><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="18f8de3df4ad07e10e64c4e20f0263e4">
|
||
<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"
|
||
onclick="switchTab('18f8de3df4ad07e10e64c4e20f0263e4','just-colored-style')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">just colored style</div>
|
||
<div class="tab-nav-text">just colored style</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="just-color"
|
||
class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
|
||
onclick="switchTab('18f8de3df4ad07e10e64c4e20f0263e4','just-color')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">just color</div>
|
||
<div class="tab-nav-text">just color</div>
|
||
</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('18f8de3df4ad07e10e64c4e20f0263e4','default-style-and-color')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">default style an' color</div>
|
||
<div class="tab-nav-text">default style an' color</div>
|
||
</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('18f8de3df4ad07e10e64c4e20f0263e4','just-severity-stylefa-fw-fas-fa-info-circle')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
|
||
<div class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
|
||
</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('18f8de3df4ad07e10e64c4e20f0263e4','severity-style-and-colorfa-fw-fas-fa-info-circle')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</div>
|
||
<div class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</div>
|
||
</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">
|
||
|
||
</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>
|
||
<p>This comes 'n handy eg. fer provid'n code snippets fer multiple languages.</p>
|
||
<p>If ye just want a single tab ye can instead call th' <a href="../../shortcodes/tab/"><code>tab</code> shortcode</a> standalone.</p>
|
||
|
||
<div class="tab-panel" data-tab-group="98c0822096e41755c001c4ca2d7da06f">
|
||
<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"
|
||
onclick="switchTab('98c0822096e41755c001c4ca2d7da06f','py')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">py</div>
|
||
<div class="tab-nav-text">py</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="sh"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('98c0822096e41755c001c4ca2d7da06f','sh')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">sh</div>
|
||
<div class="tab-nav-text">sh</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="c"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('98c0822096e41755c001c4ca2d7da06f','c')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">c</div>
|
||
<div class="tab-nav-text">c</div>
|
||
</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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span></span></span></code></pre></div></div>
|
||
</div>
|
||
<div
|
||
data-tab-item="sh"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">"Hello World!"</span></span></span></code></pre></div></div>
|
||
</div>
|
||
<div
|
||
data-tab-item="c"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code highlight"><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>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.</p>
|
||
<p>See th' <a href="../../shortcodes/tab/"><code>tab</code> shortcode</a> fer a descript'n o' th' parameter fer nested tabs.</p>
|
||
|
||
<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"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">shortcode</div>
|
||
<div class="tab-nav-text">shortcode</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="partial"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">partial</div>
|
||
<div class="tab-nav-text">partial</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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>
|
||
<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="../../shortcodes/tab/#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="../../shortcodes/tab/#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="../../shortcodes/icon/#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="f0cf65bd90409467a5e0bbe9e41b31ad">
|
||
<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"
|
||
onclick="switchTab('f0cf65bd90409467a5e0bbe9e41b31ad','group-a-tab-view-1')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">Group A, Tab View 1</div>
|
||
<div class="tab-nav-text">Group A, Tab View 1</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="group-a-tab-view-2"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('f0cf65bd90409467a5e0bbe9e41b31ad','group-a-tab-view-2')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">Group A, Tab View 2</div>
|
||
<div class="tab-nav-text">Group A, Tab View 2</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="group-b"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('f0cf65bd90409467a5e0bbe9e41b31ad','group-b')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">Group B</div>
|
||
<div class="tab-nav-text">Group B</div>
|
||
</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="wrap-code highlight"><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="wrap-code highlight"><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="wrap-code highlight"><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"
|
||
onclick="switchTab('tab-example-a','json')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">json</div>
|
||
<div class="tab-nav-text">json</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="emstrongxmlstrongem-stuff"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tab-example-a','emstrongxmlstrongem-stuff')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden"><em><strong>XML</strong></em> stuff</div>
|
||
<div class="tab-nav-text"><em><strong>XML</strong></em> stuff</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="text"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tab-example-a','text')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">text</div>
|
||
<div class="tab-nav-text">text</div>
|
||
</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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">{</span> <span 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="emstrongxmlstrongem-stuff"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code highlight"><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"
|
||
onclick="switchTab('tab-example-a','json')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">json</div>
|
||
<div class="tab-nav-text">json</div>
|
||
</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>
|
||
<div class="tab-nav-hidden">XML stuff</div>
|
||
<div class="tab-nav-text">XML stuff</div>
|
||
</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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">{</span> <span 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="wrap-code highlight"><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"
|
||
onclick="switchTab('tab-example-b','json')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">json</div>
|
||
<div class="tab-nav-text">json</div>
|
||
</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>
|
||
<div class="tab-nav-hidden">XML stuff</div>
|
||
<div class="tab-nav-text">XML stuff</div>
|
||
</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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">{</span> <span 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="wrap-code highlight"><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="../../shortcodes/tab/#parameter"><code>tab</code> shortcode</a> fer poss'ble values.</p>
|
||
<div class="wrap-code highlight"><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"
|
||
onclick="switchTab('main','text')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">Text</div>
|
||
<div class="tab-nav-text">Text</div>
|
||
</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>
|
||
<div class="tab-nav-hidden">Code</div>
|
||
<div class="tab-nav-text">Code</div>
|
||
</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"
|
||
onclick="switchTab('tabs-example-language','python')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">python</div>
|
||
<div class="tab-nav-text">python</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="bash"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tabs-example-language','bash')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">bash</div>
|
||
<div class="tab-nav-text">bash</div>
|
||
</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"
|
||
onclick="switchTab('tabs-example-language','python')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">python</div>
|
||
<div class="tab-nav-text">python</div>
|
||
</span>
|
||
</button>
|
||
<button
|
||
data-tab-item="bash"
|
||
class="tab-nav-button tab-panel-style cstyle initial"
|
||
onclick="switchTab('tabs-example-language','bash')"
|
||
>
|
||
<span>
|
||
<div class="tab-nav-hidden">bash</div>
|
||
<div class="tab-nav-text">bash</div>
|
||
</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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span></span></span></code></pre></div></div>
|
||
</div>
|
||
<div
|
||
data-tab-item="bash"
|
||
class="tab-content tab-panel-style cstyle initial">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">"Hello World!"</span></span></span></code></pre></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<script src="../../js/clipboard.min.js?1695511495" defer></script>
|
||
<script src="../../js/perfect-scrollbar.min.js?1695511495" defer></script>
|
||
<script>
|
||
function useMathJax( config ){
|
||
if( !Object.assign ){
|
||
|
||
return;
|
||
}
|
||
window.MathJax = Object.assign( window.MathJax || {}, {
|
||
loader: {
|
||
load: ['[tex]/mhchem']
|
||
},
|
||
startup: {
|
||
elements: [
|
||
'.math'
|
||
]
|
||
},
|
||
tex: {
|
||
inlineMath: [
|
||
['$', '$'],
|
||
['\\(', '\\)']
|
||
]
|
||
},
|
||
options: {
|
||
enableMenu: false
|
||
}
|
||
}, config );
|
||
}
|
||
useMathJax( JSON.parse("{}") );
|
||
</script>
|
||
<script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1695511495"></script>
|
||
<script src="../../js/d3/d3-color.min.js?1695511495" defer></script>
|
||
<script src="../../js/d3/d3-dispatch.min.js?1695511495" defer></script>
|
||
<script src="../../js/d3/d3-drag.min.js?1695511495" defer></script>
|
||
<script src="../../js/d3/d3-ease.min.js?1695511495" defer></script>
|
||
<script src="../../js/d3/d3-interpolate.min.js?1695511495" defer></script>
|
||
<script src="../../js/d3/d3-selection.min.js?1695511495" defer></script>
|
||
<script src="../../js/d3/d3-timer.min.js?1695511495" defer></script>
|
||
<script src="../../js/d3/d3-transition.min.js?1695511495" defer></script>
|
||
<script src="../../js/d3/d3-zoom.min.js?1695511495" defer></script>
|
||
<script src="../../js/js-yaml.min.js?1695511495" defer></script>
|
||
<script src="../../js/mermaid.min.js?1695511495" defer></script>
|
||
<script>
|
||
window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
|
||
</script>
|
||
<script>window.noZensmooth = true;</script>
|
||
<script src="../../js/swagger-ui/swagger-ui-bundle.js?1695511495" defer></script>
|
||
<script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1695511495" defer></script>
|
||
<script>
|
||
window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1695511495", assetsBuster: 1695511495 };
|
||
</script>
|
||
<script src="../../js/theme.js?1695511495" defer></script>
|
||
</body>
|
||
</html>
|