"><linkrel=canonicalhref=https://jpanther.github.io/congo/docs/shortcodes/><linkrel=apple-touch-iconsizes=180x180href=/congo/apple-touch-icon.png><linkrel=icontype=image/pngsizes=32x32href=/congo/favicon-32x32.png><linkrel=icontype=image/pngsizes=16x16href=/congo/favicon-16x16.png><linkrel=manifesthref=/congo/site.webmanifest><metaname=theme-colorcontent="rgb(255,255,255)"><metaproperty="og:title"content="Shortcodes"><metaproperty="og:description"content="All the shortcodes available in Congo."><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://jpanther.github.io/congo/docs/shortcodes/"><metaproperty="article:section"content="docs"><metaproperty="article:published_time"content="2020-08-11T00:00:00+00:00"><metaproperty="article:modified_time"content="2020-08-11T00:00:00+00:00"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Shortcodes"><metaname=twitter:descriptioncontent="All the shortcodes available in Congo."><scripttype=application/ld+json>{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Shortcodes","headline":"Shortcodes","description":"All the shortcodes available in Congo.","abstract":"Congo includes several shortcodes for adding rich content to articles including images, charts, diagrams, buttons and more.","inLanguage":"en-AU","url":"https:\/\/jpanther.github.io\/congo\/docs\/shortcodes\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-11T00:00:00\u002b00:00","datePublished":"2020-08-11T00:00:00\u002b00:00","dateModified":"2020-08-11T00:00:00\u002b00:00","keywords":["shortcodes","mermaid","icon","lead","docs"],"mainEntityOfPage":"true","wordCount":"980"}</script><metaname=authorcontent="Congo"><linkhref=https://twitter.com/rel=me><linkhref=https://facebook.com/rel=me><linkhref=https://linkedin.com/rel=me><linkhref=https://youtube.com/rel=me><scriptdefertype=text/javascriptsrc=/congo/js/mermaid.bundle.ba5a7b7ab45b71df4dda4452744f0b2eaa9aee7c1442206859236fa84fa4cdcdc94be0e8e1de5a77f6c48c21c001434625add6c65793c3e8ba3e60ba606b67ad.jsintegrity="sha512-ulp7erRbcd9N2kRSdE8LLqqa7nwUQiBoWSNvqE+kzc3JS+Do4d5ad/bEjCHAAUNGJa3WxleTw+i6PmC6YGtnrQ=="></script>
<spanclass=mb-[2px]><ahref=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/shortcodes/index.mdclass="text-lg hover:text-primary-500"rel="noopener noreferrer"target=_blanktitle="Edit content"><spanclass="relative inline-block align-text-bottom px-1 icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></svg></span></a></span></div></div></header><sectionclass="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><divclass="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8"><divclass="toc pe-5 print:hidden lg:sticky lg:top-10"><detailsopenclass="-ms-5 mt-0 overflow-hidden rounded-lg ps-5"><summaryclass="-ms-5 block cursor-pointer bg-neutral-100 py-1 ps-5 text-lg font-semibold text-neutral-800 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><divclass="-ms-5 border-s border-dotted border-neutral-300 py-2 ps-5 dark:border-neutral-600"><navid=TableOfContents><ul><li><ahref=#alert>Alert</a></li><li><ahref=#badge>Badge</a></li><li><ahref=#button>Button</a></li><li><ahref=#chart>Chart</a></li><li><ahref=#figure>Figure</a></li><li><ahref=#icon>Icon</a></li><li><ahref=#katex>Katex</a></li><li><ahref=#lead>Lead</a></li><li><ahref=#mermaid>Mermaid</a></li></ul></nav></div></details></div></div><divclass="min-w-0 min-h-0 max-w-prose grow"><p>In addition to all the <ahref=https://gohugo.io/content-management/shortcodes/target=_blankrel="noreferrer noopener">default Hugo shortcodes</a>, Congo adds a few extras for additional functionality.</p><h2id=alertclass="relative group">Alert <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#alertaria-label=Anchor>#</a></span></h2><p><code>alert</code> outputs its contents as a stylised message box within your article. It’s useful for drawing attention to important information that you don’t want the reader to miss.</p><p>The input is written in Markdown so you can format it however you please.</p><p>By default, the alert is presented with an exclaimation triangle icon. To change the icon, include the icon name in the shortcode. Check out the <ahref=#icon>icon shortcode</a> for more details on using icons.</p><p><strong>Example:</strong></p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-mddata-lang=md><spanclass=line><spanclass=cl>{{<spanclass=p><</span><spanclass=nt>alert</span><spanclass=p>></span>}}
</span></span><spanclass=line><spanclass=cl>Don't forget to [<spanclass=nt>follow me</span>](<spanclass=na>https://twitter.com/jpanther</span>) on Twitter.
</span></span></code></pre></div><spanclass=flex><spanclass="ms-1 rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">New article!</span></span><h2id=buttonclass="relative group">Button <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#buttonaria-label=Anchor>#</a></span></h2><p><code>button</code> outputs a styled button component which can be used to highlight a primary action. It has three optional parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>href</code></td><td>The URL that the button should link to.</td></tr><tr><td><code>target</code></td><td>The target of the link.</td></tr><tr><td><code>download</code></td><td>Whether browser should download the resource rather than navigate to the URL. The value of this parameter will be the name of the downloaded file.</td></tr></tbody></table><p><strong>Example:</strong></p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-mddata-lang=md><spanclass=line><spanclass=cl>{{<spanclass=p><</span><spanclass=nt>button</span><spanclass=na>href</span><spanclass=o>=</span><spanclass=s>"#button"</span><spanclass=na>target</span><spanclass=o>=</span><spanclass=s>"_self"</span><spanclass=p>></span>}}
</span></span></code></pre></div><aclass="inline-block !rounded-md bg-primary-600 px-4 py-1 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"href=#buttontarget=_selfrole=button>Call to action</a><h2id=chartclass="relative group">Chart <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#chartaria-label=Anchor>#</a></span></h2><p><code>chart</code> uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of <ahref=https://www.chartjs.org/docs/latest/samples/target=_blankrel="noreferrer noopener">different chart styles</a> and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest.</p><p>Refer to the <ahref=https://www.chartjs.org/docs/latest/general/target=_blankrel="noreferrer noopener">official Chart.js docs</a> for details on syntax and supported chart types.</p><p><strong>Example:</strong></p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-jsdata-lang=js><spanclass=line><spanclass=cl><spanclass=p>{{</span><spanclass=o><</span><spanclass=nx>chart</span><spanclass=o>></span><spanclass=p>}}</span>
</span></span><spanclass=line><spanclass=cl><spanclass=nx>label</span><spanclass=o>:</span><spanclass=s1>'# of votes'</span><spanclass=p>,</span>
<scripttype=text/javascript>window.addEventListener("DOMContentLoaded",e=>{constt=document.getElementById("584639172"),n=newChart(t,{type:"bar",data:{labels:["Tomato","Blueberry","Banana","Lime","Orange"],datasets:[{label:"# of votes",data:[12,19,3,5,3]}]}})})</script></div><p>You can see some additional Chart.js examples on the <ahref=https://jpanther.github.io/congo/samples/charts/>charts samples</a> page.</p><h2id=figureclass="relative group">Figure <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#figurearia-label=Anchor>#</a></span></h2><p>Congo includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p><p>When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.</p><p>The <code>figure</code> shortcode accepts six parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>src</code></td><td><strong>Required.</strong> The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a <ahref=https://gohugo.io/content-management/page-resources/target=_blankrel="noreferrer noopener">page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><ahref=https://moz.com/learn/seo/alt-texttarget=_blankrel="noreferrer noopener">Alternative text description</a> for the image.</td></tr><tr><td><code>caption</code></td><td>Markdown for the image caption, which will be displayed below the image.</td></tr><tr><td><code>class</code></td><td>Additional CSS classes to apply to the image.</td></tr><tr><td><code>href</code></td><td>URL that the image should be linked to.</td></tr><tr><td><code>default</code></td><td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <ahref=https://gohugo.io/content-management/shortcodes/#figuretarget=_blankrel="noreferrer noopener">Hugo shortcode syntax</a>.</td></tr></tbody></table><p>Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-mddata-lang=md><spanclass=line><spanclass=cl>![<spanclass=nt>Alt text</span>](<spanclass=na>image.jpg "Image caption"</span>)
</span></span><spanclass=line><spanclass=cl><spanclass=na>caption</span><spanclass=o>=</span><spanclass=s>"Photo by </span>[<spanclass=nt>Jr Korpa</span>](<spanclass=na>https://unsplash.com/@jrkorpa</span>)<spanclass=s> on </span>[<spanclass=nt>Unsplash</span>](<spanclass=na>https://unsplash.com/</span>)<spanclass=s>"</span>
</span></span><spanclass=line><spanclass=cl><spanclass=c><!-- OR --></span>
</span></span><spanclass=line><spanclass=cl>
</span></span><spanclass=line><spanclass=cl>
</span></span></code></pre></div><figure><imgclass="mx-auto my-0 rounded-md"alt="Abstract purple artwork"loading=lazywidth=1280height=213srcset="/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_330x0_resize_q75_box.jpg 330w,/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_660x0_resize_q75_box.jpg 660w,/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_1024x0_resize_q75_box.jpg 1024w,/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_1320x0_resize_q75_box.jpg 2x"src=/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_660x0_resize_q75_box.jpg><figcaptionclass=text-center>Photo by <ahref=https://unsplash.com/@jrkorpatarget=_blankrel="noreferrer noopener">Jr Korpa</a> on <ahref=https://unsplash.com/target=_blankrel="noreferrer noopener">Unsplash</a></figcaption></figure><h2id=iconclass="relative group">Icon <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#iconaria-label=Anchor>#</a></span></h2><p><code>icon</code> outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.</p><p><strong>Example:</strong></p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-mddata-lang=md><spanclass=line><spanclass=cl>{{<spanclass=p><</span><spanclass=nt>icon</span><spanclass=err>"</span><spanclass=na>github</span><spanclass=err>"</span><spanclass=p>></span>}}
<spanclass="relative inline-block align-text-bottom icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 496 512"><pathfill="currentcolor"d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6.0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></span></p><p>Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the <ahref=https://jpanther.github.io/congo/samples/icons/>icon samples</a> page for a full list of supported icons.</p><p>Custom icons can be added by providing your own icon assets in the <code>assets/icons/</code> directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the <code>.svg</code> extension.</p><p>Icons can also be used in partials by calling the <ahref=https://jpanther.github.io/congo/docs/partials/#icon>icon partial</a>.</p><h2id=katexclass="relative group">Katex <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#katexaria-label=Anchor>#</a></span></h2><p>The <code>katex</code> shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of <ahref=https://katex.org/docs/supported.htmltarget=_blankrel="noreferrer noopener">supported TeX functions</a> for the available syntax.</p><p>To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.</p><p>Inline notation can be generated by wrapping the expression in <code>\\(</code> and <code>\\)</code> delimiters. Alternatively, block notation can be generated using <code>$$</code> delimiters.</p><p><strong>Example:</strong></p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-mddata-lang=md><spanclass=line><spanclass=cl>{{<spanclass=p><</span><spanclass=nt>katex</span><spanclass=p>></span>}}
</span></span></code></pre></div><p>\(f(a,b,c) = (a^2+b^2+c^2)^3\)</p><p>Check out the <ahref=https://jpanther.github.io/congo/samples/mathematical-notation/>mathematical notation samples</a> page for more examples.</p><h2id=leadclass="relative group">Lead <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#leadaria-label=Anchor>#</a></span></h2><p><code>lead</code> is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the <code>lead</code> shortcode.</p><p><strong>Example:</strong></p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-mddata-lang=md><spanclass=line><spanclass=cl>{{<spanclass=p><</span><spanclass=nt>lead</span><spanclass=p>></span>}}
</span></span></code></pre></div><divclass="lead !mb-9 text-xl">When life gives you lemons, make lemonade.</div><h2id=mermaidclass="relative group">Mermaid <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#mermaidaria-label=Anchor>#</a></span></h2><p><code>mermaid</code> allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.</p><p>Simply write your Mermaid syntax within the <code>mermaid</code> shortcode and let the plugin do the rest.</p><p>Refer to the <ahref=https://mermaid-js.github.io/target=_blankrel="noreferrer noopener">official Mermaid docs</a> for details on syntax and supported diagram types.</p><p><strong>Example:</strong></p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-mddata-lang=md><spanclass=line><spanclass=cl>{{<spanclass=p><</span><spanclass=nt>mermaid</span><spanclass=p>></span>}}
B-->C[Profit]</div><p>You can see some additional Mermaid examples on the <ahref=https://jpanther.github.io/congo/samples/diagrams-flowcharts/>diagrams and flowcharts samples</a> page.</p></div></section><footerclass="pt-8 max-w-prose print:hidden"><divclass=pt-8><hrclass="border-dotted border-neutral-300 dark:border-neutral-600"><divclass="flex justify-between pt-3"><span><aclass="group flex"href=/congo/docs/front-matter/><spanclass="me-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400"><spanclass="ltr:inline rtl:hidden">←</span><spanclass="ltr:hidden rtl:inline">→</span></span>
