deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-10-11 07:46:15 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
tabi/blog/shortcodes/index.html
GitHub Actions eaef089e40 Deploy welpo/tabi to welpo/tabi:gh-pages
2025-09-22 21:40:28 +00:00

126 lines
No EOL
54 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

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

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

<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data: 'self';img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self' 'unsafe-inline';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
~/tabi • Custom shortcodes</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=e9648e8ea2820aa9b15b" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered." name=description><meta content="This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered." property=og:description><meta content="Custom shortcodes" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/shortcodes/social_cards/blog_shortcodes.jpg?h=273749fc274ebdcc969d" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/shortcodes/social_cards/blog_shortcodes.jpg?h=273749fc274ebdcc969d" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/shortcodes/ hreflang=es rel=alternate><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/shortcodes/ hreflang=en rel=alternate><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/shortcodes/ hreflang=ca rel=alternate><meta content=https://welpo.github.io/tabi/blog/shortcodes/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><body><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/archive/>archive </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/tags/>tags </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/projects/>projects </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Click or press $SHORTCUT to open search" class="search-icon interactive-icon" title="Click or press $SHORTCUT to open search" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Language selection" title="Language selection" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>English<a aria-label=Español href=https://welpo.github.io/tabi/es/blog/shortcodes/ lang=es role=menuitem>Español</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/shortcodes/ lang=ar role=menuitem>العربية</a><a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/shortcodes/ lang=ca role=menuitem>Català</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Toggle dark mode" title="Toggle dark/light mode" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Reset mode to default" class="theme-resetter arrow" title="Reset mode to default" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content><main><article class=h-entry><h1 class="p-name article-title">Custom shortcodes</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/blog/shortcodes/></a><ul class=meta><li><time class=dt-published datetime=2023-02-19>19th Feb 2023</time><li title="911 words"><span aria-hidden=true class=separator>•</span>5 min read<li class=tag><span aria-hidden=true class=separator>•</span>Tags: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/showcase/>showcase</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/shortcodes/>shortcodes</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-07-26>Updated on 26th Jul 2025</time><li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/shortcodes/index.md>See changes</a></ul><div class=toc-container><h3>Table of Contents</h3><ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#diagram-shortcode>Diagram shortcode</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams>Mermaid diagrams</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#image-shortcodes>Image shortcodes</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#dual-theme-images>Dual theme images</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#invertible-image>Invertible image</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#dimmable-image>Dimmable image</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#swap-image-on-hover>Swap image on hover</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#interactive-image-toggle>Interactive image toggle</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#full-width-image>Full-width image</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#engagement-shortcodes>Engagement shortcodes</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#iine>iine</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#code-shortcodes>Code shortcodes</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path>Show source or path</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#legacy-shortcode-support>Legacy shortcode support</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#text-shortcodes>Text shortcodes</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#aside-side-margin-note>Aside (side/margin note)</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#remote-text>Remote text</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#admonitions>Admonitions</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#multilingual-quotes>Multilingual quotes</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#references-with-hanging-indent>References with hanging indent</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#spoiler>Spoiler</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#containers>Containers</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#wide-container>Wide container</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#force-text-direction>Force text direction</a></ul></ul></div><p class=p-summary hidden>This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered.<section class="e-content body"><h2 id=diagram-shortcode><a aria-label="Anchor link for: diagram-shortcode" class="header-anchor no-hover-padding" href=#diagram-shortcode><span aria-hidden=true class=link-icon></span></a> Diagram shortcode</h2><h3 id=mermaid-diagrams><a aria-label="Anchor link for: mermaid-diagrams" class="header-anchor no-hover-padding" href=#mermaid-diagrams><span aria-hidden=true class=link-icon></span></a> Mermaid diagrams</h3><p><a class=external href=https://github.com/mermaid-js/mermaid>Mermaid</a> is a a diagramming and charting tool that uses text and code to generate diagrams. It supports flowcharts, sequence diagrams, Gantt charts, and more.<p>To include a Mermaid diagram in your post, there are two steps:<ol><li><p>Set <code>mermaid = true</code> in the <code>[extra]</code> section of the front matter of your page, section or <code>config.toml</code>. This will load the JavaScript needed to render the diagrams.</p><li><p>Use the <code>mermaid()</code> shortcode to define your diagram in your posts. For example:</p></ol><pre class="language-txt z-code" data-lang=txt><code class=language-txt data-lang=txt><span class="z-text z-plain">{% mermaid() %}
</span><span class="z-text z-plain">classDiagram
</span><span class="z-text z-plain"> class CognitiveDistortions {
</span><span class="z-text z-plain"> +AllOrNothingThinking()
</span><span class="z-text z-plain"> +Overgeneralization()
</span><span class="z-text z-plain"> +MentalFilter()
</span><span class="z-text z-plain"> +JumpingToConclusions()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class AllOrNothingThinking {
</span><span class="z-text z-plain"> +SeeInExtremes()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class Overgeneralization {
</span><span class="z-text z-plain"> +GeneralizeFromSingle()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class MentalFilter {
</span><span class="z-text z-plain"> +FocusOnNegative()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class JumpingToConclusions {
</span><span class="z-text z-plain"> +MakeAssumptions()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> CognitiveDistortions *-- AllOrNothingThinking
</span><span class="z-text z-plain"> CognitiveDistortions *-- Overgeneralization
</span><span class="z-text z-plain"> CognitiveDistortions *-- MentalFilter
</span><span class="z-text z-plain"> CognitiveDistortions *-- JumpingToConclusions
</span><span class="z-text z-plain">{% end %}
</span></code></pre><p>The diagram will be rendered as follows:</p><noscript><strong>⚠️ JavaScript is required to render the diagram.</strong></noscript><pre class="mermaid invertible-image">
classDiagram
class CognitiveDistortions {
+AllOrNothingThinking()
+Overgeneralization()
+MentalFilter()
+JumpingToConclusions()
}
class AllOrNothingThinking {
+SeeInExtremes()
}
class Overgeneralization {
+GeneralizeFromSingle()
}
class MentalFilter {
+FocusOnNegative()
}
class JumpingToConclusions {
+MakeAssumptions()
}
CognitiveDistortions *-- AllOrNothingThinking
CognitiveDistortions *-- Overgeneralization
CognitiveDistortions *-- MentalFilter
CognitiveDistortions *-- JumpingToConclusions
</pre><p>The Mermaid shortcode supports two parameters:<ul><li><code>invertible</code>: If set to <code>true</code> (default), the diagram will be inverted in dark mode, just like <a href=https://welpo.github.io/tabi/blog/shortcodes/#invertible-image>invertible images</a>.<li><code>full_width</code>: Allows the diagram to take up the width of the header. See <a href=https://welpo.github.io/tabi/blog/shortcodes/#full-width-image>full-width image</a>.</ul><div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>TIP</strong><p>You can use the <a class=external href=https://mermaid.live/>Mermaid Live Editor</a> to create and preview your diagrams.</div></div><h4 id=usage><a aria-label="Anchor link for: usage" class="header-anchor no-hover-padding" href=#usage><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{% mermaid(invertible=true, full_width=false) %}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Your diagram goes here.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">`invertible` or `full_width` can be omitted if default values are used.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h2 id=image-shortcodes><a aria-label="Anchor link for: image-shortcodes" class="header-anchor no-hover-padding" href=#image-shortcodes><span aria-hidden=true class=link-icon></span></a> Image shortcodes</h2><p>All image shortcodes support absolute paths, relative paths, and remote sources in the <code>src</code> parameter.<p>All image shortcodes have these optional parameters:<ul><li><code>raw_path</code>. Defaults to <code>false</code>. If set to <code>true</code>, the <code>src</code> parameter will be used as is. Useful for colocated assets with a custom slug (see <a class=external href=https://github.com/getzola/zola/issues/2598>Zola issue #2598</a>).<li><code>inline</code>. Defaults to <code>false</code>. If set to <code>true</code>, the image will be displayed inline with the text.<li><code>full_width</code>. Defaults to <code>false</code> (see <a href=https://welpo.github.io/tabi/blog/shortcodes/#full-width-image>below</a>)<li><code>lazy_loading</code>. Defaults to <code>true</code>.</ul><h3 id=dual-theme-images><a aria-label="Anchor link for: dual-theme-images" class="header-anchor no-hover-padding" href=#dual-theme-images><span aria-hidden=true class=link-icon></span></a> Dual theme images</h3><p>Useful if you want to use a different image for the light and dark themes:</p><img alt="The Eiffel tower" src="https://welpo.github.io/tabi/blog/shortcodes/img/paris_day.webp?h=5a1805468bf7951aa057" class=img-light height=724 loading=lazy width=1000><img alt="The Eiffel tower" src="https://welpo.github.io/tabi/blog/shortcodes/img/paris_night.webp?h=b70b1f53a9c93453498d" class=img-dark height=724 loading=lazy width=1000><h4 id=usage-1><a aria-label="Anchor link for: usage-1" class="header-anchor no-hover-padding" href=#usage-1><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") }}
</span></code></pre><h3 id=invertible-image><a aria-label="Anchor link for: invertible-image" class="header-anchor no-hover-padding" href=#invertible-image><span aria-hidden=true class=link-icon></span></a> Invertible image</h3><p>Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme.</p><img alt="Invertible graph" src="https://welpo.github.io/tabi/blog/shortcodes/img/graph.webp?h=fe7eeb562206f4e5f344" class=invertible-image height=421 loading=lazy width=523><h4 id=usage-2><a aria-label="Anchor link for: usage-2" class="header-anchor no-hover-padding" href=#usage-2><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{{ invertible_image(src="img/graph.webp", alt="Invertible graph") }}
</span></code></pre><h3 id=dimmable-image><a aria-label="Anchor link for: dimmable-image" class="header-anchor no-hover-padding" href=#dimmable-image><span aria-hidden=true class=link-icon></span></a> Dimmable image</h3><p>Images with too much brightness or contrast can be jarring against a dark background. Here’s an example of a photograph that dims when the dark theme is active.</p><img alt="Photograph of a desert, heavenly sky" src="https://welpo.github.io/tabi/blog/shortcodes/img/desert_by_oskerwyld.webp?h=03c60e3dc47acb9b0cb3" class=dimmable-image height=667 loading=lazy width=1000><h4 id=usage-3><a aria-label="Anchor link for: usage-3" class="header-anchor no-hover-padding" href=#usage-3><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }}
</span></code></pre><h3 id=swap-image-on-hover><a aria-label="Anchor link for: swap-image-on-hover" class="header-anchor no-hover-padding" href=#swap-image-on-hover><span aria-hidden=true class=link-icon></span></a> Swap image on hover</h3><p>Provides an interaction where the image displayed changes as the user hovers over it. Useful for before-after comparisons, for example.<div class=image-hover-container><div class=image-default><img alt="Edited picture" src="https://welpo.github.io/tabi/blog/shortcodes/img/edited.webp?h=5d3c68c93810a66e623b" height=733 loading=lazy width=1100></div><div class=image-hovered><img alt="Original shot" src="https://welpo.github.io/tabi/blog/shortcodes/img/raw.webp?h=682107305171d5e456e8" height=733 loading=lazy width=1100></div></div><h4 id=usage-4><a aria-label="Anchor link for: usage-4" class="header-anchor no-hover-padding" href=#usage-4><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{{ image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Edited picture", hovered_alt="Original shot") }}
</span></code></pre><h3 id=interactive-image-toggle><a aria-label="Anchor link for: interactive-image-toggle" class="header-anchor no-hover-padding" href=#interactive-image-toggle><span aria-hidden=true class=link-icon></span></a> Interactive image toggle</h3><p>Display an image and switch to a different one on click. Ideal for highlighting differences or drawing attention to details.<div class=image-toggler-container><input class=image-toggler-toggle id=toggle-img-800 type=checkbox><label class=image-label for=toggle-img-800><div class=image-default><img alt="Mojave during the day" src="https://welpo.github.io/tabi/blog/shortcodes/img/mojave_day.webp?h=5d715fd2fa70503e1c06" height=675 loading=lazy width=1200></div> <div class=image-toggled><img alt="Mojave at night" src="https://welpo.github.io/tabi/blog/shortcodes/img/mojave_night.webp?h=e9280e1080048e8be9e7" height=675 loading=lazy width=1200></div></label></div><h4 id=usage-5><a aria-label="Anchor link for: usage-5" class="header-anchor no-hover-padding" href=#usage-5><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") }}
</span></code></pre><h3 id=full-width-image><a aria-label="Anchor link for: full-width-image" class="header-anchor no-hover-padding" href=#full-width-image><span aria-hidden=true class=link-icon></span></a> Full-width image</h3><p>The image will expand to match the width of the header, which is usually wider than the article text (except on mobile/small windows).<p>All other image shortcodes can be made into full-width by setting the optional parameter <code>full_width</code> to <code>true</code>.<div class=full-width><img alt="Photograph of a canal in Amsterdam" src="https://welpo.github.io/tabi/blog/shortcodes/img/amsterdam_by_oskerwyld.webp?h=064fe48dc92ff858bc05" height=795 loading=lazy width=1500></div><h4 id=usage-6><a aria-label="Anchor link for: usage-6" class="header-anchor no-hover-padding" href=#usage-6><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }}
</span></code></pre><h2 id=engagement-shortcodes><a aria-label="Anchor link for: engagement-shortcodes" class="header-anchor no-hover-padding" href=#engagement-shortcodes><span aria-hidden=true class=link-icon></span></a> Engagement shortcodes</h2><h3 id=iine><a aria-label="Anchor link for: iine" class="header-anchor no-hover-padding" href=#iine><span aria-hidden=true class=link-icon></span></a> iine</h3><aside><p>To add it to all posts, set <code>iine = true</code> in the <code>[extra]</code> section of your <code>config.toml</code>.</aside><p>This shortcode allows you to add extra <a class=external href=https://iine.to>iine.to</a> buttons to your posts, like this:<form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/shortcodes/demo-button><button aria-label="Like this post" title="Like this post" class=iine-button data-icon=heart data-slug=/blog/shortcodes/demo-button>♥️</button></form><h4 id=usage-7><a aria-label="Anchor link for: usage-7" class="header-anchor no-hover-padding" href=#usage-7><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{{ iine(icon="heart", slug="/post/my-post-slug/like", label="Like this post") }}
</span></code></pre><p>The shortcode takes the following optional parameters:<ul><li><code>icon</code>: The icon to display. Can be <code>heart</code>, <code>thumbs_up</code>, <code>upvote</code>, or any emoji.<li><code>slug</code>: A unique identifier. Defaults to the current page’s path. Useful if you want more than one button on the same page.<li><code>label</code>: The accessibility label for the button. Defaults to “Like this post”.</ul><h2 id=code-shortcodes><a aria-label="Anchor link for: code-shortcodes" class="header-anchor no-hover-padding" href=#code-shortcodes><span aria-hidden=true class=link-icon></span></a> Code shortcodes</h2><h3 id=show-source-or-path><a aria-label="Anchor link for: show-source-or-path" class="header-anchor no-hover-padding" href=#show-source-or-path><span aria-hidden=true class=link-icon></span></a> Show source or path</h3><p>You can display a path or URL for a code block using Zola’s native syntax:<aside><p>Requires Zola 0.20.0 or later.</aside><pre class=z-code><code><span class="z-text z-plain">```rust,name=src/main.rs
</span><span class="z-text z-plain">fn main() {
</span><span class="z-text z-plain"> println!("Hello, world!");
</span><span class="z-text z-plain">}
</span><span class="z-text z-plain">```
</span></code></pre><p>This renders:<pre class="language-rust z-code" data-lang=rust data-name=src/main.rs><code class=language-rust data-lang=rust data-name=src/main.rs><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-function z-rust"><span class="z-storage z-type z-function z-rust">fn</span> </span><span class="z-entity z-name z-function z-rust">main</span></span><span class="z-meta z-function z-rust"><span class="z-meta z-function z-parameters z-rust"><span class="z-punctuation z-section z-parameters z-begin z-rust">(</span></span><span class="z-meta z-function z-rust"><span class="z-meta z-function z-parameters z-rust"><span class="z-punctuation z-section z-parameters z-end z-rust">)</span></span></span></span><span class="z-meta z-function z-rust"> </span><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"><span class="z-punctuation z-section z-block z-begin z-rust">{</span>
</span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"> <span class="z-support z-macro z-rust">println!</span><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">(</span></span><span class="z-meta z-group z-rust"><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">"</span>Hello, world!<span class="z-punctuation z-definition z-string z-end z-rust">"</span></span></span><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-end z-rust">)</span></span><span class="z-punctuation z-terminator z-rust">;</span>
</span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"></span><span class="z-meta z-block z-rust"><span class="z-punctuation z-section z-block z-end z-rust">}</span></span></span>
</span></code></pre><p>If you set the <code>name</code> to a URL (i.e. it starts with <code>http</code> or <code>https</code>), you can turn it into a clickable link. This is particularly useful when used in conjunction with the <a href=https://welpo.github.io/tabi/blog/shortcodes/#remote-text>remote text shortcode</a>.<div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>JavaScript required</strong><p>The clickable URL feature requires JavaScript. To enable it, set <code>code_block_name_links = true</code> on the <code>[extra]</code> section of your page, section, or <code>config.toml</code>.</div></div><pre class="language-.gitignore z-code" data-lang=.gitignore data-name=https://github.com/welpo/doteki/blob/main/.gitignore><code class=language-.gitignore data-lang=.gitignore data-name=https://github.com/welpo/doteki/blob/main/.gitignore><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">__pycache__</span></span><span class="z-keyword z-operator z-genconfig">/</span>
</span><span class="z-source z-genconfig"><span class="z-keyword z-operator z-genconfig">*</span>coverage<span class="z-keyword z-operator z-genconfig">*</span>
</span><span class="z-source z-genconfig"><span class="z-keyword z-operator z-genconfig">.</span>vscode<span class="z-keyword z-operator z-genconfig">/</span>
</span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">dist</span></span><span class="z-keyword z-operator z-genconfig">/</span>
</span></code></pre><h3 id=legacy-shortcode-support><a aria-label="Anchor link for: legacy-shortcode-support" class="header-anchor no-hover-padding" href=#legacy-shortcode-support><span aria-hidden=true class=link-icon></span></a> Legacy shortcode support</h3><p>The <code>add_src_to_code_block</code> shortcode is still supported for backward compatibility but will be deprecated in a future release. Please use Zola’s native syntax shown above instead:<pre class=z-code><code><span class="z-text z-plain"># Old way (deprecated):
</span><span class="z-text z-plain">{{ add_src_to_code_block(src="path/to/file.rs") }}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain"># New way (preferred):
</span><span class="z-text z-plain">```rust,name=path/to/file.rs
</span></code></pre><h2 id=text-shortcodes><a aria-label="Anchor link for: text-shortcodes" class="header-anchor no-hover-padding" href=#text-shortcodes><span aria-hidden=true class=link-icon></span></a> Text shortcodes</h2><h3 id=aside-side-margin-note><a aria-label="Anchor link for: aside-side-margin-note" class="header-anchor no-hover-padding" href=#aside-side-margin-note><span aria-hidden=true class=link-icon></span></a> Aside (side/margin note)</h3><p>Add supplementary content in the margins on wide screens, or as distinct blocks on mobile.<aside><p><em>Sidenote</em> comes from Latin <em>nota</em> (‘mark’) + Old English <em>síde</em> (‘side’).</aside><p>The shortcode accepts two parameters:<ul><li><code>position</code>: Set to <code>"right"</code> to place in right margin (defaults to left)<li>Content can be provided via <code>text</code> parameter or between shortcode tags</ul><h4 id=usage-8><a aria-label="Anchor link for: usage-8" class="header-anchor no-hover-padding" href=#usage-8><span aria-hidden=true class=link-icon></span></a> Usage</h4><div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>WARNING</strong><p>Place the aside shortcode on its own line to prevent formatting issues.</div></div><p>Using the <code>text</code> parameter:<pre class=z-code><code><span class="z-text z-plain">{{ aside(text="*Sidenote* comes from Latin *nota* ('mark') + Old English *síde* ('side').") }}
</span></code></pre><p>Using the content body and setting the position to right:<pre class=z-code><code><span class="z-text z-plain">{% aside(position="right") %}
</span><span class="z-text z-plain">A longer note that
</span><span class="z-text z-plain">can span multiple lines.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">_Markdown_ is supported.
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h3 id=remote-text><a aria-label="Anchor link for: remote-text" class="header-anchor no-hover-padding" href=#remote-text><span aria-hidden=true class=link-icon></span></a> Remote text</h3><p>Embed text from a remote URL or a local file. To display the path or URL on the code block, see the <a href=https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path>show source or path shortcode</a>.<p>The shortcode accepts three parameters:<ul><li><code>src</code>: The source URL or file path (required)<li><code>start</code>: First line to display (optional, starts at 1)<li><code>end</code>: The ending line number (optional, defaults to 0, meaning the last line)</ul><div class="admonition info"><div class="admonition-icon admonition-icon-info"></div><div class=admonition-content><strong class=admonition-title>INFO</strong><p><code>start</code> and <code>end</code> are inclusive. <code>start=3, end=3</code> will display only the third line.</div></div><p><strong>Important</strong>:<ul><li><strong>Remote VS local files</strong>: If <code>src</code> starts with “http”, it will be treated as a remote file. Otherwise, it assumes a local file path.<li><strong>Files access</strong>: As it uses Zola’s <a class=external href=https://www.getzola.org/documentation/templates/overview/#load-data><code>load_data</code></a>, local files must be inside the Zola directory—see <a class=external href=https://www.getzola.org/documentation/templates/overview/#file-searching-logic>File searching logic</a>. As of <a class=external href=https://github.com/welpo/tabi/releases/tag/v2.16.0>tabi 2.16.0</a>, the shortcode supports both relative and absolute paths.<li><strong>Code block formatting</strong>: To display the text as a code block, you must manually add the Markdown code fences (backticks) and, optionally, specify the programming language for syntax highlighting.</ul><h4 id=usage-9><a aria-label="Anchor link for: usage-9" class="header-anchor no-hover-padding" href=#usage-9><span aria-hidden=true class=link-icon></span></a> Usage</h4><p>Embedding a remote Python script within a code block with syntax highlighting:<pre class=z-code><code><span class="z-text z-plain">```python
</span><span class="z-text z-plain">{{ remote_text(src="https://example.com/script.py") }}
</span><span class="z-text z-plain">```
</span></code></pre><p>Displaying text from a local file:<pre class=z-code><code><span class="z-text z-plain">{{ remote_text(src="path/to/file.txt") }}
</span></code></pre><p>Display lines 3 to 7 (both inclusive) of a local file:<pre class=z-code><code><span class="z-text z-plain">{{ remote_text(src="path/to/file.txt", start=3, end=7) }}
</span></code></pre><h3 id=admonitions><a aria-label="Anchor link for: admonitions" class="header-anchor no-hover-padding" href=#admonitions><span aria-hidden=true class=link-icon></span></a> Admonitions</h3><p>Bring attention to information with these admonition shortcodes. They come in five <code>type</code>s: <code>note</code>, <code>tip</code>, <code>info</code>, <code>warning</code>, and <code>danger</code>.<div class="admonition note"><div class="admonition-icon admonition-icon-note"></div><div class=admonition-content><strong class=admonition-title>NOTE</strong><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>. Check <a href=#>this <code>api</code></a>.</div></div><div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>TIP</strong><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>. Check <a href=#>this <code>api</code></a>.</div></div><div class="admonition info"><div class="admonition-icon admonition-icon-info"></div><div class=admonition-content><strong class=admonition-title>INFO</strong><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>. Check <a href=#>this <code>api</code></a>.</div></div><div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>WARNING</strong><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>. Check <a href=#>this <code>api</code></a>.</div></div><div class="admonition danger"><div class="admonition-icon admonition-icon-danger"></div><div class=admonition-content><strong class=admonition-title>DANGER</strong><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>. Check <a href=#>this <code>api</code></a>.</div></div><p>You can change the <code>title</code> and <code>icon</code> of the admonition. Both parameters take a string and default to the type of admonition. <code>icon</code> can be any of the available admonition types.<div class="admonition note"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>Custom title and icon</strong><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>. Check <a href=#>this <code>api</code></a>.</div></div><h4 id=usage-10><a aria-label="Anchor link for: usage-10" class="header-anchor no-hover-padding" href=#usage-10><span aria-hidden=true class=link-icon></span></a> Usage</h4><p>You can use admonitions in two ways:<ol><li>Inline with parameters:</ol><pre class="language-md z-code" data-lang=md><code class=language-md data-lang=md><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">{{ admonition(type="danger", icon="tip", title="An important tip", text="Stay hydrated<span class="z-markup z-strikethrough z-markdown-gfm"><span class="z-punctuation z-definition z-strikethrough z-begin z-markdown">~</span>") }}
</span></span></span></code></pre><ol start=2><li>With a content body:</ol><pre class="language-md z-code" data-lang=md><code class=language-md data-lang=md><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">{% admonition(type="danger", icon="tip", title="An important tip") %}
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">Stay hydrated~
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">This method is particularly useful for longer content or multiple paragraphs.
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">{% end %}
</span></span></code></pre><p>Both methods support the same parameters (<code>type</code>, <code>icon</code>, and <code>title</code>), with the content either passed as the <code>text</code> parameter or as the body between tags.<h3 id=multilingual-quotes><a aria-label="Anchor link for: multilingual-quotes" class="header-anchor no-hover-padding" href=#multilingual-quotes><span aria-hidden=true class=link-icon></span></a> Multilingual quotes</h3><p>This shortcode allows you to display both the translated and original text for a quote. The quotation marks will be added automatically:<div class=quote-container><input class=quote-toggle id=toggle-5313 type=checkbox><div class=quote><div class=translated><blockquote><p>“What tranquillity, to go through life in silence, greeting only friends.”<p>— Francisco Umbral <label class="quote-label quote-label-original" for=toggle-5313>(Show original quote)</label></blockquote></div><div class=original><blockquote><p>“Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.”<p>— Francisco Umbral <label class="quote-label quote-label-translate" for=toggle-5313>(Show translation)</label></blockquote></div></div></div><h4 id=usage-11><a aria-label="Anchor link for: usage-11" class="header-anchor no-hover-padding" href=#usage-11><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{{ multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquillity, to go through life in silence, greeting only friends.", author="Francisco Umbral") }}
</span></code></pre><h3 id=references-with-hanging-indent><a aria-label="Anchor link for: references-with-hanging-indent" class="header-anchor no-hover-padding" href=#references-with-hanging-indent><span aria-hidden=true class=link-icon></span></a> References with hanging indent</h3><p>This shortcode formats a reference section with a hanging indent like so:<div class=references><p>Alderson, E. (2015). Cybersecurity and Social Justice: A Critique of Corporate Hegemony in a Digital World. <em>New York Journal of Technology, 11</em>(2), 24-39. <a class=external href=https://doi.org/10.1007/s10198-022-01497-6>https://doi.org/10.1007/s10198-022-01497-6</a>.<p>Funkhouser, M. (2012). The Social Norms of Indecency: An Analysis of Deviant Behavior in Contemporary Society. <em>Los Angeles Journal of Sociology, 16</em>(3), 41-58. <a class=external href=https://doi.org/10.1093/jmp/jhx037>https://doi.org/10.1093/jmp/jhx037</a>.<p>Schrute, D. (2005). The Beet Farming Revolution: An Analysis of Agricultural Innovation. <em>Scranton Agricultural Quarterly, 38</em>(3), 67-81.<p>Steinbrenner, G. (1997). The Cost-Benefit Analysis of George Costanza: An Examination of Risk-Taking Behavior in the Workplace. <em>New York Journal of Business, 12</em>(4), 112-125.<p>Winger, J. A. (2010). The Art of Debate: An Examination of Rhetoric in Greendale Community College’s Model United Nations. <em>Colorado Journal of Communication Studies, 19</em>(2), 73-86. <a class=external href=https://doi.org/10.1093/6seaons/1movie>https://doi.org/10.1093/6seaons/1movie</a>.</div><h4 id=usage-12><a aria-label="Anchor link for: usage-12" class="header-anchor no-hover-padding" href=#usage-12><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{% references() %}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Your references go here.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Each in a new line. Markdown (links, italics…) will be rendered.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h3 id=spoiler><a aria-label="Anchor link for: spoiler" class="header-anchor no-hover-padding" href=#spoiler><span aria-hidden=true class=link-icon></span></a> Spoiler</h3><p>This shortcode allows you to blur text until the user clicks on it. Like this: Goldfish have a memory span of a few <label class=spoiler-container><input aria-pressed=false class=spoiler-toggle id=spoiler-61012 role=button type=checkbox> <span title="reveal spoiler" class=spoiler-content tabindex=0> <span class=spoiler-hidden>months. Yes, <a class=external href=https://en.wikipedia.org/wiki/Goldfish#Cognitive_abilities>really</a>. </span> </span></label><p>As you can see, Markdown is rendered. You can even add newlines with <code>&lt;br></code>.<p>This shortcode has the optional flag <code>fixed_blur</code> to blur a fixed placeholder (“SPOILER”), instead of blurring the actual contents. Like this: it is <label class="spoiler-container fixed-blur"><input aria-pressed=false class=spoiler-toggle id=spoiler-68929 role=button type=checkbox> <span title="reveal spoiler" class=spoiler-content tabindex=0> <span class=spoiler-hidden>not necessary </span> </span></label> to wait 24 hours before filing a missing person report.<h4 id=usage-13><a aria-label="Anchor link for: usage-13" class="header-anchor no-hover-padding" href=#usage-13><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{{ spoiler(text="text to hide", fixed_blur=false) }}
</span></code></pre><h2 id=containers><a aria-label="Anchor link for: containers" class="header-anchor no-hover-padding" href=#containers><span aria-hidden=true class=link-icon></span></a> Containers</h2><h3 id=wide-container><a aria-label="Anchor link for: wide-container" class="header-anchor no-hover-padding" href=#wide-container><span aria-hidden=true class=link-icon></span></a> Wide container</h3><p>Use this shortcode if you want to have a wider table, paragraph, code block… On desktop, it will take up the width of the header. It will have no effect on mobile, except for tables, which will get a horizontal scroll.<div class=full-width><table><thead><tr><th>Title<th>Year<th>Director<th>Cinematographer<th>Genre<th>IMDb<th>Duration<tbody><tr><td>Beoning<td>2018<td>Lee Chang-dong<td>Hong Kyung-pyo<td>Drama/Mystery<td>7.5<td>148 min<tr><td>The Master<td>2012<td>Paul Thomas Anderson<td>Mihai Mălaimare Jr.<td>Drama/History<td>7.1<td>137 min<tr><td>The Tree of Life<td>2011<td>Terrence Malick<td>Emmanuel Lubezki<td>Drama<td>6.8<td>139 min</table></div><h4 id=usage-14><a aria-label="Anchor link for: usage-14" class="header-anchor no-hover-padding" href=#usage-14><span aria-hidden=true class=link-icon></span></a> Usage</h4><pre class=z-code><code><span class="z-text z-plain">{% wide_container() %}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Place your code block, paragraph, table… here.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Markdown will of course be rendered.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h3 id=force-text-direction><a aria-label="Anchor link for: force-text-direction" class="header-anchor no-hover-padding" href=#force-text-direction><span aria-hidden=true class=link-icon></span></a> Force text direction</h3><p>Force the text direction of a content block. Overrides both the global <code>force_codeblock_ltr</code> setting and the document’s overall direction.<p>Accepts the parameter <code>direction</code>: the desired text direction. This can be either “ltr” (left-to-right) or “rtl” (right-to-left). Defaults to “ltr”.<div data-force-text-direction=rtl><pre class="language-python z-code" data-lang=python><code class=language-python data-lang=python><span class="z-source z-python"><span class="z-meta z-function z-python"><span class="z-storage z-type z-function z-python"><span class="z-keyword z-declaration z-function z-python">def</span></span> <span class="z-entity z-name z-function z-python"><span class="z-meta z-generic-name z-python">مرحبا_بالعالم</span></span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-begin z-python">(</span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-end z-python">)</span></span><span class="z-meta z-function z-python"><span class="z-punctuation z-section z-function z-begin z-python">:</span></span>
</span><span class="z-source z-python"> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-support z-function z-builtin z-python">print</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python"><span class="z-punctuation z-definition z-string z-begin z-python">"</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python">مرحبا بالعالم!<span class="z-punctuation z-definition z-string z-end z-python">"</span></span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span>
</span></code></pre></div><h4 id=usage-15><a aria-label="Anchor link for: usage-15" class="header-anchor no-hover-padding" href=#usage-15><span aria-hidden=true class=link-icon></span></a> Usage</h4><p>In a LTR page we can force a code block to be RTL (as shown above) like so:<pre class=z-code><code><span class="z-text z-plain">{% force_text_direction(direction="rtl") %}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">```python
</span><span class="z-text z-plain">def مرحبا_بالعالم():
</span><span class="z-text z-plain"> print("مرحبا بالعالم!")
</span><span class="z-text z-plain">```
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre></section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/shortcodes/><button aria-label="Like this post" title="Like this post" class=iine-button data-icon=thumbs_up data-slug=/blog/shortcodes/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Next href=https://welpo.github.io/tabi/blog/security/><span class=arrow>←</span> Next</a><p aria-hidden=true id=left_title>Secure by default</div><div><a aria-describedby=right_title aria-label=Prev href=https://welpo.github.io/tabi/blog/markdown/>Prev <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Markdown examples</div></nav></article></main><div id=button-container><div id=toc-floating-container><input class=toggle id=toc-toggle type=checkbox><label class=overlay for=toc-toggle></label><label title="Toggle Table of Contents" class=button for=toc-toggle id=toc-button><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg></label><div class=toc-content><div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#diagram-shortcode>Diagram shortcode</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams>Mermaid diagrams</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#image-shortcodes>Image shortcodes</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#dual-theme-images>Dual theme images</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#invertible-image>Invertible image</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#dimmable-image>Dimmable image</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#swap-image-on-hover>Swap image on hover</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#interactive-image-toggle>Interactive image toggle</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#full-width-image>Full-width image</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#engagement-shortcodes>Engagement shortcodes</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#iine>iine</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#code-shortcodes>Code shortcodes</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path>Show source or path</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#legacy-shortcode-support>Legacy shortcode support</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#text-shortcodes>Text shortcodes</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#aside-side-margin-note>Aside (side/margin note)</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#remote-text>Remote text</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#admonitions>Admonitions</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#multilingual-quotes>Multilingual quotes</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#references-with-hanging-indent>References with hanging indent</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#spoiler>Spoiler</a></ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#containers>Containers</a> <ul><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#wide-container>Wide container</a><li><a href=https://welpo.github.io/tabi/blog/shortcodes/#force-text-direction>Force text direction</a></ul></ul></div></div></div><a title="Go to the top of the page" class=no-hover-padding href=# id=top-button> <svg viewbox="0 0 20 20" fill=currentColor><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg> </a></div><script defer src=https://welpo.github.io/tabi/js/mermaid.min.js></script><span class=hidden id=copy-success> Copied! </span><span class=hidden id=copy-init> Copy code to clipboard </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://welpo.github.io/tabi/js/codeBlockNameLinks.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/about/> about </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/privacy/> privacy policy </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> site statistics </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> sitemap </a></ul> </small></nav><div class=credits><small> Powered by <a href=https://www.getzola.org>Zola</a> & <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Site source </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Search</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Search… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Clear search" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No results</span><span id=one_results> $NUMBER result</span><span id=many_results> $NUMBER results</span><span id=two_results> $NUMBER results</span><span id=few_results> $NUMBER results</span></div><div id=results role=listbox></div></div></div></div></footer>
Reference in a new issue View git blame Copy permalink