120 lines
30 KiB
HTML
120 lines
30 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>Utilities - 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">API</h3> <h1 class="mb-4 text-5xl font-bold text-white">Utilities</h1> <div class="markdown"> <!-- HTML_TAG_START --><h2 id="cartarender" data-svelte-h="svelte-1y6zwes"><a href="#cartarender"><code>Carta.render</code></a></h2> <p data-svelte-h="svelte-op5yrc">Allows you to render Markdown asynchronously.</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><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 comment">/* ... */</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> markdown <span class="token operator">=</span> <span class="token string">'# Some Markdown'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token keyword">await</span> carta<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>markdown<span class="token punctuation">)</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <h2 id="cartarenderssr" data-svelte-h="svelte-1529vv2"><a href="#cartarenderssr"><code>Carta.renderSSR</code></a></h2> <p data-svelte-h="svelte-1p2jyea">Allows you to render Markdown synchronously, suitable for Server Side Rendering. Note that particular extensions that add content asynchronously will not work in this configuration.</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><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 comment">/* ... */</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> markdown <span class="token operator">=</span> <span class="token string">'# Some Markdown'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> html <span class="token operator">=</span> carta<span class="token punctuation">.</span><span class="token function">renderSSR</span><span class="token punctuation">(</span>markdown<span class="token punctuation">)</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <h2 id="cartabindtocaret" data-svelte-h="svelte-14p8c6l"><a href="#cartabindtocaret"><code>Carta.bindToCaret</code></a></h2> <p data-svelte-h="svelte-w29tmn">Svelte action that allows you to bind a specific element to the caret position. Used, for example, in <code>plugin-emoji</code> and <code>plugin-slash</code>.</p> <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">export</span> <span class="token keyword">let</span> carta<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>div</span> <span class="token attr-name"><span class="token namespace">use:</span>carta.bindToCaret</span><span class="token punctuation">></span></span>
|
|
<span class="token comment"><!-- ... --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code><!-- HTML_TAG_END --></pre> <h2 id="cartahighlighter" data-svelte-h="svelte-1h3kenj"><a href="#cartahighlighter"><code>Carta.highlighter</code></a></h2> <p data-svelte-h="svelte-oehzko">Get the Shiki highlighter.</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">const</span> highlighter <span class="token operator">=</span> <span class="token keyword">await</span> carta<span class="token punctuation">.</span><span class="token function">highlighter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> userTheme <span class="token operator">=</span> carta<span class="token punctuation">.</span>theme<span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <p data-svelte-h="svelte-nxat9v">Here are some other highlight related utilities:</p> <h3 id="isbundlelanguage" data-svelte-h="svelte-106ufid"><a href="#isbundlelanguage"><code>isBundleLanguage</code></a></h3> <p data-svelte-h="svelte-19545xu">Checks if a language is a bundled language.</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">export</span> <span class="token keyword">const</span> isBundleLanguage <span class="token operator">=</span> <span class="token punctuation">(</span>lang<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> lang <span class="token keyword">is</span> BundledLanguage<span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <h3 id="isbundletheme" data-svelte-h="svelte-19a852s"><a href="#isbundletheme"><code>isBundleTheme</code></a></h3> <p data-svelte-h="svelte-zym92i">Checks if a theme is a bundled theme.</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">export</span> <span class="token keyword">const</span> isBundleTheme <span class="token operator">=</span> <span class="token punctuation">(</span>theme<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> theme <span class="token keyword">is</span> BundledTheme<span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <h3 id="isdualtheme" data-svelte-h="svelte-1l7epkq"><a href="#isdualtheme"><code>isDualTheme</code></a></h3> <p data-svelte-h="svelte-1kj1hvu">Checks if a theme is a dual theme.</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">export</span> <span class="token keyword">const</span> isDualTheme <span class="token operator">=</span> <span class="token punctuation">(</span>theme<span class="token operator">:</span> Theme <span class="token operator">|</span> DualTheme<span class="token punctuation">)</span><span class="token operator">:</span> theme <span class="token keyword">is</span> DualTheme<span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <h3 id="issingletheme" data-svelte-h="svelte-h5whms"><a href="#issingletheme"><code>isSingleTheme</code></a></h3> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">export</span> <span class="token keyword">const</span> isSingleTheme <span class="token operator">=</span> <span class="token punctuation">(</span>theme<span class="token operator">:</span> Theme <span class="token operator">|</span> DualTheme<span class="token punctuation">)</span><span class="token operator">:</span> theme <span class="token keyword">is</span> Theme<span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <h3 id="isthemeregistration" data-svelte-h="svelte-14cn3xx"><a href="#isthemeregistration"><code>isThemeRegistration</code></a></h3> <p data-svelte-h="svelte-2ggm5b">Checks if a theme is a theme registration.</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">export</span> <span class="token keyword">const</span> isThemeRegistration <span class="token operator">=</span> <span class="token punctuation">(</span>theme<span class="token operator">:</span> Theme<span class="token punctuation">)</span><span class="token operator">:</span> theme <span class="token keyword">is</span> ThemeRegistration<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:"\u003Ch2 id=\"cartarender\" data-svelte-h=\"svelte-1y6zwes\">\u003Ca href=\"#cartarender\">\u003Ccode>Carta.render\u003C/code>\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-op5yrc\">Allows you to render Markdown asynchronously.\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\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\u003Cspan class=\"token comment\">/* ... */\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token keyword\">const\u003C/span> markdown \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token string\">'# Some Markdown'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token keyword\">const\u003C/span> html \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token keyword\">await\u003C/span> carta\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">render\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>markdown\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch2 id=\"cartarenderssr\" data-svelte-h=\"svelte-1529vv2\">\u003Ca href=\"#cartarenderssr\">\u003Ccode>Carta.renderSSR\u003C/code>\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-1p2jyea\">Allows you to render Markdown synchronously, suitable for Server Side Rendering. Note that particular extensions that add content asynchronously will not work in this configuration.\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\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\u003Cspan class=\"token comment\">/* ... */\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token keyword\">const\u003C/span> markdown \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token string\">'# Some Markdown'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token keyword\">const\u003C/span> html \u003Cspan class=\"token operator\">=\u003C/span> carta\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">renderSSR\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>markdown\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch2 id=\"cartabindtocaret\" data-svelte-h=\"svelte-14p8c6l\">\u003Ca href=\"#cartabindtocaret\">\u003Ccode>Carta.bindToCaret\u003C/code>\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-w29tmn\">Svelte action that allows you to bind a specific element to the caret position. Used, for example, in \u003Ccode>plugin-emoji\u003C/code> and \u003Ccode>plugin-slash\u003C/code>.\u003C/p> \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\">export\u003C/span> \u003Cspan class=\"token keyword\">let\u003C/span> carta\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>div\u003C/span> \u003Cspan class=\"token attr-name\">\u003Cspan class=\"token namespace\">use:\u003C/span>carta.bindToCaret\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\u003Cspan class=\"token comment\"><!-- ... -->\u003C/span>\n\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"></\u003C/span>div\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch2 id=\"cartahighlighter\" data-svelte-h=\"svelte-1h3kenj\">\u003Ca href=\"#cartahighlighter\">\u003Ccode>Carta.highlighter\u003C/code>\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-oehzko\">Get the Shiki highlighter.\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> highlighter \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token keyword\">await\u003C/span> carta\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">highlighter\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token keyword\">const\u003C/span> userTheme \u003Cspan class=\"token operator\">=\u003C/span> carta\u003Cspan class=\"token punctuation\">.\u003C/span>theme\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cp data-svelte-h=\"svelte-nxat9v\">Here are some other highlight related utilities:\u003C/p> \u003Ch3 id=\"isbundlelanguage\" data-svelte-h=\"svelte-106ufid\">\u003Ca href=\"#isbundlelanguage\">\u003Ccode>isBundleLanguage\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-19545xu\">Checks if a language is a bundled language.\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">export\u003C/span> \u003Cspan class=\"token keyword\">const\u003C/span> isBundleLanguage \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>lang\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token builtin\">string\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> lang \u003Cspan class=\"token keyword\">is\u003C/span> BundledLanguage\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch3 id=\"isbundletheme\" data-svelte-h=\"svelte-19a852s\">\u003Ca href=\"#isbundletheme\">\u003Ccode>isBundleTheme\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-zym92i\">Checks if a theme is a bundled theme.\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">export\u003C/span> \u003Cspan class=\"token keyword\">const\u003C/span> isBundleTheme \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>theme\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token builtin\">string\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> theme \u003Cspan class=\"token keyword\">is\u003C/span> BundledTheme\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch3 id=\"isdualtheme\" data-svelte-h=\"svelte-1l7epkq\">\u003Ca href=\"#isdualtheme\">\u003Ccode>isDualTheme\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-1kj1hvu\">Checks if a theme is a dual theme.\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">export\u003C/span> \u003Cspan class=\"token keyword\">const\u003C/span> isDualTheme \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>theme\u003Cspan class=\"token operator\">:\u003C/span> Theme \u003Cspan class=\"token operator\">|\u003C/span> DualTheme\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> theme \u003Cspan class=\"token keyword\">is\u003C/span> DualTheme\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch3 id=\"issingletheme\" data-svelte-h=\"svelte-h5whms\">\u003Ca href=\"#issingletheme\">\u003Ccode>isSingleTheme\u003C/code>\u003C/a>\u003C/h3> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">export\u003C/span> \u003Cspan class=\"token keyword\">const\u003C/span> isSingleTheme \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>theme\u003Cspan class=\"token operator\">:\u003C/span> Theme \u003Cspan class=\"token operator\">|\u003C/span> DualTheme\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> theme \u003Cspan class=\"token keyword\">is\u003C/span> Theme\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch3 id=\"isthemeregistration\" data-svelte-h=\"svelte-14cn3xx\">\u003Ca href=\"#isthemeregistration\">\u003Ccode>isThemeRegistration\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-2ggm5b\">Checks if a theme is a theme registration.\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">export\u003C/span> \u003Cspan class=\"token keyword\">const\u003C/span> isThemeRegistration \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>theme\u003Cspan class=\"token operator\">:\u003C/span> Theme\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> theme \u003Cspan class=\"token keyword\">is\u003C/span> ThemeRegistration\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre>",css:{code:"",map:null},head:""},metadata:{section:"API",title:"Utilities"}},"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>
|