176 lines
67 KiB
HTML
176 lines
67 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>Examples - 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">Overview</h3> <h1 class="mb-4 text-5xl font-bold text-white">Examples</h1> <div class="markdown"> <!-- HTML_TAG_START --><p data-svelte-h="svelte-xyg5fd">Here is a list of examples made using Carta and some of its plugins.</p> <h2 id="github" data-svelte-h="svelte-v2whyn"><a href="#github">GitHub</a></h2> <div class="carta-editor carta-theme__github svelte-11jlii3"> <div class="carta-toolbar svelte-1c77udu" role="toolbar"><div class="carta-toolbar-left svelte-1c77udu"><button type="button" tabindex="0" class="carta-active">Write</button> <button type="button" tabindex="-1" class="">Preview</button></div> <div class="carta-filler svelte-1c77udu"></div> <div class="carta-toolbar-right svelte-1c77udu"> <button class="carta-icon svelte-1c77udu" tabindex="0" title="Heading" aria-label="Heading"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M4.5 2.75a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-4.5h7v4.5a.75.75 0 0 0 1.5 0V2.75a.75.75 0 0 0-1.5 0v4.5h-7v-4.5Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Bold" aria-label="Bold"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M4 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5.5a3.5 3.5 0 0 0 1.852-6.47A3.5 3.5 0 0 0 8.5 2H4Zm4.5 5a1.5 1.5 0 1 0 0-3H5v3h3.5ZM5 9v3h4.5a1.5 1.5 0 0 0 0-3H5Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Italic" aria-label="Italic"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M6.5 2a.75.75 0 0 0 0 1.5h1.93l-2.412 9H4A.75.75 0 0 0 4 14h5.5a.75.75 0 0 0 0-1.5H7.57l2.412-9H12A.75.75 0 0 0 12 2H6.5Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Strikethrough" aria-label="Strikethrough"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M7.886 1a3.136 3.136 0 0 0-2.41 5.144L6.4 7.25H2.75a.75.75 0 0 0 0 1.5h4.899l1.722 2.066A1.636 1.636 0 0 1 8.114 13.5H8a1.75 1.75 0 0 1-1.75-1.75a.75.75 0 0 0-1.5 0A3.25 3.25 0 0 0 8 15h.114a3.136 3.136 0 0 0 2.41-5.144L9.6 8.75h3.649a.75.75 0 0 0 0-1.5H8.351L6.63 5.184A1.636 1.636 0 0 1 7.886 2.5H8c.966 0 1.75.784 1.75 1.75a.75.75 0 0 0 1.5 0A3.25 3.25 0 0 0 8 1h-.114Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Quote" aria-label="Quote"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M1.5 3.75a.75.75 0 0 0-1.5 0v8.5a.75.75 0 0 0 1.5 0v-8.5ZM4.75 3a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Code" aria-label="Code"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M9.424 2.023a.75.75 0 0 1 .556.904L7.48 13.42a.75.75 0 0 1-1.46-.348L8.52 2.58a.75.75 0 0 1 .904-.556ZM11.16 4.22a.75.75 0 0 1 1.06 0l3.25 3.25L16 8l-.53.53l-3.25 3.25a.75.75 0 1 1-1.06-1.06L13.88 8l-2.72-2.72a.75.75 0 0 1 0-1.06ZM4.84 5.28a.75.75 0 1 0-1.06-1.06L.53 7.47L0 8l.53.53l3.25 3.25a.75.75 0 0 0 1.06-1.06L2.12 8l2.72-2.72Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Link" aria-label="Link"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M9.929 3.132a2.078 2.078 0 1 1 2.94 2.94l-.65.648a.75.75 0 0 0 1.061 1.06l.649-.648a3.579 3.579 0 0 0-5.06-5.06L6.218 4.72a3.578 3.578 0 0 0 0 5.06a.75.75 0 0 0 1.061-1.06a2.078 2.078 0 0 1 0-2.94L9.93 3.132Zm-.15 3.086a.75.75 0 0 0-1.057 1.064c.816.81.818 2.13.004 2.942l-2.654 2.647a2.08 2.08 0 0 1-2.94-2.944l.647-.647a.75.75 0 0 0-1.06-1.06l-.648.647a3.58 3.58 0 0 0 5.06 5.066l2.654-2.647a3.575 3.575 0 0 0-.007-5.068Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Bulleted list" aria-label="Bulleted list"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M1 4.75a1 1 0 1 0 0-2a1 1 0 0 0 0 2ZM4.75 3a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75ZM2 8a1 1 0 1 1-2 0a1 1 0 0 1 2 0Zm-1 5.25a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Numbered list" aria-label="Numbered list"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M0 2h2v4H1V3H0V2Zm1.637 9.008H0v-1h1.637a1.382 1.382 0 0 1 .803 2.506L1.76 13H3v1H0v-.972L1.859 11.7a.382.382 0 0 0-.222-.693ZM4.75 3a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Task list" aria-label="Task list"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M4.78 3.28a.75.75 0 0 0-1.06-1.06L1.75 4.19l-.47-.47A.75.75 0 0 0 .22 4.78l1 1a.75.75 0 0 0 1.06 0l2.5-2.5ZM6 3.75A.75.75 0 0 1 6.75 3h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 6 3.75ZM6 8a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 6 8Zm.75 3.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Zm-1.97-1.28a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-1-1a.75.75 0 1 1 1.06-1.06l.47.47l1.97-1.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Attach file" aria-label="Attach file"><svg class="attach-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" d="m22 12l-9 9c-6 6-15-3-9-9l9-9c4-4 10 2 6 6l-9 9c-2 2-5-1-3-3l9-9"></path></svg> </button> </div></div> <div class="carta-wrapper"><div class="carta-container mode-tabs svelte-11jlii3"><div role="tooltip" id="editor-unfocus-suggestion" class="svelte-3mukqg" data-svelte-h="svelte-167gk2c">Press ESC then TAB to move the focus off the field</div> <div role="textbox" tabindex="-1" class="carta-input svelte-3mukqg"><div class="carta-input-wrapper svelte-3mukqg"><div class="carta-highlight carta-font-code svelte-3mukqg" tabindex="-1" aria-hidden="true"><!-- HTML_TAG_START -->This is an example inspired by [GitHub](https://github.com)
|
||
```js
|
||
console.log('Hello, World!');
|
||
```<!-- HTML_TAG_END --></div> <textarea name="md" id="md" spellcheck="false" class="carta-font-code svelte-3mukqg" aria-multiline="true" aria-describedby="editor-unfocus-suggestion" tabindex="0" placeholder="">This is an example inspired by [GitHub](https://github.com)
|
||
```js
|
||
console.log('Hello, World!');
|
||
```</textarea></div> </div> </div></div> </div> <br> <p data-svelte-h="svelte-1e4njai">Plugins used: code, slash, emoji, attachment. View source on <a href="https://github.com/BearToCode/carta/blob/master/docs/src/lib/examples/GitHubExample.svelte" rel="nofollow">GitHub</a>.</p> <h2 id="discord" data-svelte-h="svelte-rgqmoc"><a href="#discord">Discord</a></h2> <div class="carta-editor carta-theme__discord svelte-11jlii3"> <div class="carta-toolbar svelte-1c77udu" role="toolbar"><div class="carta-toolbar-left svelte-1c77udu"><button type="button" tabindex="0" class="carta-active">Write</button> <button type="button" tabindex="-1" class="">Preview</button></div> <div class="carta-filler svelte-1c77udu"></div> <div class="carta-toolbar-right svelte-1c77udu"> </div></div> <div class="carta-wrapper"><div class="carta-container mode-tabs svelte-11jlii3"><div role="tooltip" id="editor-unfocus-suggestion" class="svelte-3mukqg" data-svelte-h="svelte-167gk2c">Press ESC then TAB to move the focus off the field</div> <div role="textbox" tabindex="-1" class="carta-input svelte-3mukqg"><div class="carta-input-wrapper svelte-3mukqg"><div class="carta-highlight carta-font-code svelte-3mukqg" tabindex="-1" aria-hidden="true"><!-- HTML_TAG_START --><!-- HTML_TAG_END --></div> <textarea name="md" id="md" spellcheck="false" class="carta-font-code svelte-3mukqg" aria-multiline="true" aria-describedby="editor-unfocus-suggestion" tabindex="0" placeholder="Send a message to @someone"></textarea></div> </div> </div></div> </div> <br> <p data-svelte-h="svelte-p47nlv">Plugins used: code, emoji. View source on <a href="https://github.com/BearToCode/carta/blob/master/docs/src/lib/examples/DiscordExample.svelte" rel="nofollow">GitHub</a>.</p> <h2 id="math-stack-exchange" data-svelte-h="svelte-xqbs97"><a href="#math-stack-exchange">Math Stack Exchange</a></h2> <div class="math-stack-exchange-container"><div class="carta-editor carta-theme__math-stack-exchange svelte-11jlii3"> <div class="carta-toolbar svelte-1c77udu" role="toolbar"><div class="carta-toolbar-left svelte-1c77udu"><button type="button" tabindex="0" class="carta-active">Write</button> <button type="button" tabindex="-1" class="">Preview</button></div> <div class="carta-filler svelte-1c77udu"></div> <div class="carta-toolbar-right svelte-1c77udu"> <button class="carta-icon svelte-1c77udu" tabindex="0" title="Heading" aria-label="Heading"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M4.5 2.75a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-4.5h7v4.5a.75.75 0 0 0 1.5 0V2.75a.75.75 0 0 0-1.5 0v4.5h-7v-4.5Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Bold" aria-label="Bold"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M4 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5.5a3.5 3.5 0 0 0 1.852-6.47A3.5 3.5 0 0 0 8.5 2H4Zm4.5 5a1.5 1.5 0 1 0 0-3H5v3h3.5ZM5 9v3h4.5a1.5 1.5 0 0 0 0-3H5Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Italic" aria-label="Italic"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M6.5 2a.75.75 0 0 0 0 1.5h1.93l-2.412 9H4A.75.75 0 0 0 4 14h5.5a.75.75 0 0 0 0-1.5H7.57l2.412-9H12A.75.75 0 0 0 12 2H6.5Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Strikethrough" aria-label="Strikethrough"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M7.886 1a3.136 3.136 0 0 0-2.41 5.144L6.4 7.25H2.75a.75.75 0 0 0 0 1.5h4.899l1.722 2.066A1.636 1.636 0 0 1 8.114 13.5H8a1.75 1.75 0 0 1-1.75-1.75a.75.75 0 0 0-1.5 0A3.25 3.25 0 0 0 8 15h.114a3.136 3.136 0 0 0 2.41-5.144L9.6 8.75h3.649a.75.75 0 0 0 0-1.5H8.351L6.63 5.184A1.636 1.636 0 0 1 7.886 2.5H8c.966 0 1.75.784 1.75 1.75a.75.75 0 0 0 1.5 0A3.25 3.25 0 0 0 8 1h-.114Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Quote" aria-label="Quote"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M1.5 3.75a.75.75 0 0 0-1.5 0v8.5a.75.75 0 0 0 1.5 0v-8.5ZM4.75 3a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Code" aria-label="Code"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M9.424 2.023a.75.75 0 0 1 .556.904L7.48 13.42a.75.75 0 0 1-1.46-.348L8.52 2.58a.75.75 0 0 1 .904-.556ZM11.16 4.22a.75.75 0 0 1 1.06 0l3.25 3.25L16 8l-.53.53l-3.25 3.25a.75.75 0 1 1-1.06-1.06L13.88 8l-2.72-2.72a.75.75 0 0 1 0-1.06ZM4.84 5.28a.75.75 0 1 0-1.06-1.06L.53 7.47L0 8l.53.53l3.25 3.25a.75.75 0 0 0 1.06-1.06L2.12 8l2.72-2.72Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Link" aria-label="Link"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M9.929 3.132a2.078 2.078 0 1 1 2.94 2.94l-.65.648a.75.75 0 0 0 1.061 1.06l.649-.648a3.579 3.579 0 0 0-5.06-5.06L6.218 4.72a3.578 3.578 0 0 0 0 5.06a.75.75 0 0 0 1.061-1.06a2.078 2.078 0 0 1 0-2.94L9.93 3.132Zm-.15 3.086a.75.75 0 0 0-1.057 1.064c.816.81.818 2.13.004 2.942l-2.654 2.647a2.08 2.08 0 0 1-2.94-2.944l.647-.647a.75.75 0 0 0-1.06-1.06l-.648.647a3.58 3.58 0 0 0 5.06 5.066l2.654-2.647a3.575 3.575 0 0 0-.007-5.068Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Bulleted list" aria-label="Bulleted list"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M1 4.75a1 1 0 1 0 0-2a1 1 0 0 0 0 2ZM4.75 3a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75ZM2 8a1 1 0 1 1-2 0a1 1 0 0 1 2 0Zm-1 5.25a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Numbered list" aria-label="Numbered list"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M0 2h2v4H1V3H0V2Zm1.637 9.008H0v-1h1.637a1.382 1.382 0 0 1 .803 2.506L1.76 13H3v1H0v-.972L1.859 11.7a.382.382 0 0 0-.222-.693ZM4.75 3a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg> </button> <button class="carta-icon svelte-1c77udu" tabindex="-1" title="Task list" aria-label="Task list"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="none" stroke="none"></rect><path fill="currentColor" fill-rule="evenodd" d="M4.78 3.28a.75.75 0 0 0-1.06-1.06L1.75 4.19l-.47-.47A.75.75 0 0 0 .22 4.78l1 1a.75.75 0 0 0 1.06 0l2.5-2.5ZM6 3.75A.75.75 0 0 1 6.75 3h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 6 3.75ZM6 8a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 6 8Zm.75 3.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Zm-1.97-1.28a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-1-1a.75.75 0 1 1 1.06-1.06l.47.47l1.97-1.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"></path></svg> </button> </div></div> <div class="carta-wrapper"><div class="carta-container mode-tabs svelte-11jlii3"><div role="tooltip" id="editor-unfocus-suggestion" class="svelte-3mukqg" data-svelte-h="svelte-167gk2c">Press ESC then TAB to move the focus off the field</div> <div role="textbox" tabindex="-1" class="carta-input svelte-3mukqg"><div class="carta-input-wrapper svelte-3mukqg"><div class="carta-highlight carta-font-code svelte-3mukqg" tabindex="-1" aria-hidden="true"><!-- HTML_TAG_START -->> Here is a formula:
|
||
|
||
$$
|
||
\dfrac{\partial}{\partial t}(
|
||
\dfrac{\partial \mathcal{L}}{\partial \dot{q}_k}
|
||
) - \dfrac{\partial \mathcal{L}}{\partial q_k} = 0
|
||
$$
|
||
|
||
> And here is a circuit:
|
||
|
||
```tikz
|
||
\usepackage{circuitikz}
|
||
|
||
\begin{document}
|
||
\begin{circuitikz} \draw
|
||
(0,0) to[battery] (0,4)
|
||
to[ammeter] (4,4) -- (4,0)
|
||
to[lamp] (0,0)
|
||
;
|
||
\end{circuitikz}
|
||
\end{document}
|
||
```
|
||
|
||
<!-- HTML_TAG_END --></div> <textarea name="md" id="md" spellcheck="false" class="carta-font-code svelte-3mukqg" aria-multiline="true" aria-describedby="editor-unfocus-suggestion" tabindex="0" placeholder="">> Here is a formula:
|
||
|
||
$$
|
||
\dfrac{\partial}{\partial t}(
|
||
\dfrac{\partial \mathcal{L}}{\partial \dot{q}_k}
|
||
) - \dfrac{\partial \mathcal{L}}{\partial q_k} = 0
|
||
$$
|
||
|
||
> And here is a circuit:
|
||
|
||
```tikz
|
||
\usepackage{circuitikz}
|
||
|
||
\begin{document}
|
||
\begin{circuitikz} \draw
|
||
(0,0) to[battery] (0,4)
|
||
to[ammeter] (4,4) -- (4,0)
|
||
to[lamp] (0,0)
|
||
;
|
||
\end{circuitikz}
|
||
\end{document}
|
||
```
|
||
|
||
</textarea></div> </div> </div></div> </div> <div class="carta-viewer carta-theme__math-stack-exchange markdown-body"> <!-- HTML_TAG_START --><blockquote>
|
||
<p>Here is a formula:</p>
|
||
</blockquote>
|
||
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mi mathvariant="normal">∂</mi><mrow><mi mathvariant="normal">∂</mi><mi>t</mi></mrow></mfrac><mo stretchy="false">(</mo><mfrac><mrow><mi mathvariant="normal">∂</mi><mi mathvariant="script">L</mi></mrow><mrow><mi mathvariant="normal">∂</mi><msub><mover accent="true"><mi>q</mi><mo>˙</mo></mover><mi>k</mi></msub></mrow></mfrac><mo stretchy="false">)</mo><mo>−</mo><mfrac><mrow><mi mathvariant="normal">∂</mi><mi mathvariant="script">L</mi></mrow><mrow><mi mathvariant="normal">∂</mi><msub><mi>q</mi><mi>k</mi></msub></mrow></mfrac><mo>=</mo><mn>0</mn></mrow><annotation encoding="application/x-tex">\dfrac{\partial}{\partial t}(
|
||
\dfrac{\partial \mathcal{L}}{\partial \dot{q}_k}
|
||
) - \dfrac{\partial \mathcal{L}}{\partial q_k} = 0</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:2.2519em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.3714em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord" style="margin-right:0.05556em;">∂</span><span class="mord mathnormal">t</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord" style="margin-right:0.05556em;">∂</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.686em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span><span class="mopen">(</span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.3714em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord" style="margin-right:0.05556em;">∂</span><span class="mord"><span class="mord accent"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.6679em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal" style="margin-right:0.03588em;">q</span></span><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.0556em;"><span class="mord">˙</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.1944em;"><span></span></span></span></span></span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3361em;"><span style="top:-2.55em;margin-left:-0.0359em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.03148em;">k</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord" style="margin-right:0.05556em;">∂</span><span class="mord mathcal">L</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span><span class="mclose">)</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:2.2519em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.3714em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord" style="margin-right:0.05556em;">∂</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">q</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3361em;"><span style="top:-2.55em;margin-left:-0.0359em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.03148em;">k</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord" style="margin-right:0.05556em;">∂</span><span class="mord mathcal">L</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></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.6444em;"></span><span class="mord">0</span></span></span></span></span>
|
||
<blockquote>
|
||
<p>And here is a circuit:</p>
|
||
</blockquote>
|
||
<pre><code class="language-tikz">\usepackage{circuitikz}
|
||
|
||
\begin{document}
|
||
\begin{circuitikz} \draw
|
||
(0,0) to[battery] (0,4)
|
||
to[ammeter] (4,4) -- (4,0)
|
||
to[lamp] (0,0)
|
||
;
|
||
\end{circuitikz}
|
||
\end{document}
|
||
</code></pre><!-- HTML_TAG_END --> </div></div> <br> <p data-svelte-h="svelte-yiif2j">Plugins used: math, tikz. View source on <a href="https://github.com/BearToCode/carta/blob/master/docs/src/lib/examples/MathStackExchangeExample.svelte" rel="nofollow">GitHub</a>.</p><!-- 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-xyg5fd\">Here is a list of examples made using Carta and some of its plugins.\u003C/p> \u003Ch2 id=\"github\" data-svelte-h=\"svelte-v2whyn\">\u003Ca href=\"#github\">GitHub\u003C/a>\u003C/h2> \u003Cdiv class=\"carta-editor carta-theme__github svelte-11jlii3\"> \u003Cdiv class=\"carta-toolbar svelte-1c77udu\" role=\"toolbar\">\u003Cdiv class=\"carta-toolbar-left svelte-1c77udu\">\u003Cbutton type=\"button\" tabindex=\"0\" class=\"carta-active\">Write\u003C/button> \u003Cbutton type=\"button\" tabindex=\"-1\" class=\"\">Preview\u003C/button>\u003C/div> \u003Cdiv class=\"carta-filler svelte-1c77udu\">\u003C/div> \u003Cdiv class=\"carta-toolbar-right svelte-1c77udu\"> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"0\" title=\"Heading\" aria-label=\"Heading\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4.5 2.75a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-4.5h7v4.5a.75.75 0 0 0 1.5 0V2.75a.75.75 0 0 0-1.5 0v4.5h-7v-4.5Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Bold\" aria-label=\"Bold\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5.5a3.5 3.5 0 0 0 1.852-6.47A3.5 3.5 0 0 0 8.5 2H4Zm4.5 5a1.5 1.5 0 1 0 0-3H5v3h3.5ZM5 9v3h4.5a1.5 1.5 0 0 0 0-3H5Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Italic\" aria-label=\"Italic\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6.5 2a.75.75 0 0 0 0 1.5h1.93l-2.412 9H4A.75.75 0 0 0 4 14h5.5a.75.75 0 0 0 0-1.5H7.57l2.412-9H12A.75.75 0 0 0 12 2H6.5Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Strikethrough\" aria-label=\"Strikethrough\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M7.886 1a3.136 3.136 0 0 0-2.41 5.144L6.4 7.25H2.75a.75.75 0 0 0 0 1.5h4.899l1.722 2.066A1.636 1.636 0 0 1 8.114 13.5H8a1.75 1.75 0 0 1-1.75-1.75a.75.75 0 0 0-1.5 0A3.25 3.25 0 0 0 8 15h.114a3.136 3.136 0 0 0 2.41-5.144L9.6 8.75h3.649a.75.75 0 0 0 0-1.5H8.351L6.63 5.184A1.636 1.636 0 0 1 7.886 2.5H8c.966 0 1.75.784 1.75 1.75a.75.75 0 0 0 1.5 0A3.25 3.25 0 0 0 8 1h-.114Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Quote\" aria-label=\"Quote\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M1.5 3.75a.75.75 0 0 0-1.5 0v8.5a.75.75 0 0 0 1.5 0v-8.5ZM4.75 3a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Code\" aria-label=\"Code\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9.424 2.023a.75.75 0 0 1 .556.904L7.48 13.42a.75.75 0 0 1-1.46-.348L8.52 2.58a.75.75 0 0 1 .904-.556ZM11.16 4.22a.75.75 0 0 1 1.06 0l3.25 3.25L16 8l-.53.53l-3.25 3.25a.75.75 0 1 1-1.06-1.06L13.88 8l-2.72-2.72a.75.75 0 0 1 0-1.06ZM4.84 5.28a.75.75 0 1 0-1.06-1.06L.53 7.47L0 8l.53.53l3.25 3.25a.75.75 0 0 0 1.06-1.06L2.12 8l2.72-2.72Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Link\" aria-label=\"Link\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9.929 3.132a2.078 2.078 0 1 1 2.94 2.94l-.65.648a.75.75 0 0 0 1.061 1.06l.649-.648a3.579 3.579 0 0 0-5.06-5.06L6.218 4.72a3.578 3.578 0 0 0 0 5.06a.75.75 0 0 0 1.061-1.06a2.078 2.078 0 0 1 0-2.94L9.93 3.132Zm-.15 3.086a.75.75 0 0 0-1.057 1.064c.816.81.818 2.13.004 2.942l-2.654 2.647a2.08 2.08 0 0 1-2.94-2.944l.647-.647a.75.75 0 0 0-1.06-1.06l-.648.647a3.58 3.58 0 0 0 5.06 5.066l2.654-2.647a3.575 3.575 0 0 0-.007-5.068Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Bulleted list\" aria-label=\"Bulleted list\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M1 4.75a1 1 0 1 0 0-2a1 1 0 0 0 0 2ZM4.75 3a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75ZM2 8a1 1 0 1 1-2 0a1 1 0 0 1 2 0Zm-1 5.25a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Numbered list\" aria-label=\"Numbered list\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M0 2h2v4H1V3H0V2Zm1.637 9.008H0v-1h1.637a1.382 1.382 0 0 1 .803 2.506L1.76 13H3v1H0v-.972L1.859 11.7a.382.382 0 0 0-.222-.693ZM4.75 3a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Task list\" aria-label=\"Task list\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4.78 3.28a.75.75 0 0 0-1.06-1.06L1.75 4.19l-.47-.47A.75.75 0 0 0 .22 4.78l1 1a.75.75 0 0 0 1.06 0l2.5-2.5ZM6 3.75A.75.75 0 0 1 6.75 3h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 6 3.75ZM6 8a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 6 8Zm.75 3.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Zm-1.97-1.28a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-1-1a.75.75 0 1 1 1.06-1.06l.47.47l1.97-1.97a.75.75 0 0 1 1.06 0Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Attach file\" aria-label=\"Attach file\">\u003Csvg class=\"attach-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m22 12l-9 9c-6 6-15-3-9-9l9-9c4-4 10 2 6 6l-9 9c-2 2-5-1-3-3l9-9\">\u003C/path>\u003C/svg> \u003C/button> \u003C/div>\u003C/div> \u003Cdiv class=\"carta-wrapper\">\u003Cdiv class=\"carta-container mode-tabs svelte-11jlii3\">\u003Cdiv role=\"tooltip\" id=\"editor-unfocus-suggestion\" class=\"svelte-3mukqg\" data-svelte-h=\"svelte-167gk2c\">Press ESC then TAB to move the focus off the field\u003C/div> \u003Cdiv role=\"textbox\" tabindex=\"-1\" class=\"carta-input svelte-3mukqg\">\u003Cdiv class=\"carta-input-wrapper svelte-3mukqg\">\u003Cdiv class=\"carta-highlight carta-font-code svelte-3mukqg\" tabindex=\"-1\" aria-hidden=\"true\">\u003C!-- HTML_TAG_START -->This is an example inspired by [GitHub](https://github.com)\n```js\nconsole.log('Hello, World!');\n```\u003C!-- HTML_TAG_END -->\u003C/div> \u003Ctextarea name=\"md\" id=\"md\" spellcheck=\"false\" class=\"carta-font-code svelte-3mukqg\" aria-multiline=\"true\" aria-describedby=\"editor-unfocus-suggestion\" tabindex=\"0\" placeholder=\"\">This is an example inspired by [GitHub](https://github.com)\n```js\nconsole.log('Hello, World!');\n```\u003C/textarea>\u003C/div> \u003C/div> \u003C/div>\u003C/div> \u003C/div> \u003Cbr> \u003Cp data-svelte-h=\"svelte-1e4njai\">Plugins used: code, slash, emoji, attachment. View source on \u003Ca href=\"https://github.com/BearToCode/carta/blob/master/docs/src/lib/examples/GitHubExample.svelte\" rel=\"nofollow\">GitHub\u003C/a>.\u003C/p> \u003Ch2 id=\"discord\" data-svelte-h=\"svelte-rgqmoc\">\u003Ca href=\"#discord\">Discord\u003C/a>\u003C/h2> \u003Cdiv class=\"carta-editor carta-theme__discord svelte-11jlii3\"> \u003Cdiv class=\"carta-toolbar svelte-1c77udu\" role=\"toolbar\">\u003Cdiv class=\"carta-toolbar-left svelte-1c77udu\">\u003Cbutton type=\"button\" tabindex=\"0\" class=\"carta-active\">Write\u003C/button> \u003Cbutton type=\"button\" tabindex=\"-1\" class=\"\">Preview\u003C/button>\u003C/div> \u003Cdiv class=\"carta-filler svelte-1c77udu\">\u003C/div> \u003Cdiv class=\"carta-toolbar-right svelte-1c77udu\"> \u003C/div>\u003C/div> \u003Cdiv class=\"carta-wrapper\">\u003Cdiv class=\"carta-container mode-tabs svelte-11jlii3\">\u003Cdiv role=\"tooltip\" id=\"editor-unfocus-suggestion\" class=\"svelte-3mukqg\" data-svelte-h=\"svelte-167gk2c\">Press ESC then TAB to move the focus off the field\u003C/div> \u003Cdiv role=\"textbox\" tabindex=\"-1\" class=\"carta-input svelte-3mukqg\">\u003Cdiv class=\"carta-input-wrapper svelte-3mukqg\">\u003Cdiv class=\"carta-highlight carta-font-code svelte-3mukqg\" tabindex=\"-1\" aria-hidden=\"true\">\u003C!-- HTML_TAG_START -->\u003C!-- HTML_TAG_END -->\u003C/div> \u003Ctextarea name=\"md\" id=\"md\" spellcheck=\"false\" class=\"carta-font-code svelte-3mukqg\" aria-multiline=\"true\" aria-describedby=\"editor-unfocus-suggestion\" tabindex=\"0\" placeholder=\"Send a message to @someone\">\u003C/textarea>\u003C/div> \u003C/div> \u003C/div>\u003C/div> \u003C/div> \u003Cbr> \u003Cp data-svelte-h=\"svelte-p47nlv\">Plugins used: code, emoji. View source on \u003Ca href=\"https://github.com/BearToCode/carta/blob/master/docs/src/lib/examples/DiscordExample.svelte\" rel=\"nofollow\">GitHub\u003C/a>.\u003C/p> \u003Ch2 id=\"math-stack-exchange\" data-svelte-h=\"svelte-xqbs97\">\u003Ca href=\"#math-stack-exchange\">Math Stack Exchange\u003C/a>\u003C/h2> \u003Cdiv class=\"math-stack-exchange-container\">\u003Cdiv class=\"carta-editor carta-theme__math-stack-exchange svelte-11jlii3\"> \u003Cdiv class=\"carta-toolbar svelte-1c77udu\" role=\"toolbar\">\u003Cdiv class=\"carta-toolbar-left svelte-1c77udu\">\u003Cbutton type=\"button\" tabindex=\"0\" class=\"carta-active\">Write\u003C/button> \u003Cbutton type=\"button\" tabindex=\"-1\" class=\"\">Preview\u003C/button>\u003C/div> \u003Cdiv class=\"carta-filler svelte-1c77udu\">\u003C/div> \u003Cdiv class=\"carta-toolbar-right svelte-1c77udu\"> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"0\" title=\"Heading\" aria-label=\"Heading\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4.5 2.75a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-4.5h7v4.5a.75.75 0 0 0 1.5 0V2.75a.75.75 0 0 0-1.5 0v4.5h-7v-4.5Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Bold\" aria-label=\"Bold\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5.5a3.5 3.5 0 0 0 1.852-6.47A3.5 3.5 0 0 0 8.5 2H4Zm4.5 5a1.5 1.5 0 1 0 0-3H5v3h3.5ZM5 9v3h4.5a1.5 1.5 0 0 0 0-3H5Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Italic\" aria-label=\"Italic\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6.5 2a.75.75 0 0 0 0 1.5h1.93l-2.412 9H4A.75.75 0 0 0 4 14h5.5a.75.75 0 0 0 0-1.5H7.57l2.412-9H12A.75.75 0 0 0 12 2H6.5Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Strikethrough\" aria-label=\"Strikethrough\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M7.886 1a3.136 3.136 0 0 0-2.41 5.144L6.4 7.25H2.75a.75.75 0 0 0 0 1.5h4.899l1.722 2.066A1.636 1.636 0 0 1 8.114 13.5H8a1.75 1.75 0 0 1-1.75-1.75a.75.75 0 0 0-1.5 0A3.25 3.25 0 0 0 8 15h.114a3.136 3.136 0 0 0 2.41-5.144L9.6 8.75h3.649a.75.75 0 0 0 0-1.5H8.351L6.63 5.184A1.636 1.636 0 0 1 7.886 2.5H8c.966 0 1.75.784 1.75 1.75a.75.75 0 0 0 1.5 0A3.25 3.25 0 0 0 8 1h-.114Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Quote\" aria-label=\"Quote\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M1.5 3.75a.75.75 0 0 0-1.5 0v8.5a.75.75 0 0 0 1.5 0v-8.5ZM4.75 3a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Code\" aria-label=\"Code\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9.424 2.023a.75.75 0 0 1 .556.904L7.48 13.42a.75.75 0 0 1-1.46-.348L8.52 2.58a.75.75 0 0 1 .904-.556ZM11.16 4.22a.75.75 0 0 1 1.06 0l3.25 3.25L16 8l-.53.53l-3.25 3.25a.75.75 0 1 1-1.06-1.06L13.88 8l-2.72-2.72a.75.75 0 0 1 0-1.06ZM4.84 5.28a.75.75 0 1 0-1.06-1.06L.53 7.47L0 8l.53.53l3.25 3.25a.75.75 0 0 0 1.06-1.06L2.12 8l2.72-2.72Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Link\" aria-label=\"Link\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9.929 3.132a2.078 2.078 0 1 1 2.94 2.94l-.65.648a.75.75 0 0 0 1.061 1.06l.649-.648a3.579 3.579 0 0 0-5.06-5.06L6.218 4.72a3.578 3.578 0 0 0 0 5.06a.75.75 0 0 0 1.061-1.06a2.078 2.078 0 0 1 0-2.94L9.93 3.132Zm-.15 3.086a.75.75 0 0 0-1.057 1.064c.816.81.818 2.13.004 2.942l-2.654 2.647a2.08 2.08 0 0 1-2.94-2.944l.647-.647a.75.75 0 0 0-1.06-1.06l-.648.647a3.58 3.58 0 0 0 5.06 5.066l2.654-2.647a3.575 3.575 0 0 0-.007-5.068Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Bulleted list\" aria-label=\"Bulleted list\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M1 4.75a1 1 0 1 0 0-2a1 1 0 0 0 0 2ZM4.75 3a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75ZM2 8a1 1 0 1 1-2 0a1 1 0 0 1 2 0Zm-1 5.25a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Numbered list\" aria-label=\"Numbered list\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M0 2h2v4H1V3H0V2Zm1.637 9.008H0v-1h1.637a1.382 1.382 0 0 1 .803 2.506L1.76 13H3v1H0v-.972L1.859 11.7a.382.382 0 0 0-.222-.693ZM4.75 3a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm0 4.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Zm-.75 5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003Cbutton class=\"carta-icon svelte-1c77udu\" tabindex=\"-1\" title=\"Task list\" aria-label=\"Task list\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\u003Crect x=\"0\" y=\"0\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"none\">\u003C/rect>\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4.78 3.28a.75.75 0 0 0-1.06-1.06L1.75 4.19l-.47-.47A.75.75 0 0 0 .22 4.78l1 1a.75.75 0 0 0 1.06 0l2.5-2.5ZM6 3.75A.75.75 0 0 1 6.75 3h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 6 3.75ZM6 8a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 6 8Zm.75 3.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Zm-1.97-1.28a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-1-1a.75.75 0 1 1 1.06-1.06l.47.47l1.97-1.97a.75.75 0 0 1 1.06 0Z\" clip-rule=\"evenodd\">\u003C/path>\u003C/svg> \u003C/button> \u003C/div>\u003C/div> \u003Cdiv class=\"carta-wrapper\">\u003Cdiv class=\"carta-container mode-tabs svelte-11jlii3\">\u003Cdiv role=\"tooltip\" id=\"editor-unfocus-suggestion\" class=\"svelte-3mukqg\" data-svelte-h=\"svelte-167gk2c\">Press ESC then TAB to move the focus off the field\u003C/div> \u003Cdiv role=\"textbox\" tabindex=\"-1\" class=\"carta-input svelte-3mukqg\">\u003Cdiv class=\"carta-input-wrapper svelte-3mukqg\">\u003Cdiv class=\"carta-highlight carta-font-code svelte-3mukqg\" tabindex=\"-1\" aria-hidden=\"true\">\u003C!-- HTML_TAG_START -->> Here is a formula:\n\n$$\n\\dfrac{\\partial}{\\partial t}(\n\t\\dfrac{\\partial \\mathcal{L}}{\\partial \\dot{q}_k}\n) - \\dfrac{\\partial \\mathcal{L}}{\\partial q_k} = 0\n$$\n\n> And here is a circuit:\n\n```tikz\n\\usepackage{circuitikz}\n\n\\begin{document}\n\t\\begin{circuitikz} \\draw\n\t\t(0,0) to[battery] (0,4)\n \t\tto[ammeter] (4,4) -- (4,0)\n \t\tto[lamp] (0,0)\n\t\t;\n\t\\end{circuitikz}\n\\end{document}\n```\n\n\u003C!-- HTML_TAG_END -->\u003C/div> \u003Ctextarea name=\"md\" id=\"md\" spellcheck=\"false\" class=\"carta-font-code svelte-3mukqg\" aria-multiline=\"true\" aria-describedby=\"editor-unfocus-suggestion\" tabindex=\"0\" placeholder=\"\">> Here is a formula:\n\n$$\n\\dfrac{\\partial}{\\partial t}(\n\t\\dfrac{\\partial \\mathcal{L}}{\\partial \\dot{q}_k}\n) - \\dfrac{\\partial \\mathcal{L}}{\\partial q_k} = 0\n$$\n\n> And here is a circuit:\n\n```tikz\n\\usepackage{circuitikz}\n\n\\begin{document}\n\t\\begin{circuitikz} \\draw\n\t\t(0,0) to[battery] (0,4)\n \t\tto[ammeter] (4,4) -- (4,0)\n \t\tto[lamp] (0,0)\n\t\t;\n\t\\end{circuitikz}\n\\end{document}\n```\n\n\u003C/textarea>\u003C/div> \u003C/div> \u003C/div>\u003C/div> \u003C/div> \u003Cdiv class=\"carta-viewer carta-theme__math-stack-exchange markdown-body\"> \u003C!-- HTML_TAG_START -->\u003Cblockquote>\n\u003Cp>Here is a formula:\u003C/p>\n\u003C/blockquote>\n\u003Cspan class=\"katex-display\">\u003Cspan class=\"katex\">\u003Cspan class=\"katex-mathml\">\u003Cmath xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\">\u003Csemantics>\u003Cmrow>\u003Cmfrac>\u003Cmi mathvariant=\"normal\">∂\u003C/mi>\u003Cmrow>\u003Cmi mathvariant=\"normal\">∂\u003C/mi>\u003Cmi>t\u003C/mi>\u003C/mrow>\u003C/mfrac>\u003Cmo stretchy=\"false\">(\u003C/mo>\u003Cmfrac>\u003Cmrow>\u003Cmi mathvariant=\"normal\">∂\u003C/mi>\u003Cmi mathvariant=\"script\">L\u003C/mi>\u003C/mrow>\u003Cmrow>\u003Cmi mathvariant=\"normal\">∂\u003C/mi>\u003Cmsub>\u003Cmover accent=\"true\">\u003Cmi>q\u003C/mi>\u003Cmo>˙\u003C/mo>\u003C/mover>\u003Cmi>k\u003C/mi>\u003C/msub>\u003C/mrow>\u003C/mfrac>\u003Cmo stretchy=\"false\">)\u003C/mo>\u003Cmo>−\u003C/mo>\u003Cmfrac>\u003Cmrow>\u003Cmi mathvariant=\"normal\">∂\u003C/mi>\u003Cmi mathvariant=\"script\">L\u003C/mi>\u003C/mrow>\u003Cmrow>\u003Cmi mathvariant=\"normal\">∂\u003C/mi>\u003Cmsub>\u003Cmi>q\u003C/mi>\u003Cmi>k\u003C/mi>\u003C/msub>\u003C/mrow>\u003C/mfrac>\u003Cmo>=\u003C/mo>\u003Cmn>0\u003C/mn>\u003C/mrow>\u003Cannotation encoding=\"application/x-tex\">\\dfrac{\\partial}{\\partial t}(\n\t\\dfrac{\\partial \\mathcal{L}}{\\partial \\dot{q}_k}\n) - \\dfrac{\\partial \\mathcal{L}}{\\partial q_k} = 0\u003C/annotation>\u003C/semantics>\u003C/math>\u003C/span>\u003Cspan class=\"katex-html\" aria-hidden=\"true\">\u003Cspan class=\"base\">\u003Cspan class=\"strut\" style=\"height:2.2519em;vertical-align:-0.8804em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mopen nulldelimiter\">\u003C/span>\u003Cspan class=\"mfrac\">\u003Cspan class=\"vlist-t vlist-t2\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:1.3714em;\">\u003Cspan style=\"top:-2.314em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord\" style=\"margin-right:0.05556em;\">∂\u003C/span>\u003Cspan class=\"mord mathnormal\">t\u003C/span>\u003C/span>\u003C/span>\u003Cspan style=\"top:-3.23em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"frac-line\" style=\"border-bottom-width:0.04em;\">\u003C/span>\u003C/span>\u003Cspan style=\"top:-3.677em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord\" style=\"margin-right:0.05556em;\">∂\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.686em;\">\u003Cspan>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan class=\"mclose nulldelimiter\">\u003C/span>\u003C/span>\u003Cspan class=\"mopen\">(\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mopen nulldelimiter\">\u003C/span>\u003Cspan class=\"mfrac\">\u003Cspan class=\"vlist-t vlist-t2\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:1.3714em;\">\u003Cspan style=\"top:-2.314em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord\" style=\"margin-right:0.05556em;\">∂\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord accent\">\u003Cspan class=\"vlist-t vlist-t2\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:0.6679em;\">\u003Cspan style=\"top:-3em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"mord mathnormal\" style=\"margin-right:0.03588em;\">q\u003C/span>\u003C/span>\u003Cspan style=\"top:-3em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"accent-body\" style=\"left:-0.0556em;\">\u003Cspan class=\"mord\">˙\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.1944em;\">\u003Cspan>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan class=\"msupsub\">\u003Cspan class=\"vlist-t vlist-t2\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:0.3361em;\">\u003Cspan style=\"top:-2.55em;margin-left:-0.0359em;margin-right:0.05em;\">\u003Cspan class=\"pstrut\" style=\"height:2.7em;\">\u003C/span>\u003Cspan class=\"sizing reset-size6 size3 mtight\">\u003Cspan class=\"mord mathnormal mtight\" style=\"margin-right:0.03148em;\">k\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.15em;\">\u003Cspan>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan style=\"top:-3.23em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"frac-line\" style=\"border-bottom-width:0.04em;\">\u003C/span>\u003C/span>\u003Cspan style=\"top:-3.677em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord\" style=\"margin-right:0.05556em;\">∂\u003C/span>\u003Cspan class=\"mord mathcal\">L\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.8804em;\">\u003Cspan>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan class=\"mclose nulldelimiter\">\u003C/span>\u003C/span>\u003Cspan class=\"mclose\">)\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:2.2519em;vertical-align:-0.8804em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mopen nulldelimiter\">\u003C/span>\u003Cspan class=\"mfrac\">\u003Cspan class=\"vlist-t vlist-t2\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:1.3714em;\">\u003Cspan style=\"top:-2.314em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord\" style=\"margin-right:0.05556em;\">∂\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord mathnormal\" style=\"margin-right:0.03588em;\">q\u003C/span>\u003Cspan class=\"msupsub\">\u003Cspan class=\"vlist-t vlist-t2\">\u003Cspan class=\"vlist-r\">\u003Cspan class=\"vlist\" style=\"height:0.3361em;\">\u003Cspan style=\"top:-2.55em;margin-left:-0.0359em;margin-right:0.05em;\">\u003Cspan class=\"pstrut\" style=\"height:2.7em;\">\u003C/span>\u003Cspan class=\"sizing reset-size6 size3 mtight\">\u003Cspan class=\"mord mathnormal mtight\" style=\"margin-right:0.03148em;\">k\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.15em;\">\u003Cspan>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan style=\"top:-3.23em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"frac-line\" style=\"border-bottom-width:0.04em;\">\u003C/span>\u003C/span>\u003Cspan style=\"top:-3.677em;\">\u003Cspan class=\"pstrut\" style=\"height:3em;\">\u003C/span>\u003Cspan class=\"mord\">\u003Cspan class=\"mord\" style=\"margin-right:0.05556em;\">∂\u003C/span>\u003Cspan class=\"mord mathcal\">L\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.8804em;\">\u003Cspan>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003Cspan class=\"mclose nulldelimiter\">\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.6444em;\">\u003C/span>\u003Cspan class=\"mord\">0\u003C/span>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\n\u003Cblockquote>\n\u003Cp>And here is a circuit:\u003C/p>\n\u003C/blockquote>\n\u003Cpre>\u003Ccode class=\"language-tikz\">\\usepackage{circuitikz}\n\n\\begin{document}\n\t\\begin{circuitikz} \\draw\n\t\t(0,0) to[battery] (0,4)\n \t\tto[ammeter] (4,4) -- (4,0)\n \t\tto[lamp] (0,0)\n\t\t;\n\t\\end{circuitikz}\n\\end{document}\n\u003C/code>\u003C/pre>\u003C!-- HTML_TAG_END --> \u003C/div>\u003C/div> \u003Cbr> \u003Cp data-svelte-h=\"svelte-yiif2j\">Plugins used: math, tikz. View source on \u003Ca href=\"https://github.com/BearToCode/carta/blob/master/docs/src/lib/examples/MathStackExchangeExample.svelte\" rel=\"nofollow\">GitHub\u003C/a>.\u003C/p>",css:{code:".carta-editor.svelte-11jlii3{position:relative;display:flex;flex-direction:column}.carta-container.mode-split > *{width:50%}.carta-container.mode-tabs > *{width:100%}.carta-container.svelte-11jlii3{display:flex;position:relative}\n.carta-toolbar.svelte-1c77udu{height:2rem;display:flex;flex-shrink:0;overflow-x:auto;overflow-y:hidden}.carta-toolbar-left.svelte-1c77udu{display:flex;align-items:center;flex-wrap:nowrap;height:100%}.carta-filler.svelte-1c77udu{flex:1}.carta-toolbar-right.svelte-1c77udu{height:100%;display:flex;align-items:center;justify-content:flex-end}.carta-icon.svelte-1c77udu{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:3px;cursor:pointer;margin-left:4px}.carta-icon-full.svelte-1c77udu{display:flex;align-items:center;border-radius:3px;cursor:pointer}.carta-icons-menu.svelte-1c77udu{position:absolute;top:100%;right:0;display:flex;flex-direction:column;margin-right:0.5rem;z-index:1}\n.carta-input.svelte-3mukqg{position:relative}.carta-input-wrapper.svelte-3mukqg{height:100%;position:relative;font-family:monospace}textarea.svelte-3mukqg{position:relative;width:100%;max-width:100%;min-height:100%;overflow-y:hidden;resize:none;padding:0;margin:0;border:0;color:transparent;background:transparent;outline:none;-moz-tab-size:4;-o-tab-size:4;tab-size:4}.carta-highlight.svelte-3mukqg{position:absolute;left:0;right:0;top:0;bottom:0;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:-moz-fit-content;height:fit-content;padding:inherit;margin:inherit;word-wrap:break-word;white-space:pre-wrap;word-break:break-word}.carta-highlight .shiki{margin:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;background-color:transparent !important}.carta-highlight *{font-family:inherit;font-size:inherit;word-wrap:break-word;white-space:pre-wrap;word-break:break-word}#editor-unfocus-suggestion.svelte-3mukqg{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}",map:null},head:""},metadata:{title:"Examples",section:"Overview"}},"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>
|