mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 09:43:06 +00:00
589 lines
44 KiB
HTML
589 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/Article">
|
|
<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.136.5">
|
|
<meta name="generator" content="Relearn 7.1.0">
|
|
<meta name="description" content="Beautiful math and chemical formulae">
|
|
<meta name="author" content="Sören Weber">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta name="twitter:title" content="Math :: Hugo Relearn Theme">
|
|
<meta name="twitter:description" content="Beautiful math and chemical formulae">
|
|
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/math/index.html">
|
|
<meta property="og:site_name" content="Hugo Relearn Theme">
|
|
<meta property="og:title" content="Math :: Hugo Relearn Theme">
|
|
<meta property="og:description" content="Beautiful math and chemical formulae">
|
|
<meta property="og:locale" content="en">
|
|
<meta property="og:type" content="article">
|
|
<meta property="article:section" content="Shortcodes">
|
|
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta itemprop="name" content="Math :: Hugo Relearn Theme">
|
|
<meta itemprop="description" content="Beautiful math and chemical formulae">
|
|
<meta itemprop="wordCount" content="927">
|
|
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta itemprop="keywords" content="Howto,Reference,CustomMathJaxURL,Math,Math.force,MathJaxInitialize,CustomMathJaxURL,Math,Math.force,MathJaxInitialize">
|
|
<title>Math :: Hugo Relearn 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="art-x-pir">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/math/index.html" rel="canonical" type="text/html" title="Math :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/images/logo.svg?1729808080" rel="icon" type="image/svg+xml">
|
|
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729808080" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729808080" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/nucleus.css?1729808080" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/auto-complete.css?1729808080" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1729808080" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1729808080" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/fonts.css?1729808080" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1729808080" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/theme.css?1729808080" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1729808080" rel="stylesheet" id="R-variant-style">
|
|
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1729808080" rel="stylesheet" id="R-variant-chroma-style">
|
|
<link href="/hugo-theme-relearn/css/print.css?1729808080" rel="stylesheet" media="print">
|
|
<link href="/hugo-theme-relearn/css/format-print.css?1729808080" rel="stylesheet">
|
|
<script src="/hugo-theme-relearn/js/variant.js?1729808080"></script>
|
|
<script>
|
|
window.relearn = window.relearn || {};
|
|
window.relearn.relBasePath='..\/..';
|
|
window.relearn.relBaseUri='..\/..\/..';
|
|
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
|
|
window.relearn.disableAnchorCopy=false;
|
|
window.relearn.disableAnchorScrolling=false;
|
|
// variant stuff
|
|
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
|
// translations
|
|
window.T_Copy_to_clipboard = `Copy to clipboard`;
|
|
window.T_Copied_to_clipboard = `Copied to clipboard!`;
|
|
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
|
|
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
|
|
window.T_Reset_view = `Reset view`;
|
|
window.T_View_reset = `View reset!`;
|
|
window.T_No_results_found = `No results found for "{0}"`;
|
|
window.T_N_results_found = `{1} results found for "{0}"`;
|
|
</script>
|
|
<style>
|
|
#R-body img.bg-white {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/shortcodes/math/index.html">
|
|
<div id="R-body" class="default-animation">
|
|
<div id="R-body-overlay"></div>
|
|
<nav id="R-topbar">
|
|
<div class="topbar-wrapper">
|
|
<div class="topbar-sidebar-divider"></div>
|
|
<div class="topbar-area topbar-area-start" data-area="start">
|
|
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL+ALT+n)"><i class="fa-fw fas fa-bars"></i></button>
|
|
</div>
|
|
<div class="topbar-button topbar-button-toc" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL+ALT+t)"><i class="fa-fw fas fa-list-alt"></i></button>
|
|
<div class="topbar-content">
|
|
<div class="topbar-content-wrapper">
|
|
<nav class="TableOfContents">
|
|
<ul>
|
|
<li><a href="#usage">Usage</a>
|
|
<ul>
|
|
<li><a href="#parameter">Parameter</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#settings">Settings</a>
|
|
<ul>
|
|
<li><a href="#providing-initialization-options-for-the-mathjax-library">Providing Initialization Options for the MathJax Library</a></li>
|
|
<li><a href="#loading-an-external-version-of-the-mathjax-library">Loading an External Version of the MathJax Library</a></li>
|
|
<li><a href="#force-loading-of-the-mathjax-library">Force Loading of the MathJax Library</a></li>
|
|
<li><a href="#passthrough-configuration">Passthrough Configuration</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#examples">Examples</a>
|
|
<ul>
|
|
<li><a href="#passthrough-block-math">Passthrough Block Math</a></li>
|
|
<li><a href="#passthrough-inline-math">Passthrough Inline Math</a></li>
|
|
<li><a href="#codefence-block-math-with-right-alignment">Codefence Block Math with Right Alignment</a></li>
|
|
<li><a href="#shortcode-block-math-with-right-alignment">Shortcode Block Math with Right Alignment</a></li>
|
|
<li><a href="#chemical-formulae">Chemical Formulae</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="1"> > </li><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Math</span><meta itemprop="position" content="2"></li>
|
|
</ol>
|
|
<div class="topbar-area topbar-area-end" data-area="end">
|
|
<div class="topbar-button topbar-button-edit" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/math.en.md" target="_self" title="Edit (CTRL+ALT+w)"><i class="fa-fw fas fa-pen"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-print" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/shortcodes/math/index.print.html" title="Print whole chapter (CTRL+ALT+p)"><i class="fa-fw fas fa-print"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/shortcodes/include/index.html" title="Include (🡐)"><i class="fa-fw fas fa-chevron-left"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/shortcodes/mermaid/index.html" title="Mermaid (🡒)"><i class="fa-fw fas fa-chevron-right"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-more" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="More"><i class="fa-fw fas fa-ellipsis-v"></i></button>
|
|
<div class="topbar-content">
|
|
<div class="topbar-content-wrapper">
|
|
<div class="topbar-area topbar-area-more" data-area="more">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div id="R-main-overlay"></div>
|
|
<main id="R-body-inner" class="highlightable shortcodes" tabindex="-1">
|
|
<div class="flex-block-wrapper">
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="math">Math</h1>
|
|
|
|
<p>If this is not enough, the <code>math</code> shortcode helps you rendering math and chemical formulae using the <a href="https://mathjax.org/" rel="external" target="_self">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>
|
|
<h2 id="usage">Usage</h2>
|
|
<div class="tab-panel" data-tab-group="shortcode-parameter">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="passthrough"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('shortcode-parameter','passthrough')"
|
|
>
|
|
<span class="tab-nav-text">passthrough</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="codefence"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('shortcode-parameter','codefence')"
|
|
>
|
|
<span class="tab-nav-text">codefence</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="shortcode"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('shortcode-parameter','shortcode')"
|
|
>
|
|
<span class="tab-nav-text">shortcode</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="partial"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('shortcode-parameter','partial')"
|
|
>
|
|
<span class="tab-nav-text">partial</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="passthrough"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><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></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="codefence"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```math {align="center"}
|
|
</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="highlight wrap-code"><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">math</span> <span class="nx">align</span><span class="p">=</span><span class="s">"center"</span> <span class="p">>}}</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">{{<</span> <span class="o">/</span><span class="nx">math</span> <span class="p">>}}</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="highlight wrap-code"><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">"shortcodes/math.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"$$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><span class="line"><span class="cl"> <span class="s">"align"</span> <span class="s">"center"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>You can also use <a href="/hugo-theme-relearn/authoring/markdown/index.html#subscript-and-superscript">pure Markdown</a> for writing simple math expressions.</p>
|
|
<p>Passthrough syntax is only available by <a href="/hugo-theme-relearn/shortcodes/math/index.html#passthrough-configuration">further configuration</a> and has limited features as it does not provide any of the below parameter. Nevertheless, it is widely available in other Markdown parsers like GitHub and therefore is the recommend syntax for generating portable Markdown.</p>
|
|
<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>The vertical alignment.<br><br>Allowed values are <code>left</code>, <code>center</code> or <code>right</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><em><strong><content></strong></em></td>
|
|
<td><em><empty></em></td>
|
|
<td>Your formulae.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2 id="settings">Settings</h2>
|
|
<h3 id="providing-initialization-options-for-the-mathjax-library">Providing Initialization Options for the MathJax Library</h3>
|
|
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Option</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> The MathJax library is configured with default settings for initialization.</p>
|
|
<p>You can overwrite the settings by providing a JSON object in <code>mathJaxInitialize</code>. See <a href="https://docs.mathjax.org/en/latest/options/index.html" rel="external" target="_self">MathJax’s documentation</a> for all allowed settings.</p>
|
|
<p>Keep in mind that initialization settings of your pages front matter overwrite all settings of your configuration options.</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">mathJaxInitialize</span> <span class="p">=</span> <span class="s1">'{ "chtml": { "displayAlign": "left" }, { "tex": { "inlineMath": [["\(", "\)"], ["@", "@"]], displayMath: [["\[", "\]"], ["@@", "@@"]] }, "options": { "enableMenu": false }'</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">mathJaxInitialize</span><span class="p">:</span><span class="w"> </span><span class="s1">'{ "chtml": { "displayAlign": "left" }, { "tex": { "inlineMath":
|
|
</span></span></span><span class="line"><span class="cl"><span class="s1"> [["\(", "\)"], ["@", "@"]], displayMath: [["\[", "\]"], ["@@", "@@"]] }, "options":
|
|
</span></span></span><span class="line"><span class="cl"><span class="s1"> { "enableMenu": false }'</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"mathJaxInitialize"</span><span class="p">:</span> <span class="s2">"{ \"chtml\": { \"displayAlign\": \"left\" }, { \"tex\": { \"inlineMath\": [[\"\\(\", \"\\)\"], [\"@\", \"@\"]], displayMath: [[\"\\[\", \"\\]\"], [\"@@\", \"@@\"]] }, \"options\": { \"enableMenu\": false }"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 id="loading-an-external-version-of-the-mathjax-library">Loading an External Version of the MathJax Library</h3>
|
|
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Option</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> The theme uses the shipped MathJax library by default.</p>
|
|
<p>In case you want do use a different version of the MathJax library but don’t want to override the shipped version, you can set <code>customMathJaxURL</code> to the URL of the external MathJax library.</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">customMathJaxURL</span> <span class="p">=</span> <span class="s1">'https://unpkg.com/mathjax/es5/tex-mml-chtml.js'</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">customMathJaxURL</span><span class="p">:</span><span class="w"> </span><span class="l">https://unpkg.com/mathjax/es5/tex-mml-chtml.js</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"customMathJaxURL"</span><span class="p">:</span> <span class="s2">"https://unpkg.com/mathjax/es5/tex-mml-chtml.js"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 id="force-loading-of-the-mathjax-library">Force Loading of the MathJax Library</h3>
|
|
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Option</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> The MathJax library will be loaded if the page contains a <code>math</code> shortcode or codefence.</p>
|
|
<p>You can force loading the MathJax library if no shortcode or codefence was used by setting <code>math=true</code>. If a shortcode or codefence was found, the option has no effect. This must be set in case you are using the <a href="/hugo-theme-relearn/shortcodes/math/index.html#passthrough-configuration">passthrough configuration</a> to render math.</p>
|
|
<p>Instead of <code>math=true</code> you can also use the alias <code>math.force=true</code>.</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">math</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">math</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"math"</span><span class="p">:</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 id="passthrough-configuration">Passthrough Configuration</h3>
|
|
<p>You can use your math without enclosing it in a shortcode or codefence by using a <a href="https://gohugo.io/content-management/mathematics/#step-1" rel="external" target="_self">passthrough configuration</a></p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">markup</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">extensions</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">extensions</span><span class="p">.</span><span class="nx">passthrough</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">enable</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">extensions</span><span class="p">.</span><span class="nx">passthrough</span><span class="p">.</span><span class="nx">delimiters</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">block</span> <span class="p">=</span> <span class="p">[[</span><span class="s1">'\['</span><span class="p">,</span> <span class="s1">'\]'</span><span class="p">],</span> <span class="p">[</span><span class="s1">'$$'</span><span class="p">,</span> <span class="s1">'$$'</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">inline</span> <span class="p">=</span> <span class="p">[[</span><span class="s1">'\('</span><span class="p">,</span> <span class="s1">'\)'</span><span class="p">],</span> <span class="p">[</span><span class="s1">'$'</span><span class="p">,</span> <span class="s1">'$'</span><span class="p">]]</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">markup</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">goldmark</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">extensions</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">passthrough</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">delimiters</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">block</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- - <span class="l">\[</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">\]</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- - <span class="l">$$</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">$$</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">inline</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- - <span class="l">\(</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">\)</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- - <span class="l">$</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">$</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"markup"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"goldmark"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"extensions"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"passthrough"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"delimiters"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"block"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"\\["</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"\\]"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"$$"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"$$"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"inline"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"\\("</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"\\)"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"$"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"$"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"enable"</span><span class="p">:</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>In this case you have to <a href="/hugo-theme-relearn/shortcodes/math/index.html#force-loading-of-the-mathjax-library">force load</a> the MathJax library either in your <code>hugo.toml</code> or in your page’s front matter as the theme doesn’t know if math is used.</p>
|
|
<p><a href="/hugo-theme-relearn/shortcodes/math/index.html#passthrough-block-math">See the example</a> on how a passthrough configurations makes using math really easy.</p>
|
|
<h2 id="examples">Examples</h2>
|
|
<h3 id="passthrough-block-math">Passthrough Block Math</h3>
|
|
<p>With <a href="/hugo-theme-relearn/shortcodes/math/index.html#passthrough-configuration">passthrough configuration</a> enabled you can just drop your math without enclosing it by shortcodes or codefences but no other <a href="/hugo-theme-relearn/shortcodes/math/index.html#parameter">parameters</a> are available.</p>
|
|
<p>In this case you have to <a href="/hugo-theme-relearn/shortcodes/math/index.html#force-loading-of-the-mathjax-library">force load</a> the MathJax library by setting <code>math=true</code> either in your <code>hugo.toml</code> or in your page’s front matter.</p>
|
|
<p>In passthrough default configuration, block math is generated if you use two consecutive <code>$$</code> as a delimiter around your formulae.</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">$$\left|
|
|
</span></span><span class="line"><span class="cl">\begin{array}{cc}
|
|
</span></span><span class="line"><span class="cl">a <span class="err">&</span> b \\
|
|
</span></span><span class="line"><span class="cl">c <span class="err">&</span> d
|
|
</span></span><span class="line"><span class="cl">\end{array}\right|$$</span></span></code></pre></div>
|
|
$$\left|
|
|
\begin{array}{cc}
|
|
a & b \\
|
|
c & d
|
|
\end{array}\right|$$<h3 id="passthrough-inline-math">Passthrough Inline Math</h3>
|
|
<p>The same usage restrictions as of the <a href="/hugo-theme-relearn/shortcodes/math/index.html#passthrough-block-math">previous example</a> apply here as well.</p>
|
|
<p>In passthrough default configuration, inline math is generated if you use a single <code>$</code> as a delimiter around your formulae.</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Euclid already knew, $\sqrt{2}$ is irrational.</span></span></code></pre></div>
|
|
<p>Euclid already knew, $\sqrt{2}$ is irrational.</p>
|
|
<h3 id="codefence-block-math-with-right-alignment">Codefence Block Math with Right Alignment</h3>
|
|
<p>If you are using codefences, more <a href="/hugo-theme-relearn/shortcodes/math/index.html#parameter">parameter</a> are available. Your formulae still needs to be enclosed by <code>$</code> or <code>$$</code> as delimiters respectively.</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```math {align="right"}
|
|
</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>
|
|
<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="shortcode-block-math-with-right-alignment">Shortcode Block Math with Right Alignment</h3>
|
|
<p>You can also use shortcode syntax. Your formulae still needs to be enclosed by <code>$</code> or <code>$$</code> as delimiters respectively.</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{<span class="p"><</span> <span class="nt">math</span> <span class="na">align</span><span class="o">=</span><span class="s">"right"</span> <span class="p">></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"><</span> <span class="p">/</span><span class="nt">math</span> <span class="p">></span>}}</span></span></code></pre></div>
|
|
<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="chemical-formulae">Chemical Formulae</h3>
|
|
<p>The MathJax library can also be used for chemical formulae.</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$</span></span></code></pre></div>
|
|
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories cstyle" title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
|
<i class="fa-fw fas fa-layer-group"></i>
|
|
<ul>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/categories/howto/index.html">Howto</a></li>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/categories/reference/index.html">Reference</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="/hugo-theme-relearn/js/clipboard.min.js?1729808080" defer></script>
|
|
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1729808080" defer></script>
|
|
<script>
|
|
function useMathJax( config ){
|
|
window.MathJax = Object.assign( window.MathJax || {}, {
|
|
tex: {
|
|
inlineMath: [['\\(', '\\)'], ['$', '$']],
|
|
displayMath: [['\\[', '\\]'], ['$$', '$$']],
|
|
},
|
|
options: {
|
|
enableMenu: false
|
|
}
|
|
}, config );
|
|
}
|
|
useMathJax( JSON.parse("{}") );
|
|
</script>
|
|
<script id="MathJax-script" async src="/hugo-theme-relearn/js/mathjax/tex-mml-chtml.js?1729808080"></script>
|
|
<script src="/hugo-theme-relearn/js/theme.js?1729808080" defer></script>
|
|
</body>
|
|
</html>
|