152 lines
45 KiB
HTML
152 lines
45 KiB
HTML
<!doctype html>
|
||
<html class="dark" lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<link rel="icon" href="../favicon.png" />
|
||
<meta name="viewport" content="width=device-width" />
|
||
|
||
<link href="../_app/immutable/assets/0.7vSfiuRl.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/community-plugins.D9MMIz_R.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/examples.RBYF0z3s.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/index.DMK8G4el.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/math.DAoj5Yzl.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/3.DWbm9oEh.css" rel="stylesheet">
|
||
<link rel="modulepreload" href="../_app/immutable/entry/start.BivPHxkC.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/entry.BgMXaDeF.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/scheduler.DKiYiPX0.js">
|
||
<link rel="modulepreload" href="../_app/immutable/entry/app.BXoi511P.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/preload-helper.BQ24v_F8.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/index.z4bt_ZBS.js">
|
||
<link rel="modulepreload" href="../_app/immutable/nodes/0.BI5UDqBb.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/_commonjsHelpers.bU_6Y6tS.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/Link.Dt5uOJAy.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/index.CvmYViMX.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/spread.CgU5AtxT.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/stores.DCXLGCG9.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/index.Ba2w8Bvc.js">
|
||
<link rel="modulepreload" href="../_app/immutable/nodes/3.CzhdhRpU.js"><title>Math - Carta</title><!-- HEAD_svelte-lepr8h_START --><!-- HEAD_svelte-lepr8h_END -->
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<!-- Inter -->
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<!-- Fira Code -->
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
</head>
|
||
<body data-sveltekit-preload-data="hover">
|
||
<div style="display: contents"> <nav class="fixed left-0 right-0 top-0 z-10 bg-neutral-900 bg-opacity-50 backdrop-blur-2xl backdrop-filter"><div class="container mx-auto flex items-center justify-between px-4 py-1 sm:px-6"><a href="../"><img src="../logo.png" class="h-8" alt="carta logo"></a> <div class="flex-grow"></div> <button class="mr-2 block aspect-square md:hidden" data-svelte-h="svelte-1ff08e9"><iconify-icon icon="ion:search" class="text-2xl text-neutral-200"></iconify-icon></button> <button class="hidden w-[360px] items-center justify-between rounded-lg border border-neutral-700 bg-neutral-900 px-2 py-1.5 text-sm md:flex mx-auto"><div class="inline-flex items-center space-x-2" data-svelte-h="svelte-1kkkjyx"><iconify-icon icon="ion:search" class="text-xl text-neutral-500"></iconify-icon> <span class="text-neutral-500">Search...</span></div> <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100" data-svelte-h="svelte-zz9ey7"><span class="text-xs">⌘</span>K</kbd></button> <div data-portal="" data-melt-dialog-portalled="" data-bits-dialog-portal=""> </div> <div class="hidden flex-grow md:block"></div> <a href="https://github.com/BearToCode/carta" class="flex h-12 items-center space-x-2 p-2 ml-auto"><iconify-icon icon="mdi:github" class="text-2xl"></iconify-icon> <div class="hidden h-min flex-col justify-center space-y-1 md:flex"><p class="text-[0.9rem] font-semibold leading-3" data-svelte-h="svelte-pjnc05">BearToCode/carta</p> <div class="pulse my-1.5 h-3 w-[80px] rounded-full bg-neutral-800"></div></div></a></div> <div class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-neutral-900 via-neutral-700 to-neutral-900"></div></nav> <div class="filter-blur-xl min-h-screen w-full py-16 xl:py-24"><div class="fixed bottom-0 left-0 right-0 top-0 z-[-1] backdrop-blur-2xl backdrop-filter" style="background: url(../background.png) no-repeat center center; background-size: cover;"></div> <div class="container mb-4 w-full border-b border-neutral-800 px-4 pb-1 sm:px-6 xl:hidden"><button class="text-neutral-500 hover:text-neutral-200" data-svelte-h="svelte-16xt1x4"><iconify-icon icon="ci:hamburger-lg" class="text-3xl"></iconify-icon></button></div> <div class="container relative mx-auto flex px-4 sm:px-6"><div class="h-full sticky top-24 hidden xl:block"><h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0" data-svelte-h="svelte-4l22iw">Overview</h3> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../introduction"><iconify-icon icon="radix-icons:dashboard" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-hmyc8p">Introduction</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../examples"><iconify-icon icon="ph:codesandbox-logo" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-zntwz8">Examples</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../getting-started"><iconify-icon icon="ic:round-download" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-10em7s">Getting Started</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../editing-styles"><iconify-icon icon="lucide:palette" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-1v8s4yb">Editing Styles</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../migration"><iconify-icon icon="material-symbols:upgrade" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-1t554qx">Migration</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../community-plugins"><iconify-icon icon="ph:stack-fill" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-oj1sxw">Community Plugins</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../using-components"><iconify-icon icon="ri:svelte-fill" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-193bojt">Using Components</span></a> <h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0" data-svelte-h="svelte-12104bp">Plugins</h3> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/math"><iconify-icon icon="tabler:math" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-17rk523">Math</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/code"><iconify-icon icon="fluent:code-16-filled" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-76jeei">Code</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/emoji"><iconify-icon icon="mingcute:emoji-line" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-64nitr">Emoji</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/slash"><iconify-icon icon="tabler:slash" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-rxesng">Slash</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/tikz"><iconify-icon icon="mdi:draw-pen" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-1aormjr">TikZ</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/attachment"><iconify-icon icon="tdesign:attach" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-ref5p2">Attachment</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/anchor"><iconify-icon icon="mingcute:link-fill" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-10ozri2">Anchor</span></a> <h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0" data-svelte-h="svelte-11166a1">API</h3> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../api/utilities"><span class="text-[0.95rem]" data-svelte-h="svelte-1it2439">Utilities</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../api/core"><span class="text-[0.95rem]" data-svelte-h="svelte-1ud5hhw">Core</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../api/extension"><span class="text-[0.95rem]" data-svelte-h="svelte-17upky4">Extension</span></a></div> <main class="container max-w-4xl flex-shrink-0 flex-grow px-0 xl:max-w-3xl xl:px-4 2xl:max-w-4xl"> <h3 class="mb-2 font-semibold text-sky-300">Plugins</h3> <h1 class="mb-4 text-5xl font-bold text-white">Math</h1> <div class="markdown"> <!-- HTML_TAG_START --><p data-svelte-h="svelte-1cn0xqo">This plugins adds support for <a href="https://katex.org/" rel="nofollow">KaTeX</a> expressions.</p> <h2 id="installation" data-svelte-h="svelte-18vig38"><a href="#installation">Installation</a></h2> <div class="relative"><pre class="language-undefined"><!-- HTML_TAG_START --><code class="language-undefined">npm i @cartamd/plugin-math</code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h2 id="setup" data-svelte-h="svelte-1uj9ei1"><a href="#setup">Setup</a></h2> <h3 id="styles" data-svelte-h="svelte-1obsuhg"><a href="#styles">Styles</a></h3> <p data-svelte-h="svelte-rxhqnq">You need to get access to the katex <strong>stylesheet</strong>,
|
||
to do so, you can either install katex using:</p> <div class="relative"><pre class="language-undefined"><!-- HTML_TAG_START --><code class="language-undefined">npm i katex</code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <p data-svelte-h="svelte-hergql">and then adding this import to your app:</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">import</span> <span class="token string">'katex/dist/katex.css'</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <p data-svelte-h="svelte-cvp7mk">or by using a content delivery network:</p> <div class="relative"><pre class="language-html"><!-- HTML_TAG_START --><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span>
|
||
<span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">integrity</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span></code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h3 id="extension" data-svelte-h="svelte-1h1d05d"><a href="#extension">Extension</a></h3> <div class="relative"><pre class="language-svelte"><!-- HTML_TAG_START --><code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Carta<span class="token punctuation">,</span> MarkdownEditor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'carta-md'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> math <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@cartamd/plugin-math'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> carta <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Carta</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">extensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">math</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MarkdownEditor</span> <span class="token language-javascript"><span class="token punctuation">{</span>carta<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span></code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h2 id="usage" data-svelte-h="svelte-iylfsz"><a href="#usage">Usage</a></h2> <p data-svelte-h="svelte-taegop">Inline:</p> <div class="relative"><pre class="language-undefined"><!-- HTML_TAG_START --><code class="language-undefined">Pythagorean theorem: $a^2+b^2=c^2$</code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <div class="carta-viewer carta-theme__default markdown-body"> <!-- HTML_TAG_START --><p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">a^2+b^2=c^2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8974em;vertical-align:-0.0833em;"></span><span class="mord"><span class="mord mathnormal">a</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:0.8141em;"></span><span class="mord"><span class="mord mathnormal">b</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.8141em;"></span><span class="mord"><span class="mord mathnormal">c</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></p><!-- HTML_TAG_END --> </div> <br> <p data-svelte-h="svelte-1qa68zn">Block:</p> <div class="relative"><pre class="language-undefined"><!-- HTML_TAG_START --><code class="language-undefined">$$
|
||
\mathcal{L}\{f\}(s) = \int_0^{\infty} {f(t)e^{-st}dt}
|
||
$$</code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <div class="carta-viewer carta-theme__default markdown-body"> <!-- HTML_TAG_START --><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi mathvariant="script">L</mi><mo stretchy="false">{</mo><mi>f</mi><mo stretchy="false">}</mo><mo stretchy="false">(</mo><mi>s</mi><mo stretchy="false">)</mo><mo>=</mo><msubsup><mo>∫</mo><mn>0</mn><mi mathvariant="normal">∞</mi></msubsup><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>t</mi><mo stretchy="false">)</mo><msup><mi>e</mi><mrow><mo>−</mo><mi>s</mi><mi>t</mi></mrow></msup><mi>d</mi><mi>t</mi></mrow></mrow><annotation encoding="application/x-tex">\mathcal{L}\{f\}(s) = \int_0^{\infty} {f(t)e^{-st}dt}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord mathcal">L</span><span class="mopen">{</span><span class="mord mathnormal" style="margin-right:0.10764em;">f</span><span class="mclose">}</span><span class="mopen">(</span><span class="mord mathnormal">s</span><span class="mclose">)</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:2.3262em;vertical-align:-0.9119em;"></span><span class="mop"><span class="mop op-symbol large-op" style="margin-right:0.44445em;position:relative;top:-0.0011em;">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.4143em;"><span style="top:-1.7881em;margin-left:-0.4445em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">0</span></span></span><span style="top:-3.8129em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">∞</span></span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.9119em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.10764em;">f</span><span class="mopen">(</span><span class="mord mathnormal">t</span><span class="mclose">)</span><span class="mord"><span class="mord mathnormal">e</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8436em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">−</span><span class="mord mathnormal mtight">s</span><span class="mord mathnormal mtight">t</span></span></span></span></span></span></span></span></span><span class="mord mathnormal">d</span><span class="mord mathnormal">t</span></span></span></span></span></span><!-- HTML_TAG_END --> </div> <h2 id="options" data-svelte-h="svelte-qvxcr2"><a href="#options">Options</a></h2> <p data-svelte-h="svelte-1ks7tnu">Here are the options you can pass to <code>math()</code>:</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">interface</span> <span class="token class-name">MathExtensionOptions</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">/**
|
||
* Options for inline katex, eg: $a^2+b^2=c^2$
|
||
*/</span>
|
||
inline<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">/**
|
||
* @default control+m
|
||
*/</span>
|
||
shortcut<span class="token operator">?</span><span class="token operator">:</span> Set<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token comment">/**
|
||
* Option for block katex, eg:
|
||
* $$
|
||
* a^2+b^2=c^2
|
||
* $$
|
||
*/</span>
|
||
block<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">/**
|
||
* @default ctrl+shift+m
|
||
*/</span>
|
||
shortcut<span class="token operator">?</span><span class="token operator">:</span> Set<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token comment">/**
|
||
* Options for remark-math
|
||
*/</span>
|
||
remarkMath<span class="token operator">?</span><span class="token operator">:</span> RemarkMathOptions<span class="token punctuation">;</span>
|
||
<span class="token comment">/**
|
||
* Options for rehype-katex
|
||
*/</span>
|
||
rehypeKatex<span class="token operator">?</span><span class="token operator">:</span> RehypeKatexOptions<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code><!-- HTML_TAG_END --></pre><!-- HTML_TAG_END --></div> <div class="mt-12 w-full border-t border-neutral-800 text-end" data-svelte-h="svelte-1n4hoz2"><span class="mt-6 block text-sm italic text-neutral-400">Handmade by <a target="_blank" class="hover:text-sky-300 hover:underline" href="https://github.com/BearToCode">Davide</a></span></div></main> <div class="h-full space-y-3 sticky top-24 hidden w-[15rem] flex-shrink-0 xl:block"></div></div></div>
|
||
|
||
<script>
|
||
{
|
||
__sveltekit_190djg1 = {
|
||
base: new URL("..", location).pathname.slice(0, -1),
|
||
assets: "/carta"
|
||
};
|
||
|
||
const element = document.currentScript.parentElement;
|
||
|
||
const data = [null,{"type":"data","data":{content:{html:"\u003Cp data-svelte-h=\"svelte-1cn0xqo\">This plugins adds support for \u003Ca href=\"https://katex.org/\" rel=\"nofollow\">KaTeX\u003C/a> expressions.\u003C/p> \u003Ch2 id=\"installation\" data-svelte-h=\"svelte-18vig38\">\u003Ca href=\"#installation\">Installation\u003C/a>\u003C/h2> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-undefined\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-undefined\">npm i @cartamd/plugin-math\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch2 id=\"setup\" data-svelte-h=\"svelte-1uj9ei1\">\u003Ca href=\"#setup\">Setup\u003C/a>\u003C/h2> \u003Ch3 id=\"styles\" data-svelte-h=\"svelte-1obsuhg\">\u003Ca href=\"#styles\">Styles\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-rxhqnq\">You need to get access to the katex \u003Cstrong>stylesheet\u003C/strong>,\nto do so, you can either install katex using:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-undefined\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-undefined\">npm i katex\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cp data-svelte-h=\"svelte-hergql\">and then adding this import to your app:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token string\">'katex/dist/katex.css'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cp data-svelte-h=\"svelte-cvp7mk\">or by using a content delivery network:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-html\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-html\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>link\u003C/span>\n\t\u003Cspan class=\"token attr-name\">rel\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>stylesheet\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\n\t\u003Cspan class=\"token attr-name\">href\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\n\t\u003Cspan class=\"token attr-name\">integrity\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\n\t\u003Cspan class=\"token attr-name\">crossorigin\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>anonymous\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"token punctuation\">/>\u003C/span>\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch3 id=\"extension\" data-svelte-h=\"svelte-1h1d05d\">\u003Ca href=\"#extension\">Extension\u003C/a>\u003C/h3> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-svelte\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-svelte\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>script\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003Cspan class=\"token script\">\u003Cspan class=\"token language-javascript\">\n\t\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Carta\u003Cspan class=\"token punctuation\">,\u003C/span> MarkdownEditor \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'carta-md'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> math \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'@cartamd/plugin-math'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\u003Cspan class=\"token keyword\">const\u003C/span> carta \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token keyword\">new\u003C/span> \u003Cspan class=\"token class-name\">Carta\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token literal-property property\">extensions\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token function\">math\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003C/span>\u003C/span>\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"></\u003C/span>script\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>MarkdownEditor\u003C/span> \u003Cspan class=\"token language-javascript\">\u003Cspan class=\"token punctuation\">{\u003C/span>carta\u003Cspan class=\"token punctuation\">}\u003C/span>\u003C/span> \u003Cspan class=\"token punctuation\">/>\u003C/span>\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch2 id=\"usage\" data-svelte-h=\"svelte-iylfsz\">\u003Ca href=\"#usage\">Usage\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-taegop\">Inline:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-undefined\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-undefined\">Pythagorean theorem: $a^2+b^2=c^2$\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cdiv class=\"carta-viewer carta-theme__default markdown-body\"> \u003C!-- HTML_TAG_START -->\u003Cp>\u003Cspan class=\"katex\">\u003Cspan class=\"katex-mathml\">\u003Cmath xmlns=\"http://www.w3.org/1998/Math/MathML\">\u003Csemantics>\u003Cmrow>\u003Cmsup>\u003Cmi>a\u003C/mi>\u003Cmn>2\u003C/mn>\u003C/msup>\u003Cmo>+\u003C/mo>\u003Cmsup>\u003Cmi>b\u003C/mi>\u003Cmn>2\u003C/mn>\u003C/msup>\u003Cmo>=\u003C/mo>\u003Cmsup>\u003Cmi>c\u003C/mi>\u003Cmn>2\u003C/mn>\u003C/msup>\u003C/mrow>\u003Cannotation encoding=\"application/x-tex\">a^2+b^2=c^2\u003C/annotation>\u003C/semantics>\u003C/math>\u003C/span>\u003Cspan class=\"katex-html\" aria-hidden=\"true\">\u003Cspan class=\"base\">\u003Cspan class=\"strut\" style=\"height:0.8974em;vertical-align:-0.0833em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord mathnormal\">a\u003C/span>\u003Cspan class=\"msupsub\">\u003Cspan class=\"vlist-t\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:0.8141em;\">\u003Cspan style=\"top:-3.063em;margin-right:0.05em;\">\u003Cspan class=\"pstrut\" style=\"height:2.7em;\">\u003C/span>\u003Cspan class=\"sizing reset-size6 size3 mtight\">\u003Cspan class=\"mord mtight\">2\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan class=\"mspace\" style=\"margin-right:0.2222em;\">\u003C/span>\u003Cspan class=\"mbin\">+\u003C/span>\u003Cspan class=\"mspace\" style=\"margin-right:0.2222em;\">\u003C/span>\u003C/span>\u003Cspan class=\"base\">\u003Cspan class=\"strut\" style=\"height:0.8141em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord mathnormal\">b\u003C/span>\u003Cspan class=\"msupsub\">\u003Cspan class=\"vlist-t\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:0.8141em;\">\u003Cspan style=\"top:-3.063em;margin-right:0.05em;\">\u003Cspan class=\"pstrut\" style=\"height:2.7em;\">\u003C/span>\u003Cspan class=\"sizing reset-size6 size3 mtight\">\u003Cspan class=\"mord mtight\">2\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan class=\"mspace\" style=\"margin-right:0.2778em;\">\u003C/span>\u003Cspan class=\"mrel\">=\u003C/span>\u003Cspan class=\"mspace\" style=\"margin-right:0.2778em;\">\u003C/span>\u003C/span>\u003Cspan class=\"base\">\u003Cspan class=\"strut\" style=\"height:0.8141em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord mathnormal\">c\u003C/span>\u003Cspan class=\"msupsub\">\u003Cspan class=\"vlist-t\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:0.8141em;\">\u003Cspan style=\"top:-3.063em;margin-right:0.05em;\">\u003Cspan class=\"pstrut\" style=\"height:2.7em;\">\u003C/span>\u003Cspan class=\"sizing reset-size6 size3 mtight\">\u003Cspan class=\"mord mtight\">2\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/p>\u003C!-- HTML_TAG_END --> \u003C/div> \u003Cbr> \u003Cp data-svelte-h=\"svelte-1qa68zn\">Block:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-undefined\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-undefined\">$$\n \\mathcal{L}\\{f\\}(s) = \\int_0^{\\infty} {f(t)e^{-st}dt}\n$$\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cdiv class=\"carta-viewer carta-theme__default markdown-body\"> \u003C!-- HTML_TAG_START -->\u003Cspan class=\"katex-display\">\u003Cspan class=\"katex\">\u003Cspan class=\"katex-mathml\">\u003Cmath xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\">\u003Csemantics>\u003Cmrow>\u003Cmi mathvariant=\"script\">L\u003C/mi>\u003Cmo stretchy=\"false\">{\u003C/mo>\u003Cmi>f\u003C/mi>\u003Cmo stretchy=\"false\">}\u003C/mo>\u003Cmo stretchy=\"false\">(\u003C/mo>\u003Cmi>s\u003C/mi>\u003Cmo stretchy=\"false\">)\u003C/mo>\u003Cmo>=\u003C/mo>\u003Cmsubsup>\u003Cmo>∫\u003C/mo>\u003Cmn>0\u003C/mn>\u003Cmi mathvariant=\"normal\">∞\u003C/mi>\u003C/msubsup>\u003Cmrow>\u003Cmi>f\u003C/mi>\u003Cmo stretchy=\"false\">(\u003C/mo>\u003Cmi>t\u003C/mi>\u003Cmo stretchy=\"false\">)\u003C/mo>\u003Cmsup>\u003Cmi>e\u003C/mi>\u003Cmrow>\u003Cmo>−\u003C/mo>\u003Cmi>s\u003C/mi>\u003Cmi>t\u003C/mi>\u003C/mrow>\u003C/msup>\u003Cmi>d\u003C/mi>\u003Cmi>t\u003C/mi>\u003C/mrow>\u003C/mrow>\u003Cannotation encoding=\"application/x-tex\">\\mathcal{L}\\{f\\}(s) = \\int_0^{\\infty} {f(t)e^{-st}dt}\u003C/annotation>\u003C/semantics>\u003C/math>\u003C/span>\u003Cspan class=\"katex-html\" aria-hidden=\"true\">\u003Cspan class=\"base\">\u003Cspan class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\">\u003C/span>\u003Cspan class=\"mord mathcal\">L\u003C/span>\u003Cspan class=\"mopen\">{\u003C/span>\u003Cspan class=\"mord mathnormal\" style=\"margin-right:0.10764em;\">f\u003C/span>\u003Cspan class=\"mclose\">}\u003C/span>\u003Cspan class=\"mopen\">(\u003C/span>\u003Cspan class=\"mord mathnormal\">s\u003C/span>\u003Cspan class=\"mclose\">)\u003C/span>\u003Cspan class=\"mspace\" style=\"margin-right:0.2778em;\">\u003C/span>\u003Cspan class=\"mrel\">=\u003C/span>\u003Cspan class=\"mspace\" style=\"margin-right:0.2778em;\">\u003C/span>\u003C/span>\u003Cspan class=\"base\">\u003Cspan class=\"strut\" style=\"height:2.3262em;vertical-align:-0.9119em;\">\u003C/span>\u003Cspan class=\"mop\">\u003Cspan class=\"mop op-symbol large-op\" style=\"margin-right:0.44445em;position:relative;top:-0.0011em;\">∫\u003C/span>\u003Cspan class=\"msupsub\">\u003Cspan class=\"vlist-t vlist-t2\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:1.4143em;\">\u003Cspan style=\"top:-1.7881em;margin-left:-0.4445em;margin-right:0.05em;\">\u003Cspan class=\"pstrut\" style=\"height:2.7em;\">\u003C/span>\u003Cspan class=\"sizing reset-size6 size3 mtight\">\u003Cspan class=\"mord mtight\">0\u003C/span>\u003C/span>\u003C/span>\u003Cspan style=\"top:-3.8129em;margin-right:0.05em;\">\u003Cspan class=\"pstrut\" style=\"height:2.7em;\">\u003C/span>\u003Cspan class=\"sizing reset-size6 size3 mtight\">\u003Cspan class=\"mord mtight\">\u003Cspan class=\"mord mtight\">∞\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan class=\"vlist-s\">\u003C/span>\u003C/span>\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:0.9119em;\">\u003Cspan>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan class=\"mspace\" style=\"margin-right:0.1667em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord mathnormal\" style=\"margin-right:0.10764em;\">f\u003C/span>\u003Cspan class=\"mopen\">(\u003C/span>\u003Cspan class=\"mord mathnormal\">t\u003C/span>\u003Cspan class=\"mclose\">)\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord mathnormal\">e\u003C/span>\u003Cspan class=\"msupsub\">\u003Cspan class=\"vlist-t\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:0.8436em;\">\u003Cspan style=\"top:-3.113em;margin-right:0.05em;\">\u003Cspan class=\"pstrut\" style=\"height:2.7em;\">\u003C/span>\u003Cspan class=\"sizing reset-size6 size3 mtight\">\u003Cspan class=\"mord mtight\">\u003Cspan class=\"mord mtight\">−\u003C/span>\u003Cspan class=\"mord mathnormal mtight\">s\u003C/span>\u003Cspan class=\"mord mathnormal mtight\">t\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan class=\"mord mathnormal\">d\u003C/span>\u003Cspan class=\"mord mathnormal\">t\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C!-- HTML_TAG_END --> \u003C/div> \u003Ch2 id=\"options\" data-svelte-h=\"svelte-qvxcr2\">\u003Ca href=\"#options\">Options\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-1ks7tnu\">Here are the options you can pass to \u003Ccode>math()\u003C/code>:\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">interface\u003C/span> \u003Cspan class=\"token class-name\">MathExtensionOptions\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token comment\">/**\n\t * Options for inline katex, eg: $a^2+b^2=c^2$\n\t */\u003C/span>\n\tinline\u003Cspan class=\"token operator\">?\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token comment\">/**\n\t\t * @default control+m\n\t\t */\u003C/span>\n\t\tshortcut\u003Cspan class=\"token operator\">?\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> Set\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token builtin\">string\u003C/span>\u003Cspan class=\"token operator\">>\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token comment\">/**\n\t * Option for block katex, eg:\n\t * $$\n\t * a^2+b^2=c^2\n\t * $$\n\t */\u003C/span>\n\tblock\u003Cspan class=\"token operator\">?\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token comment\">/**\n\t\t * @default ctrl+shift+m\n\t\t */\u003C/span>\n\t\tshortcut\u003Cspan class=\"token operator\">?\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> Set\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token builtin\">string\u003C/span>\u003Cspan class=\"token operator\">>\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token comment\">/**\n\t * Options for remark-math\n\t */\u003C/span>\n\tremarkMath\u003Cspan class=\"token operator\">?\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> RemarkMathOptions\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token comment\">/**\n\t * Options for rehype-katex\n\t */\u003C/span>\n\trehypeKatex\u003Cspan class=\"token operator\">?\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> RehypeKatexOptions\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre>",css:{code:"",map:null},head:""},metadata:{section:"Plugins",title:"Math"}},"uses":{"url":1}}];
|
||
|
||
Promise.all([
|
||
import("../_app/immutable/entry/start.BivPHxkC.js"),
|
||
import("../_app/immutable/entry/app.BXoi511P.js")
|
||
]).then(([kit, app]) => {
|
||
kit.start(app, element, {
|
||
node_ids: [0, 3],
|
||
data,
|
||
form: null,
|
||
error: null
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|