168 lines
19 KiB
XML
168 lines
19 KiB
XML
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>My New Hugo Site</title><link>https://example.org/docs/shortcodes/</link><description>Recent content on My New Hugo Site</description><generator>Hugo</generator><language>en-us</language><atom:link href="https://example.org/docs/shortcodes/index.xml" rel="self" type="application/rss+xml"/><item><title/><link>https://example.org/docs/shortcodes/buttons/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://example.org/docs/shortcodes/buttons/</guid><description><h1 id="buttons">
|
|
Buttons
|
|
<a class="anchor" href="#buttons">#</a>
|
|
</h1>
|
|
<p>Buttons are styled links that can lead to local page or external link.</p>
|
|
<h2 id="example">
|
|
Example
|
|
<a class="anchor" href="#example">#</a>
|
|
</h2>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-tpl" data-lang="tpl"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">button</span> <span style="color:#a6e22e">relref</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/&#34;</span> <span style="color:#f92672">[</span><span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;...&#34;</span><span style="color:#f92672">]</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>Get Home<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">button</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">button</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://github.com/alex-shpak/hugo-book&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>Contribute<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">button</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
|
|
</span></span></code></pre></div><p><a href="https://example.org/" class="book-btn">Get Home</a>
|
|
|
|
<a href="https://github.com/alex-shpak/hugo-book" target="_blank" rel="noopener" class="book-btn">Contribute</a>
|
|
</p></description></item><item><title/><link>https://example.org/docs/shortcodes/columns/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://example.org/docs/shortcodes/columns/</guid><description><h1 id="columns">
|
|
Columns
|
|
<a class="anchor" href="#columns">#</a>
|
|
</h1>
|
|
<p>Columns help organize shorter pieces of content horizontally for readability.</p>
|
|
<h2 id="example">
|
|
Example
|
|
<a class="anchor" href="#example">#</a>
|
|
</h2>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>{{% columns [ratio=&#34;1:1&#34;] [class=&#34;...&#34;] %}} <span style="color:#75715e">&lt;!-- begin columns block --&gt;</span>
|
|
</span></span><span style="display:flex;"><span># Left Content
|
|
</span></span><span style="display:flex;"><span>Lorem markdownum insigne...
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">---</span>&gt; <span style="color:#75715e">&lt;!-- magic separator, between columns --&gt;</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span># Mid Content
|
|
</span></span><span style="display:flex;"><span>Lorem markdownum insigne...
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">---</span>&gt; <span style="color:#75715e">&lt;!-- magic separator, between columns --&gt;</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span># Right Content
|
|
</span></span><span style="display:flex;"><span>Lorem markdownum insigne...
|
|
</span></span><span style="display:flex;"><span>{{% /columns %}}
|
|
</span></span></code></pre></div><!-- raw HTML omitted -->
|
|
<h3 id="left-content">
|
|
Left Content
|
|
<a class="anchor" href="#left-content">#</a>
|
|
</h3>
|
|
<p>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
|
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
|
protulit, sed sed aere valvis inhaesuro Pallas animam: qui <em>quid</em>, ignes.
|
|
Miseratus fonte Ditis conubia.</p></description></item><item><title/><link>https://example.org/docs/shortcodes/details/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://example.org/docs/shortcodes/details/</guid><description><h1 id="details">
|
|
Details
|
|
<a class="anchor" href="#details">#</a>
|
|
</h1>
|
|
<p>Details shortcode is a helper for <code>details</code> html5 element. It is going to replace <code>expand</code> shortcode.</p>
|
|
<h2 id="example">
|
|
Example
|
|
<a class="anchor" href="#example">#</a>
|
|
</h2>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-tpl" data-lang="tpl"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">details</span> <span style="color:#e6db74">&#34;Title&#34;</span> <span style="color:#f92672">[</span><span style="color:#a6e22e">open</span><span style="color:#f92672">]</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span><span style="display:flex;"><span>## Markdown content
|
|
</span></span><span style="display:flex;"><span>Lorem markdownum insigne...
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">details</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-tpl" data-lang="tpl"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">details</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Title&#34;</span> <span style="color:#a6e22e">open</span><span style="color:#f92672">=</span><span style="color:#66d9ef">true</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span><span style="display:flex;"><span>## Markdown content
|
|
</span></span><span style="display:flex;"><span>Lorem markdownum insigne...
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">details</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span></code></pre></div><!-- raw HTML omitted -->
|
|
<h2 id="markdown-content">
|
|
Markdown content
|
|
<a class="anchor" href="#markdown-content">#</a>
|
|
</h2>
|
|
<p>Lorem markdownum insigne&hellip;</p>
|
|
<!-- raw HTML omitted --></description></item><item><title/><link>https://example.org/docs/shortcodes/hints/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://example.org/docs/shortcodes/hints/</guid><description><h1 id="hints">
|
|
Hints
|
|
<a class="anchor" href="#hints">#</a>
|
|
</h1>
|
|
<p>Hint shortcode can be used as hint/alerts/notification block.<br>
|
|
There are 3 colors to choose: <code>info</code>, <code>warning</code> and <code>danger</code>.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-tpl" data-lang="tpl"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">hint</span> <span style="color:#f92672">[</span><span style="color:#a6e22e">info</span><span style="color:#f92672">|</span><span style="color:#a6e22e">warning</span><span style="color:#f92672">|</span><span style="color:#a6e22e">danger</span><span style="color:#f92672">]</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span><span style="display:flex;"><span>**Markdown content**
|
|
</span></span><span style="display:flex;"><span>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
|
</span></span><span style="display:flex;"><span>stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">hint</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span></code></pre></div><h2 id="example">
|
|
Example
|
|
<a class="anchor" href="#example">#</a>
|
|
</h2>
|
|
<!-- raw HTML omitted -->
|
|
<p><strong>Markdown content</strong><br>
|
|
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
|
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa</p></description></item><item><title/><link>https://example.org/docs/shortcodes/mermaid/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://example.org/docs/shortcodes/mermaid/</guid><description><h1 id="mermaid-chart">
|
|
Mermaid Chart
|
|
<a class="anchor" href="#mermaid-chart">#</a>
|
|
</h1>
|
|
<p><a href="https://mermaid-js.github.io/">MermaidJS</a> is library for generating svg charts and diagrams from text.</p>
|
|
<!-- raw HTML omitted -->
|
|
<p><strong>Override Mermaid initialization config</strong><br>
|
|
To override the <a href="https://mermaid-js.github.io/mermaid/#/Setup">initialization config</a> for Mermaid,
|
|
create a <code>mermaid.json</code> file in your <code>assets</code> folder!</p>
|
|
<!-- raw HTML omitted -->
|
|
<h2 id="example">
|
|
Example
|
|
<a class="anchor" href="#example">#</a>
|
|
</h2>
|
|
<!-- raw HTML omitted -->
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-tpl" data-lang="tpl"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">mermaid</span> <span style="color:#f92672">[</span><span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;...&#34;</span><span style="color:#f92672">]</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
|
|
</span></span><span style="display:flex;"><span>stateDiagram-v2
|
|
</span></span><span style="display:flex;"><span> State1: The state with a note
|
|
</span></span><span style="display:flex;"><span> note right of State1
|
|
</span></span><span style="display:flex;"><span> Important information! You can write
|
|
</span></span><span style="display:flex;"><span> notes.
|
|
</span></span><span style="display:flex;"><span> end note
|
|
</span></span><span style="display:flex;"><span> State1 --&gt; State2
|
|
</span></span><span style="display:flex;"><span> note left of State2 : This is the note to the left.
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">mermaid</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
|
|
</span></span></code></pre></div><!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted --></description></item><item><title/><link>https://example.org/docs/shortcodes/tabs/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://example.org/docs/shortcodes/tabs/</guid><description><h1 id="tabs">
|
|
Tabs
|
|
<a class="anchor" href="#tabs">#</a>
|
|
</h1>
|
|
<p>Tabs let you organize content by context, for example installation instructions for each supported platform.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-tpl" data-lang="tpl"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">tabs</span> <span style="color:#e6db74">&#34;id&#34;</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">tab</span> <span style="color:#e6db74">&#34;MacOS&#34;</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span> # MacOS Content <span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tab</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">tab</span> <span style="color:#e6db74">&#34;Linux&#34;</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span> # Linux Content <span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tab</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">tab</span> <span style="color:#e6db74">&#34;Windows&#34;</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span> # Windows Content <span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tab</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tabs</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
|
|
</span></span></code></pre></div><h2 id="example">
|
|
Example
|
|
<a class="anchor" href="#example">#</a>
|
|
</h2>
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted --></description></item><item><title>KaTeX</title><link>https://example.org/docs/shortcodes/katex/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://example.org/docs/shortcodes/katex/</guid><description><h1 id="katex">
|
|
KaTeX
|
|
<a class="anchor" href="#katex">#</a>
|
|
</h1>
|
|
<p>KaTeX shortcode let you render math typesetting in markdown document. See <a href="https://katex.org/">KaTeX</a></p>
|
|
<h2 id="example">
|
|
Example
|
|
<a class="anchor" href="#example">#</a>
|
|
</h2>
|
|
<!-- raw HTML omitted -->
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>{{&lt; katex display=true &gt;}}
|
|
</span></span><span style="display:flex;"><span>f(x) = <span style="color:#66d9ef">\int</span>_{-<span style="color:#66d9ef">\infty</span>}^<span style="color:#66d9ef">\infty\hat</span> f(<span style="color:#66d9ef">\xi</span>)<span style="color:#66d9ef">\,</span>e^{2 <span style="color:#66d9ef">\pi</span> i <span style="color:#66d9ef">\xi</span> x}<span style="color:#66d9ef">\,</span>d<span style="color:#66d9ef">\xi</span>
|
|
</span></span><span style="display:flex;"><span>{{&lt; /katex &gt;}}
|
|
</span></span></code></pre></div><!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->
|
|
<h2 id="display-mode-example">
|
|
Display Mode Example
|
|
<a class="anchor" href="#display-mode-example">#</a>
|
|
</h2>
|
|
<p>Here is some inline example: <span>
|
|
\(\pi(x)\)
|
|
</span>
|
|
, rendered in the same line. And below is <code>display</code> example, having <code>display: block</code>
|
|
<span>
|
|
\[
|
|
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
|
\]
|
|
</span>
|
|
|
|
Text continues here.</p></description></item></channel></rss> |