mirror of https://github.com/jpanther/congo.git
234 lines
23 KiB
HTML
234 lines
23 KiB
HTML
<!doctype html><html lang=en-au><head>
|
|
<meta charset=utf-8>
|
|
<meta http-equiv=content-language content="en-AU">
|
|
<meta name=viewport content="width=device-width,initial-scale=1">
|
|
<meta http-equiv=x-ua-compatible content="ie=edge">
|
|
<title>Shortcodes · Congo</title>
|
|
<meta name=title content="Shortcodes · Congo">
|
|
<meta name=description content="All the shortcodes available in Congo.">
|
|
<link rel=canonical href=https://jpanther.github.io/congo/docs/shortcodes/>
|
|
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
|
|
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.aca2297023c90faf162c0dcb8c066ab0b686298ed41f1e1349a00a96a70076d08c5f2b1efe10c6132c4e35e7857d2ff71f3e08da2b9121fa9cf6c2a2f0941d93.css integrity="sha512-rKIpcCPJD68WLA3LjAZqsLaGKY7UHx4TSaAKlqcAdtCMXyse/hDGEyxONeeFfS/3Hz4I2iuRIfqc9sKi8JQdkw==">
|
|
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
|
|
<link rel=apple-touch-icon sizes=180x180 href=/congo/apple-touch-icon.png>
|
|
<link rel=icon type=image/png sizes=32x32 href=/congo/favicon-32x32.png>
|
|
<link rel=icon type=image/png sizes=16x16 href=/congo/favicon-16x16.png>
|
|
<link rel=manifest href=/congo/site.webmanifest>
|
|
<meta property="og:title" content="Shortcodes">
|
|
<meta property="og:description" content="All the shortcodes available in Congo.">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="https://jpanther.github.io/congo/docs/shortcodes/"><meta property="article:section" content="docs">
|
|
<meta property="article:published_time" content="2020-08-11T00:00:00+00:00">
|
|
<meta property="article:modified_time" content="2020-08-11T00:00:00+00:00">
|
|
<meta name=twitter:card content="summary">
|
|
<meta name=twitter:title content="Shortcodes">
|
|
<meta name=twitter:description content="All the shortcodes available in Congo.">
|
|
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Shortcodes","headline":"Shortcodes","description":"All the shortcodes available in Congo.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"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","url":"https:\/\/jpanther.github.io\/congo\/docs\/shortcodes\/","wordCount":"668","keywords":["shortcodes","mermaid","icon","lead","docs"]}</script>
|
|
<meta name=generator content="Hugo 0.89.0">
|
|
<meta name=author content="Congo">
|
|
<link href=https://twitter.com/ rel=me>
|
|
<link href=https://facebook.com/ rel=me>
|
|
<link href=https://linkedin.com/ rel=me>
|
|
<link href=https://youtube.com/ rel=me>
|
|
<script defer src=/congo/lib/mermaid/mermaid.min.bd7e5c3bb91a09b6bd037d41ae2e66b4318753943febfdd69add43d6ba6fab433e250b85c0636b7e99a01c94d5bf0b0a530b2d7d59f79a9227b5bc216be04cc3.js integrity="sha512-vX5cO7kaCba9A31Bri5mtDGHU5Q/6/3Wmt1D1rpvq0M+JQuFwGNrfpmgHJTVvwsKUwstfVn3mpIntbwha+BMww=="></script>
|
|
<script>document.addEventListener('DOMContentLoaded',b=>{function a(a){return getComputedStyle(document.documentElement).getPropertyValue(a)}mermaid.initialize({theme:"base",themeVariables:{background:a("--color-neutral"),primaryColor:a("--color-primary-200"),secondaryColor:a("--color-secondary-200"),tertiaryColor:a("--color-neutral-100"),primaryBorderColor:a("--color-primary-400"),secondaryBorderColor:a("--color-secondary-400"),tertiaryBorderColor:a("--color-neutral-400"),lineColor:a("--color-neutral-600"),fontFamily:"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",fontSize:"16px"}})})</script>
|
|
<script defer src=/congo/lib/chart/chart.min.18c1b35047af85687c4dcfe78d2d1b0e9c20c5d0892d00561b76760adf8918ea559c49a3bcdc7ab6ce2fe80d9725fd473abb4eb1f86fde104aa4af64139cfc01.js integrity="sha512-GMGzUEevhWh8Tc/njS0bDpwgxdCJLQBWG3Z2Ct+JGOpVnEmjvNx6ts4v6A2XJf1HOrtOsfhv3hBKpK9kE5z8AQ=="></script>
|
|
<script>document.addEventListener('DOMContentLoaded',b=>{function a(a){return getComputedStyle(document.documentElement).getPropertyValue(a)}Chart.defaults.font.size=14,Chart.defaults.backgroundColor=a("--color-primary-300"),Chart.defaults.elements.point.borderColor=a("--color-primary-400"),Chart.defaults.elements.bar.borderColor=a("--color-primary-500"),Chart.defaults.elements.bar.borderWidth=1,Chart.defaults.elements.line.borderColor=a("--color-primary-400"),Chart.defaults.elements.arc.backgroundColor=a("--color-primary-200"),Chart.defaults.elements.arc.borderColor=a("--color-primary-500"),Chart.defaults.elements.arc.borderWidth=1})</script>
|
|
<link type=text/css rel=stylesheet href=/congo/lib/katex/katex.min.bc9ab1919f92ba07ffe96465a5cc4dd35a957d7ff6f6117aa9cdf7787175bdadcd82857e53ec028beb9302c435d2c0e81b20711cb75a1ef1b00e5577c9561ba0.css integrity="sha512-vJqxkZ+Sugf/6WRlpcxN01qVfX/29hF6qc33eHF1va3NgoV+U+wCi+uTAsQ10sDoGyBxHLdaHvGwDlV3yVYboA==">
|
|
<script defer src=/congo/lib/katex/katex.min.e6e7cd707a8e6208a51841cf7ee44843907fbc34b533cf940be0c4499e42c158064e0f9bd8e97fd79ad82ff1a209627f4b1f28568d053c5a24d5d3e4f14f4835.js integrity="sha512-5ufNcHqOYgilGEHPfuRIQ5B/vDS1M8+UC+DESZ5CwVgGTg+b2Ol/15rYL/GiCWJ/Sx8oVo0FPFok1dPk8U9INQ=="></script>
|
|
<script defer src=/congo/lib/katex/auto-render.min.640fd13eb028f3c0e5c119e7a0d56a28836740d716111cd12b4dcf0da038188262559bc61485906dd582b1479b3197e45a88677e782c0e35f353a3e890ee231b.js integrity="sha512-ZA/RPrAo88DlwRnnoNVqKINnQNcWERzRK03PDaA4GIJiVZvGFIWQbdWCsUebMZfkWohnfngsDjXzU6PokO4jGw==" onload=renderMathInElement(document.body)></script>
|
|
</head>
|
|
<body class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-800 dark:text-neutral">
|
|
<div>
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
|
|
</div>
|
|
<nav>
|
|
<ul class="flex flex-col list-none sm:flex-row">
|
|
<li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
|
|
</li>
|
|
<li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
|
|
</li>
|
|
<li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
|
|
</li>
|
|
<li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main class=flex-grow>
|
|
<article class=max-w-prose>
|
|
<header>
|
|
<ol class="text-sm text-neutral-400 dark:text-neutral-500">
|
|
<li class="inline hidden">
|
|
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
<li class=inline>
|
|
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
<li class="inline hidden">
|
|
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/shortcodes/>Shortcodes</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
</ol>
|
|
<h1 class="mt-0 text-4xl font-extrabold text-neutral-800 dark:text-neutral">
|
|
Shortcodes
|
|
</h1>
|
|
<div class="mt-8 mb-12 text-base text-neutral-400 dark:text-neutral-500">
|
|
<div class="flex flex-row items-center">
|
|
<span title="Reading time">4 mins</span><span class="px-2 text-primary-500">·</span>
|
|
<span class=mb-[2px]>
|
|
<a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/shortcodes.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content"><span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5.0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1.0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7.0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174 402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7-43.2-43.2c-4.1-4.1-10.8-4.1-14.8.0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="prose dark:prose-light">
|
|
<p>In addition to all the <a href=https://gohugo.io/content-management/shortcodes/>default Hugo shortcodes</a>, Congo adds a few extras for additional functionality.</p>
|
|
<h2 id=alert>Alert <a class=heading-anchor href=#alert aria-label=Anchor>#</a></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><strong>Example:</strong></p>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p><</span> <span class=nt>alert</span> <span class=p>></span>}}
|
|
<span class=gs>**Warning!**</span> This action is destructive!
|
|
{{<span class=p><</span> <span class=p>/</span><span class=nt>alert</span> <span class=p>></span>}}
|
|
</code></pre></div><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
|
|
<span class="pr-3 text-primary-400">
|
|
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
|
|
</span>
|
|
</span>
|
|
<span class="no-prose dark:text-neutral-300"><strong>Warning!</strong> This action is destructive!</span>
|
|
</div>
|
|
<h2 id=badge>Badge <a class=heading-anchor href=#badge aria-label=Anchor>#</a></h2>
|
|
<p><code>badge</code> outputs a styled badge component which is useful for displaying metadata.</p>
|
|
<p><strong>Example:</strong></p>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p><</span> <span class=nt>badge</span> <span class=p>></span>}}
|
|
New article!
|
|
{{<span class=p><</span> <span class=p>/</span><span class=nt>badge</span> <span class=p>></span>}}
|
|
</code></pre></div><span class=flex>
|
|
<span class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600">
|
|
New article!
|
|
</span>
|
|
</span>
|
|
<h2 id=button>Button <a class=heading-anchor href=#button aria-label=Anchor>#</a></h2>
|
|
<p><code>button</code> outputs a styled button component which can be used to highlight a primary action. It has two optional variables <code>href</code> and <code>target</code> which can be used to specify the URL and target of the link.</p>
|
|
<p><strong>Example:</strong></p>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p><</span> <span class=nt>button</span> <span class=na>href</span><span class=o>=</span><span class=s>"#button"</span> <span class=na>target</span><span class=o>=</span><span class=s>"_self"</span> <span class=p>></span>}}
|
|
Call to action
|
|
{{<span class=p><</span> <span class=p>/</span><span class=nt>button</span> <span class=p>></span>}}
|
|
</code></pre></div><a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" href=#button target=_self role=button>
|
|
Call to action
|
|
</a>
|
|
<h2 id=chart>Chart <a class=heading-anchor href=#chart aria-label=Anchor>#</a></h2>
|
|
<p><code>chart</code> uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of <a href=https://www.chartjs.org/docs/latest/samples/>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 <a href=https://www.chartjs.org/docs/latest/general/>official Chart.js docs</a> for details on syntax and supported chart types.</p>
|
|
<p><strong>Example:</strong></p>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=p>{{</span><span class=o><</span> <span class=nx>chart</span> <span class=o>></span><span class=p>}}</span>
|
|
<span class=nx>type</span><span class=o>:</span> <span class=s1>'bar'</span><span class=p>,</span>
|
|
<span class=nx>data</span><span class=o>:</span> <span class=p>{</span>
|
|
<span class=nx>labels</span><span class=o>:</span> <span class=p>[</span><span class=s1>'Tomato'</span><span class=p>,</span> <span class=s1>'Blueberry'</span><span class=p>,</span> <span class=s1>'Banana'</span><span class=p>,</span> <span class=s1>'Lime'</span><span class=p>,</span> <span class=s1>'Orange'</span><span class=p>],</span>
|
|
<span class=nx>datasets</span><span class=o>:</span> <span class=p>[{</span>
|
|
<span class=nx>label</span><span class=o>:</span> <span class=s1>'# of votes'</span><span class=p>,</span>
|
|
<span class=nx>data</span><span class=o>:</span> <span class=p>[</span><span class=mi>12</span><span class=p>,</span> <span class=mi>19</span><span class=p>,</span> <span class=mi>3</span><span class=p>,</span> <span class=mi>5</span><span class=p>,</span> <span class=mi>2</span><span class=p>,</span> <span class=mi>3</span><span class=p>],</span>
|
|
<span class=p>}]</span>
|
|
<span class=p>}</span>
|
|
<span class=p>{{</span><span class=o><</span> <span class=err>/chart >}}</span>
|
|
</code></pre></div>
|
|
<div class=chart>
|
|
<canvas id=928147653></canvas>
|
|
<script>document.addEventListener("DOMContentLoaded",b=>{const a=document.getElementById("928147653"),c=new Chart(a,{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 <a href=https://jpanther.github.io/congo/samples/charts/>charts samples</a> page.</p>
|
|
<h2 id=icon>Icon <a class=heading-anchor href=#icon aria-label=Anchor>#</a></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>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p><</span> <span class=nt>icon</span> <span class=err>"</span><span class=na>github</span><span class=err>"</span> <span class=p>></span>}}
|
|
</code></pre></div><p><strong>Output:</strong> <span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="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 ships with a default set of icons for social, email, and generic links. If you want to add your own icons, you can simply place them in <code>/assets/icons/</code> and reference them using the <code>icon</code> shortcode passing in the icon’s filename (without the <code>.svg.</code> extension).</p>
|
|
<p>Icons can also be used in partials by calling the <a href=https://jpanther.github.io/congo/docs/partials/#icon>icon partial</a>.</p>
|
|
<h2 id=katex>Katex <a class=heading-anchor href=#katex aria-label=Anchor>#</a></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 <a href=https://katex.org/docs/supported.html>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>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p><</span> <span class=nt>katex</span> <span class=p>></span>}}
|
|
\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
|
|
</code></pre></div><p>
|
|
\(f(a,b,c) = (a^2+b^2+c^2)^3\)</p>
|
|
<p>Check out the <a href=https://jpanther.github.io/congo/samples/mathematical-notation/>mathematical notation samples</a> page for more examples.</p>
|
|
<h2 id=lead>Lead <a class=heading-anchor href=#lead aria-label=Anchor>#</a></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>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p><</span> <span class=nt>lead</span> <span class=p>></span>}}
|
|
When life gives you lemons, make lemonade.
|
|
{{<span class=p><</span> <span class=p>/</span><span class=nt>lead</span> <span class=p>></span>}}
|
|
</code></pre></div><p class="!mb-9 text-xl text-neutral-400 dark:text-neutral-500">
|
|
When life gives you lemons, make lemonade.
|
|
</p>
|
|
<h2 id=mermaid>Mermaid <a class=heading-anchor href=#mermaid aria-label=Anchor>#</a></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 <a href=https://mermaid-js.github.io/>official Mermaid docs</a> for details on syntax and supported diagram types.</p>
|
|
<p><strong>Example:</strong></p>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p><</span> <span class=nt>mermaid</span> <span class=p>></span>}}
|
|
graph LR;
|
|
A[Lemons]-->B[Lemonade];
|
|
B-->C[Profit]
|
|
{{<span class=p><</span> <span class=p>/</span><span class=nt>mermaid</span> <span class=p>></span>}}
|
|
</code></pre></div><div class=mermaid align=center>
|
|
graph LR;
|
|
A[Lemons]-->B[Lemonade];
|
|
B-->C[Profit]
|
|
</div>
|
|
<p>You can see some additional Mermaid examples on the <a href=https://jpanther.github.io/congo/samples/diagrams-flowcharts/>diagrams and flowcharts samples</a> page.</p>
|
|
</section>
|
|
<footer class=pt-8>
|
|
<div class="pt-8 article-pagination">
|
|
<hr class="border-dotted border-neutral-300 dark:border-neutral-600">
|
|
<div class="flex justify-between pt-3">
|
|
<span>
|
|
<a class=flex href=/congo/docs/front-matter/>
|
|
<span class="mr-3 article-pagination-direction">←</span>
|
|
<span class="flex flex-col">
|
|
<span class=article-pagination-title>Front Matter</span>
|
|
<span class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500">
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</span>
|
|
<span>
|
|
<a class="flex text-right" href=/congo/docs/partials/>
|
|
<span class="flex flex-col">
|
|
<span class=article-pagination-title>Partials</span>
|
|
<span class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500">
|
|
</span>
|
|
</span>
|
|
<span class="ml-3 article-pagination-direction">→</span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</main><footer class=py-10>
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<p class="text-sm text-neutral-400 dark:text-neutral-500">
|
|
©
|
|
2021
|
|
Congo
|
|
</p>
|
|
<p class="text-xs text-neutral-300 dark:text-neutral-600">
|
|
Powered by <a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |