hugo-theme-relearn/pir/shortcodes/math/index.print.html

294 lines
19 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="pir" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="generator" content="Hugo 0.117.0">
<meta name="generator" content="Relearn 5.19.0+tip">
<meta name="description" content="Documentation for Hugo Relearn Theme">
<meta name="author" content="Sören Weber">
<title>Math :: Cap&#39;n Hugo Relearrrn Theme</title>
<link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/math/index.html" rel="alternate" hreflang="x-default">
<link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/math/index.html" rel="alternate" hreflang="en">
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="canonical" type="text/html" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
<link href="../../../pir/shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
<link href="../../../images/logo.svg?1692952522" rel="icon" type="image/svg+xml">
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
<link href="../../../css/fontawesome-all.min.css?1692952524" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1692952524" rel="stylesheet"></noscript>
<link href="../../../css/nucleus.css?1692952524" rel="stylesheet">
<link href="../../../css/auto-complete.css?1692952524" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1692952524" rel="stylesheet"></noscript>
<link href="../../../css/perfect-scrollbar.min.css?1692952524" rel="stylesheet">
<link href="../../../css/fonts.css?1692952524" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1692952524" rel="stylesheet"></noscript>
<link href="../../../css/theme.css?1692952524" rel="stylesheet">
<link href="../../../css/theme-auto.css?1692952524" rel="stylesheet" id="variant-style">
<link href="../../../css/variant.css?1692952524" rel="stylesheet">
<link href="../../../css/print.css?1692952524" rel="stylesheet" media="print">
<link href="../../../css/format-print.css?1692952524" rel="stylesheet">
<link href="../../../css/ie.css?1692952524" rel="stylesheet">
<script src="../../../js/url.js?1692952524"></script>
<script src="../../../js/variant.js?1692952524"></script>
<script>
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
window.index_js_url="../../../pir/index.search.js";
var root_url="../../../";
var baseUri=root_url.replace(/\/$/, '');
// translations
window.T_Copy_to_clipboard = 'Copy t\u0027 clipboard';
window.T_Copied_to_clipboard = 'Copied t\u0027 clipboard!';
window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
window.T_No_results_found = 'No rrresults found fer \u0022{0}\u0022';
window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
// some further base stuff
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
</script>
<style>
#body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/math/index.html">
<div id="body" class="default-animation">
<div id="sidebar-overlay"></div>
<div id="toc-overlay"></div>
<nav id="topbar" class="highlightable">
<div>
<div id="breadcrumbs">
<span id="sidebar-toggle-span">
<a href="#" id="sidebar-toggle" class="topbar-link" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
</span>
<ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1"> &gt; </li>
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2"> &gt; </li>
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Math</span><meta itemprop="position" content="3"></li>
</ol>
</div>
</div>
</nav>
<main id="body-inner" class="highlightable default" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
</header>
<h1 id="math">Math</h1>
<div class="box notices cstyle warning">
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
<div class="box-content">
<p>Fello' pirrrates, grog made us dizzy! Be awarrre <b>some stuff may look weird</b> in this trrranslat'n. Like <b>Merrrmaids</b>, do'n <b>math or chemistrrry</b> and stuff.</p>
</div>
</div>
<p>Th' <code>math</code> shortcode generates beautiful formatted math an' chemical formulae us'n th' <a href="https://mathjax.org/" target="_blank">MathJax</a> library.</p>
<span class="math align-center">
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
</span>
<div class="box notices cstyle note">
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
<div class="box-content">
<p>This only works 'n modern browsers.</p>
</div>
</div>
<h2 id="usage">Usage</h2>
<p>While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports Math codefences (eg. GitHub) an' so yer markdown becomes more port'ble.</p>
<p>Ye be free t' also call this shortcode from yer own partials.</p>
<div class="box notices cstyle note">
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
<div class="box-content">
<p>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n (<a href="#configuration">see th' configurat'n section</a>).</p>
</div>
</div>
<div class="tab-panel" data-tab-group="shortcode-parameter">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="codefence"
class="tab-nav-button tab-panel-style cstyle initial active"
onclick="switchTab('shortcode-parameter','codefence')"
>
<div>
<div class="tab-nav-hidden">codefence</div>
<div class="tab-nav-text">codefence</div>
</div>
</button>
<button
data-tab-item="shortcode"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','shortcode')"
>
<div>
<div class="tab-nav-hidden">shortcode</div>
<div class="tab-nav-text">shortcode</div>
</div>
</button>
<button
data-tab-item="partial"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','partial')"
>
<div>
<div class="tab-nav-hidden">partial</div>
<div class="tab-nav-text">partial</div>
</div>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="codefence"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```math { align=&#34;center&#34; }
</span></span><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div></div>
</div>
<div
data-tab-item="shortcode"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="nx">math</span> <span class="nx">align</span><span class="p">=</span><span class="s">&#34;center&#34;</span> <span class="p">&gt;}}</span>
</span></span><span class="line"><span class="cl"><span class="err">$$\</span><span class="nf">left</span><span class="p">(</span> <span class="err">\</span><span class="nx">sum_</span><span class="p">{</span><span class="nx">k</span><span class="p">=</span><span class="mi">1</span><span class="p">}^</span><span class="nx">n</span> <span class="nx">a_k</span> <span class="nx">b_k</span> <span class="err">\</span><span class="nx">right</span><span class="p">)^</span><span class="mi">2</span> <span class="err">\</span><span class="nx">leq</span> <span class="err">\</span><span class="nf">left</span><span class="p">(</span> <span class="err">\</span><span class="nx">sum_</span><span class="p">{</span><span class="nx">k</span><span class="p">=</span><span class="mi">1</span><span class="p">}^</span><span class="nx">n</span> <span class="nx">a_k</span><span class="p">^</span><span class="mi">2</span> <span class="err">\</span><span class="nx">right</span><span class="p">)</span> <span class="err">\</span><span class="nf">left</span><span class="p">(</span> <span class="err">\</span><span class="nx">sum_</span><span class="p">{</span><span class="nx">k</span><span class="p">=</span><span class="mi">1</span><span class="p">}^</span><span class="nx">n</span> <span class="nx">b_k</span><span class="p">^</span><span class="mi">2</span> <span class="err">\</span><span class="nx">right</span><span class="p">)</span><span class="err">$$</span>
</span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">math</span> <span class="p">&gt;}}</span></span></span></code></pre></div></div>
</div>
<div
data-tab-item="partial"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">&#34;shortcodes/math.html&#34;</span> <span class="p">(</span><span class="nx">dict</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;page&#34;</span> <span class="p">.</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;content&#34;</span> <span class="s">&#34;$$left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;align&#34;</span> <span class="s">&#34;center&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div></div>
</div>
</div>
</div>
<h3 id="parameter">Parameter</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>align</strong></td>
<td><code>center</code></td>
<td>Allowed values be <code>left</code>, <code>center</code> or <code>right</code>.</td>
</tr>
<tr>
<td><em><strong>&lt;content&gt;</strong></em></td>
<td><em>&lt;empty&gt;</em></td>
<td>Yer formuale.</td>
</tr>
</tbody>
</table>
<h2 id="configuration">Configurat'n</h2>
<p>MathJax be configured wit' default sett'ns. Ye can cust'mize MathJax&rsquo;s default sett'ns fer all o' yer files thru a JSON object 'n yer <code>config.toml</code> or override these sett'ns per plank thru yer planks frontmatter.</p>
<p>Th' JSON object o' yer <code>config.toml</code> / frontmatter be forwarded into MathJax&rsquo;s configurat'n object.</p>
<p>See <a href="https://docs.mathjax.org/en/latest/options/index.html" target="_blank">MathJax documentat'n</a> fer all allowed sett'ns.</p>
<div class="box notices cstyle note">
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
<div class="box-content">
<p>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n.</p>
</div>
</div>
<h3 id="global-configuration-file">Global Configurat'n File</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">mathJaxInitialize</span> <span class="p">=</span> <span class="s2">&#34;{ \&#34;chtml\&#34;: { \&#34;displayAlign\&#34;: \&#34;left\&#34; } }&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">highlight</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="c"># if `guessSyntax = true`, there will be no unstyled code even if no language</span>
</span></span><span class="line"><span class="cl"> <span class="c"># was given BUT Merrrmaid an' Math codefences will not work anymore! So this be a</span>
</span></span><span class="line"><span class="cl"> <span class="c"># mandatory sett'n fer yer ship if ye want t' use Math codefences</span>
</span></span><span class="line"><span class="cl"> <span class="nx">guessSyntax</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div><h3 id="pages-frontmatter">Page&rsquo;s Frontmatter</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">mathJaxInitialize</span> <span class="p">=</span> <span class="s2">&#34;{ \&#34;chtml\&#34;: { \&#34;displayAlign\&#34;: \&#34;left\&#34; } }&#34;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><h2 id="examples">Examples</h2>
<h3 id="inline-math">Inline Math</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Inline math be generated if ye use a single <span class="sb">`$`</span> as a delimiter around yer formulae: {{<span class="p">&lt;</span> <span class="nt">math</span> <span class="p">&gt;</span>}}$\sqrt{3}${{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">math</span> <span class="p">&gt;</span>}}</span></span></code></pre></div><p>Inline math be generated if ye use a single <code>$</code> as a delimiter around yer formulae:
<span class="math align-center">$\sqrt{3}$</span></p>
<h3 id="blocklevel-math-with-right-alignment">Blocklevel Math wit' Right Alignment</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">If ye delimit yer formulae by two consecutive <span class="sb">`$$`</span> it generates a new block.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">math</span> <span class="na">align</span><span class="o">=</span><span class="s">&#34;right&#34;</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">math</span> <span class="p">&gt;</span>}}</span></span></code></pre></div><p>If ye delimit yer formulae by two consecutive <code>$$</code> it generates a new block.</p>
<span class="math align-right">
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
</span>
<h3 id="codefence">Codefence</h3>
<p>Ye can also use codefences.</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="s">```math
</span></span></span><span class="line"><span class="cl"><span class="s"></span>$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
<span class="math align-center">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$</span><h3 id="chemical-formulae">Chemical Formulae</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">math</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">$$\ce{Hg^2+ -&gt;[I-] HgI2 -&gt;[I-] [Hg^{II}I4]^2-}$$
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">math</span> <span class="p">&gt;</span>}}</span></span></code></pre></div>
<span class="math align-center">
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
</span>
<footer class="footline">
</footer>
</article>
</div>
</main>
</div>
<script src="../../../js/clipboard.min.js?1692952524" defer></script>
<script src="../../../js/perfect-scrollbar.min.js?1692952524" defer></script>
<script>
function useMathJax( config ){
if( !Object.assign ){
return;
}
window.MathJax = Object.assign( window.MathJax || {}, {
loader: {
load: ['[tex]/mhchem']
},
startup: {
elements: [
'.math'
]
},
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
]
},
options: {
enableMenu: false
}
}, config );
}
useMathJax( JSON.parse("{}") );
</script>
<script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1692952524"></script>
<script src="../../../js/theme.js?1692952524" defer></script>
</body>
</html>