mirror of
https://github.com/andatoshiki/toshiki-notebook.git
synced 2026-06-06 09:16:45 +00:00
51 lines
63 KiB
JavaScript
51 lines
63 KiB
JavaScript
import{_ as n,c as e,o as t,z as s,a,R as l}from"./chunks/framework.a1bac067.js";const v=JSON.parse(`{"title":"@andatoshiki/markdown-it-katex","description":"Documentation for Toshiki's markdown-it-katex fork as an alternative for GitHub readme mirror in case site inaccessibility due to SNI interference by GFW for users in China","frontmatter":{"title":"@andatoshiki/markdown-it-katex","description":"Documentation for Toshiki's markdown-it-katex fork as an alternative for GitHub readme mirror in case site inaccessibility due to SNI interference by GFW for users in China"},"headers":[],"relativePath":"application/markdown-it-katex/how-to-use.md","filePath":"application/markdown-it-katex/how-to-use.md","lastUpdated":1684906581000}`),p={name:"application/markdown-it-katex/how-to-use.md"},o=s("h1",{id:"andatoshiki-markdown-it-katex",tabindex:"-1"},[a("@andatoshiki/markdown-it-katex "),s("a",{class:"header-anchor",href:"#andatoshiki-markdown-it-katex","aria-label":'Permalink to "@andatoshiki/markdown-it-katex"'},"")],-1),r=s("blockquote",null,[s("p",null,[a("Add graceful "),s("span",{class:"katex"},[s("span",{class:"katex-mathml"},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("semantics",null,[s("mrow",null,[s("mtext",null,"KaTeX")]),s("annotation",{encoding:"application/x-tex"},"\\KaTeX")])])]),s("span",{class:"katex-html","aria-hidden":"true"},[s("span",{class:"base"},[s("span",{class:"strut",style:{height:"0.8988em","vertical-align":"-0.2155em"}}),s("span",{class:"mord text"},[s("span",{class:"mord textrm"},"K"),s("span",{class:"mspace",style:{"margin-right":"-0.17em"}}),s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.6833em"}},[s("span",{style:{top:"-2.905em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"mord"},[s("span",{class:"mord textrm mtight sizing reset-size6 size3"},"A")])])])])]),s("span",{class:"mspace",style:{"margin-right":"-0.15em"}}),s("span",{class:"mord text"},[s("span",{class:"mord textrm"},"T"),s("span",{class:"mspace",style:{"margin-right":"-0.1667em"}}),s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.4678em"}},[s("span",{style:{top:"-2.7845em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord"},[s("span",{class:"mord textrm"},"E")])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.2155em"}},[s("span")])])]),s("span",{class:"mspace",style:{"margin-right":"-0.125em"}}),s("span",{class:"mord textrm"},"X")])])])])]),a(" rendering to your Markdown like a charm with "),s("code",null,"markdown-it"),a(" plugin.")])],-1),c=l(`<h2 id="_1-installation" tabindex="-1">1: Installation <a class="header-anchor" href="#_1-installation" aria-label="Permalink to "1: Installation""></a></h2><p>Before you start using this plugin, make sure you have already installed the default <code>markdown-it</code> parser; if not, please run the following command or refer to the official <a href="https://github.com/markdown-it/markdown-it#install" target="_blank" rel="noreferrer"><code>markdown-it</code></a> documentation.</p><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">markdown-it</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">--save</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#61AFEF;">$</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">npm</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">install</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">markdown-it</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">--save</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>First install package with your preferred package manager (npm, yarn, pnpm), or include javascript before the closing <code></body></code> for markdown-it-katex's core utils to be loaded for the static page.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-YN2gv" id="tab-1Sm3W3W" checked="checked"><label for="tab-1Sm3W3W">npm</label><input type="radio" name="group-YN2gv" id="tab-txvJk_F"><label for="tab-txvJk_F">yarn</label><input type="radio" name="group-YN2gv" id="tab-ywJ418c"><label for="tab-ywJ418c">pnpm</label><input type="radio" name="group-YN2gv" id="tab-QnMJFaz"><label for="tab-QnMJFaz">cdn</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@andatoshiki/markdown-it-katex</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#61AFEF;">$</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">npm</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">install</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">-D</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">@andatoshiki/markdown-it-katex</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">--dev</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@andatoshiki/markdown-it-katex</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#61AFEF;">$</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">yarn</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">add</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">--dev</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">@andatoshiki/markdown-it-katex</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@andatoshiki/markdown-it-katex</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#61AFEF;">$</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">pnpm</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">add</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">-D</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">@andatoshiki/markdown-it-katex</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#676E95;font-style:italic;"><!-- your other body contents ... --></span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> <</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://unpkg.com/@andatoshiki/markdown-it-katex@0.0.3/markdown-it-katex.min.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#7F848E;font-style:italic;"><!-- your other body contents ... --></span></span>
|
||
<span class="line"><span style="color:#ABB2BF;"> <</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">src</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"https://unpkg.com/@andatoshiki/markdown-it-katex@0.0.3/markdown-it-katex.min.js"</span><span style="color:#ABB2BF;">></</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">></span></span>
|
||
<span class="line"><span style="color:#ABB2BF;"></</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div><p>Including KaTeX CSS is necessary in the way you are convenient with, either link the stylesheet from a third party CDN into the local HTML <code><head></code> tag or import it into a currently linked CSS stylesheets to enable styles for KaTeX globally as follows,</p><p>Or, you could clone or download the entire repository source of <a href="https://github.com/katex/katex" target="_blank" rel="noreferrer">KaTeX</a> and self load the fonts/styles/scripts locally, but if you prefer loading from third-party CDN with faster load speed when deployed to save your server resources, the following CDN links might be your choice, you can always switch to other platforms based on your need.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-dHjCI" id="tab-H-bELvz" checked="checked"><label for="tab-H-bELvz">jsdelivr</label><input type="radio" name="group-dHjCI" id="tab-2SCcLnk"><label for="tab-2SCcLnk">jsd-gcore</label><input type="radio" name="group-dHjCI" id="tab-z_pXUpP"><label for="tab-z_pXUpP">jsd-fastly</label><input type="radio" name="group-dHjCI" id="tab--gQASJ1"><label for="tab--gQASJ1">cdnjs</label><input type="radio" name="group-dHjCI" id="tab-81KSnoU"><label for="tab-81KSnoU">unpkg</label><input type="radio" name="group-dHjCI" id="tab-Ezo8gvB"><label for="tab-Ezo8gvB">scss or css</label></div><div class="blocks"><div class="language-html vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.css</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#ABB2BF;"><</span><span style="color:#E06C75;">link</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">rel</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"stylesheet"</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.css"</span><span style="color:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://gcore.jsdelivr.net/npm/katex@0.16/dist/katex.min.css</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#ABB2BF;"><</span><span style="color:#E06C75;">link</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">rel</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"stylesheet"</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"https://gcore.jsdelivr.net/npm/katex@0.16/dist/katex.min.css"</span><span style="color:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://fastly.jsdelivr.net/npm/katex@0.16/dist/katex.min.css</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#ABB2BF;"><</span><span style="color:#E06C75;">link</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">rel</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"stylesheet"</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"https://fastly.jsdelivr.net/npm/katex@0.16/dist/katex.min.css"</span><span style="color:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.0/katex.min.css</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#ABB2BF;"><</span><span style="color:#E06C75;">link</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">rel</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"stylesheet"</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.0/katex.min.css"</span><span style="color:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://unpkg.com/katex@0.16.0/dist/katex.min.css</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#ABB2BF;"><</span><span style="color:#E06C75;">link</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">rel</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"stylesheet"</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"https://unpkg.com/katex@0.16.0/dist/katex.min.css"</span><span style="color:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-scss vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#676E95;font-style:italic;">// ... your other styles</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">@import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">https://cdnjs.toshiki.dev/ajax/libs/KaTeX/0.16.0/katex.min.css</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#7F848E;font-style:italic;">// ... your other styles</span></span>
|
||
<span class="line"><span style="color:#C678DD;">@import</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">'https://cdnjs.toshiki.dev/ajax/libs/KaTeX/0.16.0/katex.min.css'</span><span style="color:#ABB2BF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div></div><p>If you are using the default markdown-it parser, I personally recommend that you use the GitHub markdown CSS (<a href="https://github.com/sindresorhus/github-markdown-css/" target="_blank" rel="noreferrer">github-markdown-css</a>) for styling your HTML output with a similar style replica of GitHub's markdown styling to your familiarity.</p><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://cdn.jsdelivr.net/npm/github-markdown-css@5.2.0/github-markdown.min.css</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#ABB2BF;"><</span><span style="color:#E06C75;">link</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">rel</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"stylesheet"</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">"https://cdn.jsdelivr.net/npm/github-markdown-css@5.2.0/github-markdown.min.css"</span><span style="color:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>This forked project maintained by <a href="https://github.com/andatoshiki" target="_blank" rel="noreferrer">Anda Toshiki</a> comes with the update of KaTeX components with higher style version support (this documentation uses KaTeX version <code>16.0</code>, without hassels), later versions may works, but no guarantees are given by the developers, if you are not obsessed with the latest released version, <code>16.0</code> may fits your need for loading KaTeX on a personal blog site or small educational sites; yet it should work fully functionally.</p><div class="danger custom-block"><p class="custom-block-title">Warning</p><p>Since this project is a fork of the <a href="https://www.npmjs.com/package/markdown-it-katex" target="_blank" rel="noreferrer">original</a> markdown-it-katex project that hasn't been receiving any active updates of its code source for years, the latest katex style version supported is somewhere around <code>ver. 0.9.0</code> which clearly is outdated and results in broken styles with overflowing and other potential bug presents.</p></div><h2 id="_2-usage" tabindex="-1">2: Usage <a class="header-anchor" href="#_2-usage" aria-label="Permalink to "2: Usage""></a></h2><p>RTo render equations, you need to include the <code>markdown-it-katex</code> plugin in the <code>markdown-it</code> components in your JavaScript or TypeScript file as follows,</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-xl6T9" id="tab-Su1TNoS" checked="checked"><label for="tab-Su1TNoS">js</label><input type="radio" name="group-xl6T9" id="tab-bb9v7su"><label for="tab-bb9v7su">ts</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> md </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">markdown-it</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)()</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> mk </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">andatoshiki/markdown-it-katex</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#A6ACCD;">md</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(mk)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;">// double backslash is required for javascript strings, but not html input</span></span>
|
||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> result </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> md</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;"># Math Rulez! </span><span style="color:#A6ACCD;">\\n</span><span style="color:#C3E88D;"> $</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">sqrt{3x-1}+(1+x)^2$</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#C678DD;">var</span><span style="color:#ABB2BF;"> </span><span style="color:#E06C75;">md</span><span style="color:#ABB2BF;"> </span><span style="color:#56B6C2;">=</span><span style="color:#ABB2BF;"> </span><span style="color:#61AFEF;">require</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">'markdown-it'</span><span style="color:#ABB2BF;">)(),</span></span>
|
||
<span class="line"><span style="color:#ABB2BF;"> </span><span style="color:#E06C75;">mk</span><span style="color:#ABB2BF;"> </span><span style="color:#56B6C2;">=</span><span style="color:#ABB2BF;"> </span><span style="color:#61AFEF;">require</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">'andatoshiki/markdown-it-katex'</span><span style="color:#ABB2BF;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E5C07B;">md</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">use</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">mk</span><span style="color:#ABB2BF;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#7F848E;font-style:italic;">// double backslash is required for javascript strings, but not html input</span></span>
|
||
<span class="line"><span style="color:#C678DD;">var</span><span style="color:#ABB2BF;"> </span><span style="color:#E06C75;">result</span><span style="color:#ABB2BF;"> </span><span style="color:#56B6C2;">=</span><span style="color:#ABB2BF;"> </span><span style="color:#E5C07B;">md</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">render</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">'# Math Rulez! </span><span style="color:#56B6C2;">\\n</span><span style="color:#98C379;"> $</span><span style="color:#56B6C2;">\\\\</span><span style="color:#98C379;">sqrt{3x-1}+(1+x)^2$'</span><span style="color:#ABB2BF;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#A6ACCD;"> mk </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">markdown-it-katex</span><span style="color:#89DDFF;">'</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#A6ACCD;"> MarkdownIt </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@andatoshiki/markdown-it</span><span style="color:#89DDFF;">'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> md </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">MarkdownIt</span><span style="color:#A6ACCD;">()</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">md</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(mk)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;">// double backslash is not required for TypeScript strings or template literals</span></span>
|
||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> result </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> md</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;"># Math Rulez! </span><span style="color:#A6ACCD;">\\n</span><span style="color:#C3E88D;"> $</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">sqrt{3x-1}+(1+x)^2$</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#C678DD;">import</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">*</span><span style="color:#ABB2BF;"> </span><span style="color:#C678DD;">as</span><span style="color:#ABB2BF;"> </span><span style="color:#E06C75;">mk</span><span style="color:#ABB2BF;"> </span><span style="color:#C678DD;">from</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">'markdown-it-katex'</span></span>
|
||
<span class="line"><span style="color:#C678DD;">import</span><span style="color:#ABB2BF;"> </span><span style="color:#D19A66;">*</span><span style="color:#ABB2BF;"> </span><span style="color:#C678DD;">as</span><span style="color:#ABB2BF;"> </span><span style="color:#E06C75;">MarkdownIt</span><span style="color:#ABB2BF;"> </span><span style="color:#C678DD;">from</span><span style="color:#ABB2BF;"> </span><span style="color:#98C379;">'@andatoshiki/markdown-it'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#C678DD;">const</span><span style="color:#ABB2BF;"> </span><span style="color:#E5C07B;">md</span><span style="color:#ABB2BF;"> </span><span style="color:#56B6C2;">=</span><span style="color:#ABB2BF;"> </span><span style="color:#C678DD;">new</span><span style="color:#ABB2BF;"> </span><span style="color:#61AFEF;">MarkdownIt</span><span style="color:#ABB2BF;">()</span></span>
|
||
<span class="line"><span style="color:#E5C07B;">md</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">use</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">mk</span><span style="color:#ABB2BF;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#7F848E;font-style:italic;">// double backslash is not required for TypeScript strings or template literals</span></span>
|
||
<span class="line"><span style="color:#C678DD;">const</span><span style="color:#ABB2BF;"> </span><span style="color:#E5C07B;">result</span><span style="color:#ABB2BF;"> </span><span style="color:#56B6C2;">=</span><span style="color:#ABB2BF;"> </span><span style="color:#E5C07B;">md</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">render</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">'# Math Rulez! </span><span style="color:#56B6C2;">\\n</span><span style="color:#98C379;"> $</span><span style="color:#56B6C2;">\\\\</span><span style="color:#98C379;">sqrt{3x-1}+(1+x)^2$'</span><span style="color:#ABB2BF;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></div></div><h3 id="_3-configuration" tabindex="-1">3: Configuration <a class="header-anchor" href="#_3-configuration" aria-label="Permalink to "3: Configuration""></a></h3><p>The following list of variable are the customizable components of <code>markdown-it-katex</code>, adjust to your needs,</p><ul><li><code>katex</code>: You can change KaTeX version by passing the instance.</li><li><code>blockClass</code>: Class added to KaTeX block.</li><li>Apply any other <a href="https://katex.org/docs/options.html" target="_blank" rel="noreferrer">KaTeX options</a> if needed as a regard to the docs</li></ul><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#A6ACCD;">md</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(mk</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">blockClass</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">math-block</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">errorColor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;"> #cc0000</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#E5C07B;">md</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">use</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">mk</span><span style="color:#ABB2BF;">, { </span><span style="color:#E06C75;">blockClass</span><span style="color:#ABB2BF;">: </span><span style="color:#98C379;">'math-block'</span><span style="color:#ABB2BF;">, </span><span style="color:#E06C75;">errorColor</span><span style="color:#ABB2BF;">: </span><span style="color:#98C379;">' #cc0000'</span><span style="color:#ABB2BF;"> })</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="_4-examples" tabindex="-1">4: Examples <a class="header-anchor" href="#_4-examples" aria-label="Permalink to "4: Examples""></a></h2><h3 id="_4-1-inline-math" tabindex="-1">4.1: Inline math <a class="header-anchor" href="#_4-1-inline-math" aria-label="Permalink to "4.1: Inline math""></a></h3><p>To render your LaTeX equations inline, enclose them with a single dollar sign <code>$</code> on each side of the equation as follows,</p><div class="language-tex vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tex</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#89DDFF;">$</span><span style="color:#89DDFF;">\\</span><span style="color:#FFCB6B;">sqrt</span><span style="color:#89DDFF;">{</span><span style="color:#F78C6C;">3</span><span style="color:#FFCB6B;">x</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">}+(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">+</span><span style="color:#FFCB6B;">x</span><span style="color:#89DDFF;">)^</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">$</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#E5C07B;">$</span><span style="color:#D19A66;">\\sqrt</span><span style="color:#E5C07B;">{</span><span style="color:#D19A66;">3</span><span style="color:#E5C07B;">x-</span><span style="color:#D19A66;">1</span><span style="color:#E5C07B;">}+(</span><span style="color:#D19A66;">1</span><span style="color:#E5C07B;">+x)^</span><span style="color:#D19A66;">2</span><span style="color:#E5C07B;">$</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div>`,23),i=s("p",null,[a("rendered output equation as follows, "),s("span",{class:"katex"},[s("span",{class:"katex-mathml"},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("semantics",null,[s("mrow",null,[s("msqrt",null,[s("mrow",null,[s("mn",null,"3"),s("mi",null,"x"),s("mo",null,"−"),s("mn",null,"1")])]),s("mo",null,"+"),s("mo",{stretchy:"false"},"("),s("mn",null,"1"),s("mo",null,"+"),s("mi",null,"x"),s("msup",null,[s("mo",{stretchy:"false"},")"),s("mn",null,"2")])]),s("annotation",{encoding:"application/x-tex"},"\\sqrt{3x-1}+(1+x)^2")])])]),s("span",{class:"katex-html","aria-hidden":"true"},[s("span",{class:"base"},[s("span",{class:"strut",style:{height:"1.04em","vertical-align":"-0.1744em"}}),s("span",{class:"mord sqrt"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.8656em"}},[s("span",{class:"svg-align",style:{top:"-3em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord",style:{"padding-left":"0.833em"}},[s("span",{class:"mord"},"3"),s("span",{class:"mord mathnormal"},"x"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mbin"},"−"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mord"},"1")])]),s("span",{style:{top:"-2.8256em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"hide-tail",style:{"min-width":"0.853em",height:"1.08em"}},[s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"400em",height:"1.08em",viewBox:"0 0 400000 1080",preserveAspectRatio:"xMinYMin slice"},[s("path",{d:`M95,702
|
||
c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14
|
||
c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54
|
||
c44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10
|
||
s173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429
|
||
c69,-144,104.5,-217.7,106.5,-221
|
||
l0 -0
|
||
c5.3,-9.3,12,-14,20,-14
|
||
H400000v40H845.2724
|
||
s-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7
|
||
c-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z
|
||
M834 80h400000v40h-400000z`})])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.1744em"}},[s("span")])])])]),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mbin"},"+"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}})]),s("span",{class:"base"},[s("span",{class:"strut",style:{height:"1em","vertical-align":"-0.25em"}}),s("span",{class:"mopen"},"("),s("span",{class:"mord"},"1"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mbin"},"+"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}})]),s("span",{class:"base"},[s("span",{class:"strut",style:{height:"1.0641em","vertical-align":"-0.25em"}}),s("span",{class:"mord mathnormal"},"x"),s("span",{class:"mclose"},[s("span",{class:"mclose"},")"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.8141em"}},[s("span",{style:{top:"-3.063em","margin-right":"0.05em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mtight"},"2")])])])])])])])])])]),a(".")],-1),m=l(`<h3 id="_4-2-blocked-math" tabindex="-1">4.2: Blocked math <a class="header-anchor" href="#_4-2-blocked-math" aria-label="Permalink to "4.2: Blocked math""></a></h3><p>To render blocks, use double dollar sign (<code>$$</code>). This mode utilizes larger symbols and centers the result as a block displayed as a <code><div></code> block in HTML output, as follows,</p><div class="language-tex vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tex</span><pre class="shiki material-theme-palenight vp-code-dark"><code><span class="line"><span style="color:#89DDFF;">$$</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">\\</span><span style="color:#FFCB6B;">frac </span><span style="color:#89DDFF;">{\\</span><span style="color:#FFCB6B;">partial</span><span style="color:#89DDFF;">^</span><span style="color:#FFCB6B;">r</span><span style="color:#89DDFF;">}</span><span style="color:#FFCB6B;"> </span><span style="color:#89DDFF;">{\\</span><span style="color:#FFCB6B;">partial </span><span style="color:#89DDFF;">\\</span><span style="color:#FFCB6B;">omega</span><span style="color:#89DDFF;">^</span><span style="color:#FFCB6B;">r</span><span style="color:#89DDFF;">}</span><span style="color:#FFCB6B;"> </span><span style="color:#89DDFF;">\\left(\\</span><span style="color:#FFCB6B;">frac </span><span style="color:#89DDFF;">{</span><span style="color:#FFCB6B;">y</span><span style="color:#89DDFF;">^{\\</span><span style="color:#FFCB6B;">omega</span><span style="color:#89DDFF;">}}</span><span style="color:#FFCB6B;"> </span><span style="color:#89DDFF;">{\\</span><span style="color:#FFCB6B;">omega</span><span style="color:#89DDFF;">}\\right)</span></span>
|
||
<span class="line"><span style="color:#FFCB6B;">= </span><span style="color:#89DDFF;">\\left(\\</span><span style="color:#FFCB6B;">frac </span><span style="color:#89DDFF;">{</span><span style="color:#FFCB6B;">y</span><span style="color:#89DDFF;">^{\\</span><span style="color:#FFCB6B;">omega</span><span style="color:#89DDFF;">}}</span><span style="color:#FFCB6B;"> </span><span style="color:#89DDFF;">{\\</span><span style="color:#FFCB6B;">omega</span><span style="color:#89DDFF;">}\\right)</span><span style="color:#FFCB6B;"> </span><span style="color:#89DDFF;">\\left\\{(\\</span><span style="color:#FFCB6B;">log y</span><span style="color:#89DDFF;">)^</span><span style="color:#FFCB6B;">r </span><span style="color:#89DDFF;">+</span><span style="color:#FFCB6B;"> </span><span style="color:#89DDFF;">\\</span><span style="color:#FFCB6B;">sum</span><span style="color:#89DDFF;">_{</span><span style="color:#FFCB6B;">i=</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">}^</span><span style="color:#FFCB6B;">r </span><span style="color:#89DDFF;">\\</span><span style="color:#FFCB6B;">frac </span><span style="color:#89DDFF;">{(-</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">)^</span><span style="color:#FFCB6B;"> Ir </span><span style="color:#89DDFF;">\\</span><span style="color:#FFCB6B;">cdots </span><span style="color:#89DDFF;">(</span><span style="color:#FFCB6B;">r</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">i</span><span style="color:#89DDFF;">+</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">)</span><span style="color:#FFCB6B;"> </span><span style="color:#89DDFF;">(\\</span><span style="color:#FFCB6B;">log y</span><span style="color:#89DDFF;">)^{</span><span style="color:#FFCB6B;">ri</span><span style="color:#89DDFF;">}}</span><span style="color:#FFCB6B;"> </span><span style="color:#89DDFF;">{\\</span><span style="color:#FFCB6B;">omega</span><span style="color:#89DDFF;">^</span><span style="color:#FFCB6B;">i</span><span style="color:#89DDFF;">}</span><span style="color:#FFCB6B;"> </span><span style="color:#89DDFF;">\\right\\}</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">$$</span></span></code></pre><pre class="shiki one-dark-pro vp-code-light"><code><span class="line"><span style="color:#E5C07B;">$$</span></span>
|
||
<span class="line"><span style="color:#D19A66;">\\frac</span><span style="color:#E5C07B;"> {</span><span style="color:#D19A66;">\\partial</span><span style="color:#E5C07B;">^r} {</span><span style="color:#D19A66;">\\partial</span><span style="color:#E5C07B;"> </span><span style="color:#D19A66;">\\omega</span><span style="color:#E5C07B;">^r} \\left(</span><span style="color:#D19A66;">\\frac</span><span style="color:#E5C07B;"> {y^{</span><span style="color:#D19A66;">\\omega</span><span style="color:#E5C07B;">}} {</span><span style="color:#D19A66;">\\omega</span><span style="color:#E5C07B;">}\\right)</span></span>
|
||
<span class="line"><span style="color:#E5C07B;">= \\left(</span><span style="color:#D19A66;">\\frac</span><span style="color:#E5C07B;"> {y^{</span><span style="color:#D19A66;">\\omega</span><span style="color:#E5C07B;">}} {</span><span style="color:#D19A66;">\\omega</span><span style="color:#E5C07B;">}\\right) \\left\\{(</span><span style="color:#D19A66;">\\log</span><span style="color:#E5C07B;"> y)^r + </span><span style="color:#D19A66;">\\sum</span><span style="color:#E5C07B;">_{i=</span><span style="color:#D19A66;">1</span><span style="color:#E5C07B;">}^r </span><span style="color:#D19A66;">\\frac</span><span style="color:#E5C07B;"> {(-</span><span style="color:#D19A66;">1</span><span style="color:#E5C07B;">)^ Ir </span><span style="color:#D19A66;">\\cdots</span><span style="color:#E5C07B;"> (r-i+</span><span style="color:#D19A66;">1</span><span style="color:#E5C07B;">) (</span><span style="color:#D19A66;">\\log</span><span style="color:#E5C07B;"> y)^{ri}} {</span><span style="color:#D19A66;">\\omega</span><span style="color:#E5C07B;">^i} \\right\\}</span></span>
|
||
<span class="line"><span style="color:#E5C07B;">$$</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>the above block equation renders the LaTeX equation as a block with output as follows,</p>`,4),y=s("p",{class:"katex-block"},[s("span",{class:"katex-display"},[s("span",{class:"katex"},[s("span",{class:"katex-mathml"},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block"},[s("semantics",null,[s("mrow",null,[s("mfrac",null,[s("msup",null,[s("mi",{mathvariant:"normal"},"∂"),s("mi",null,"r")]),s("mrow",null,[s("mi",{mathvariant:"normal"},"∂"),s("msup",null,[s("mi",null,"ω"),s("mi",null,"r")])])]),s("mrow",null,[s("mo",{fence:"true"},"("),s("mfrac",null,[s("msup",null,[s("mi",null,"y"),s("mi",null,"ω")]),s("mi",null,"ω")]),s("mo",{fence:"true"},")")]),s("mo",null,"="),s("mrow",null,[s("mo",{fence:"true"},"("),s("mfrac",null,[s("msup",null,[s("mi",null,"y"),s("mi",null,"ω")]),s("mi",null,"ω")]),s("mo",{fence:"true"},")")]),s("mrow",null,[s("mo",{fence:"true"},"{"),s("mo",{stretchy:"false"},"("),s("mi",null,"log"),s("mo",null,""),s("mi",null,"y"),s("msup",null,[s("mo",{stretchy:"false"},")"),s("mi",null,"r")]),s("mo",null,"+"),s("munderover",null,[s("mo",null,"∑"),s("mrow",null,[s("mi",null,"i"),s("mo",null,"="),s("mn",null,"1")]),s("mi",null,"r")]),s("mfrac",null,[s("mrow",null,[s("mo",{stretchy:"false"},"("),s("mo",null,"−"),s("mn",null,"1"),s("msup",null,[s("mo",{stretchy:"false"},")"),s("mi",null,"I")]),s("mi",null,"r"),s("mo",null,"⋯"),s("mo",{stretchy:"false"},"("),s("mi",null,"r"),s("mo",null,"−"),s("mi",null,"i"),s("mo",null,"+"),s("mn",null,"1"),s("mo",{stretchy:"false"},")"),s("mo",{stretchy:"false"},"("),s("mi",null,"log"),s("mo",null,""),s("mi",null,"y"),s("msup",null,[s("mo",{stretchy:"false"},")"),s("mrow",null,[s("mi",null,"r"),s("mi",null,"i")])])]),s("msup",null,[s("mi",null,"ω"),s("mi",null,"i")])]),s("mo",{fence:"true"},"}")])]),s("annotation",{encoding:"application/x-tex"},"\\frac {\\partial^r} {\\partial \\omega^r} \\left(\\frac {y^{\\omega}} {\\omega}\\right) = \\left(\\frac {y^{\\omega}} {\\omega}\\right) \\left\\{(\\log y)^r + \\sum_{i=1}^r \\frac {(-1)^ Ir \\cdots (r-i+1) (\\log y)^{ri}} {\\omega^i} \\right\\} ")])])]),s("span",{class:"katex-html","aria-hidden":"true"},[s("span",{class:"base"},[s("span",{class:"strut",style:{height:"2.4em","vertical-align":"-0.95em"}}),s("span",{class:"mord"},[s("span",{class:"mopen nulldelimiter"}),s("span",{class:"mfrac"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"1.3714em"}},[s("span",{style:{top:"-2.314em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord"},[s("span",{class:"mord",style:{"margin-right":"0.05556em"}},"∂"),s("span",{class:"mord"},[s("span",{class:"mord mathnormal",style:{"margin-right":"0.03588em"}},"ω"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.5904em"}},[s("span",{style:{top:"-2.989em","margin-right":"0.05em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.02778em"}},"r")])])])])])])])])]),s("span",{style:{top:"-3.23em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"frac-line",style:{"border-bottom-width":"0.04em"}})]),s("span",{style:{top:"-3.677em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},[s("span",{class:"mord",style:{"margin-right":"0.05556em"}},"∂"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.6644em"}},[s("span",{style:{top:"-3.063em","margin-right":"0.05em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.02778em"}},"r")])])])])])])])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.686em"}},[s("span")])])])]),s("span",{class:"mclose nulldelimiter"})]),s("span",{class:"mspace",style:{"margin-right":"0.1667em"}}),s("span",{class:"minner"},[s("span",{class:"mopen delimcenter",style:{top:"0em"}},[s("span",{class:"delimsizing size3"},"(")]),s("span",{class:"mord"},[s("span",{class:"mopen nulldelimiter"}),s("span",{class:"mfrac"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"1.3414em"}},[s("span",{style:{top:"-2.314em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord"},[s("span",{class:"mord mathnormal",style:{"margin-right":"0.03588em"}},"ω")])]),s("span",{style:{top:"-3.23em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"frac-line",style:{"border-bottom-width":"0.04em"}})]),s("span",{style:{top:"-3.677em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},[s("span",{class:"mord mathnormal",style:{"margin-right":"0.03588em"}},"y"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.6644em"}},[s("span",{style:{top:"-3.063em","margin-right":"0.05em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.03588em"}},"ω")])])])])])])])])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.686em"}},[s("span")])])])]),s("span",{class:"mclose nulldelimiter"})]),s("span",{class:"mclose delimcenter",style:{top:"0em"}},[s("span",{class:"delimsizing size3"},")")])]),s("span",{class:"mspace",style:{"margin-right":"0.2778em"}}),s("span",{class:"mrel"},"="),s("span",{class:"mspace",style:{"margin-right":"0.2778em"}})]),s("span",{class:"base"},[s("span",{class:"strut",style:{height:"3.0277em","vertical-align":"-1.2777em"}}),s("span",{class:"minner"},[s("span",{class:"mopen delimcenter",style:{top:"0em"}},[s("span",{class:"delimsizing size3"},"(")]),s("span",{class:"mord"},[s("span",{class:"mopen nulldelimiter"}),s("span",{class:"mfrac"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"1.3414em"}},[s("span",{style:{top:"-2.314em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord"},[s("span",{class:"mord mathnormal",style:{"margin-right":"0.03588em"}},"ω")])]),s("span",{style:{top:"-3.23em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"frac-line",style:{"border-bottom-width":"0.04em"}})]),s("span",{style:{top:"-3.677em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},[s("span",{class:"mord mathnormal",style:{"margin-right":"0.03588em"}},"y"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.6644em"}},[s("span",{style:{top:"-3.063em","margin-right":"0.05em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.03588em"}},"ω")])])])])])])])])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.686em"}},[s("span")])])])]),s("span",{class:"mclose nulldelimiter"})]),s("span",{class:"mclose delimcenter",style:{top:"0em"}},[s("span",{class:"delimsizing size3"},")")])]),s("span",{class:"mspace",style:{"margin-right":"0.1667em"}}),s("span",{class:"minner"},[s("span",{class:"mopen delimcenter",style:{top:"0em"}},[s("span",{class:"delimsizing size4"},"{")]),s("span",{class:"mopen"},"("),s("span",{class:"mop"},[a("lo"),s("span",{style:{"margin-right":"0.01389em"}},"g")]),s("span",{class:"mspace",style:{"margin-right":"0.1667em"}}),s("span",{class:"mord mathnormal",style:{"margin-right":"0.03588em"}},"y"),s("span",{class:"mclose"},[s("span",{class:"mclose"},")"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.7144em"}},[s("span",{style:{top:"-3.113em","margin-right":"0.05em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.02778em"}},"r")])])])])])])]),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mbin"},"+"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mop op-limits"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"1.6514em"}},[s("span",{style:{top:"-1.8723em","margin-left":"0em"}},[s("span",{class:"pstrut",style:{height:"3.05em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mathnormal mtight"},"i"),s("span",{class:"mrel mtight"},"="),s("span",{class:"mord mtight"},"1")])])]),s("span",{style:{top:"-3.05em"}},[s("span",{class:"pstrut",style:{height:"3.05em"}}),s("span",null,[s("span",{class:"mop op-symbol large-op"},"∑")])]),s("span",{style:{top:"-4.3em","margin-left":"0em"}},[s("span",{class:"pstrut",style:{height:"3.05em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.02778em"}},"r")])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"1.2777em"}},[s("span")])])])]),s("span",{class:"mspace",style:{"margin-right":"0.1667em"}}),s("span",{class:"mord"},[s("span",{class:"mopen nulldelimiter"}),s("span",{class:"mfrac"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"1.5183em"}},[s("span",{style:{top:"-2.314em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},[s("span",{class:"mord mathnormal",style:{"margin-right":"0.03588em"}},"ω"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.7507em"}},[s("span",{style:{top:"-2.989em","margin-right":"0.05em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mathnormal mtight"},"i")])])])])])])])])]),s("span",{style:{top:"-3.23em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"frac-line",style:{"border-bottom-width":"0.04em"}})]),s("span",{style:{top:"-3.677em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"mord"},[s("span",{class:"mopen"},"("),s("span",{class:"mord"},"−"),s("span",{class:"mord"},"1"),s("span",{class:"mclose"},[s("span",{class:"mclose"},")"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.8413em"}},[s("span",{style:{top:"-3.063em","margin-right":"0.05em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.07847em"}},"I")])])])])])])]),s("span",{class:"mord mathnormal",style:{"margin-right":"0.02778em"}},"r"),s("span",{class:"mspace",style:{"margin-right":"0.1667em"}}),s("span",{class:"minner"},"⋯"),s("span",{class:"mspace",style:{"margin-right":"0.1667em"}}),s("span",{class:"mopen"},"("),s("span",{class:"mord mathnormal",style:{"margin-right":"0.02778em"}},"r"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mbin"},"−"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mord mathnormal"},"i"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mbin"},"+"),s("span",{class:"mspace",style:{"margin-right":"0.2222em"}}),s("span",{class:"mord"},"1"),s("span",{class:"mclose"},")"),s("span",{class:"mopen"},"("),s("span",{class:"mop"},[a("lo"),s("span",{style:{"margin-right":"0.01389em"}},"g")]),s("span",{class:"mspace",style:{"margin-right":"0.1667em"}}),s("span",{class:"mord mathnormal",style:{"margin-right":"0.03588em"}},"y"),s("span",{class:"mclose"},[s("span",{class:"mclose"},")"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.8247em"}},[s("span",{style:{top:"-3.063em","margin-right":"0.05em"}},[s("span",{class:"pstrut",style:{height:"2.7em"}}),s("span",{class:"sizing reset-size6 size3 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.02778em"}},"r"),s("span",{class:"mord mathnormal mtight"},"i")])])])])])])])])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.686em"}},[s("span")])])])]),s("span",{class:"mclose nulldelimiter"})]),s("span",{class:"mclose delimcenter",style:{top:"0em"}},[s("span",{class:"delimsizing size4"},"}")])])])])])])],-1),d=l('<h2 id="_5-syntax" tabindex="-1">5: Syntax <a class="header-anchor" href="#_5-syntax" aria-label="Permalink to "5: Syntax""></a></h2><p>Math parsing in markdown is designed to comply with the "latex-in-markdown" conventions set by <a href="https://pandoc.org" target="_blank" rel="noreferrer">Pandoc</a>,</p><p>Anything between two <code>$</code> characters will be treated as TeX math. The opening <code>$</code> must have a non-space character immediately to its right, while the closing $ must have a non-space character immediately to its left, and must not be followed immediately by a digit. Thus, <code>$20,000</code> and <code>$30,000</code> won’t parse as math. If for some reason you need to enclose text in literal <code>$</code> characters, backslash-escape them and they won’t be treated as math delimiters.</p><blockquote><ul><li>Pandoc. “Pandoc - Pandoc User’s Guide.” Pandoc.org, pandoc.org/MANUAL.html#math. Accessed 2 Mar. 2023.</li></ul></blockquote><h2 id="_6-supported-math-syntax" tabindex="-1">6: Supported math syntax <a class="header-anchor" href="#_6-supported-math-syntax" aria-label="Permalink to "6: Supported math syntax""></a></h2><p>KaTeX is a popular, open-source math typesetting library that is based on TeX and LaTeX. It is designed to be easy to use, and to provide high-quality mathematical typesetting for web applications, refer to the following pages of the document for the full list of function support in KaTeX.</p><div class="info custom-block"><p class="custom-block-title">Note</p><p>Due to the large number of equations rendered on the next following pages, it might takes time to entirely load the webpage, please be patient if the webpage seems to not respond; or it could be a result of slow network connection to correctly render all the equation that causes broken formulas, refresh the page to proceed.</p></div>',7),h=[o,r,c,i,m,y,d];function F(u,D,g,B,C,b){return t(),e("div",null,h)}const k=n(p,[["render",F]]);export{v as __pageData,k as default};
|