152 lines
42 KiB
HTML
152 lines
42 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>Editing Styles - 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">Editing Styles</h1> <div class="markdown"> <!-- HTML_TAG_START --><h2 id="customizing-editor-styles" data-svelte-h="svelte-1oq9x79"><a href="#customizing-editor-styles">Customizing editor styles</a></h2> <p data-svelte-h="svelte-1d8k47q">While the core styles are embedded in the Svelte components, the others can be set in a custom stylesheet. Here is what the final rendered HTML looks like.</p> <div class="relative"><pre class="language-html"><!-- HTML_TAG_START --><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-editor carta-theme__<theme><span class="token punctuation">"</span></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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-toolbar<span class="token punctuation">"</span></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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-toolbar-left<span class="token punctuation">"</span></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>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-toolbar-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-icon<span class="token punctuation">"</span></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>button</span><span class="token punctuation">></span></span>
|
|
<span class="token comment"><!-- Other icons --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-wrapper<span class="token punctuation">"</span></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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-container mode-<split|tabs><span class="token punctuation">"</span></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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-input-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-font-code<span class="token punctuation">"</span></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>pre</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-font-code<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>md<span class="token punctuation">"</span></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 punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carta-renderer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token comment"><!-- Rendered Markdown --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 punctuation">></span></span></code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h3 id="using-multiple-themes" data-svelte-h="svelte-1w3acjm"><a href="#using-multiple-themes">Using multiple themes</a></h3> <p data-svelte-h="svelte-fatvzl">By using the <code>theme</code> property in <code><MarkdownEditor></code> you can differentiate the themes of multiple editors.</p> <h2 id="dark-mode" data-svelte-h="svelte-50vs2h"><a href="#dark-mode">Dark mode</a></h2> <p data-svelte-h="svelte-1p81he7">When using dark mode, there are two different themes that have to be changed: the editor theme and the one used for syntax highlighting:</p> <div class="relative"><pre class="language-css"><!-- HTML_TAG_START --><code class="language-css"><span class="token comment">/* Editor dark mode */</span>
|
|
<span class="token comment">/* Only if you are using the default theme */</span>
|
|
<span class="token selector">html.dark .carta-theme__default</span> <span class="token punctuation">{</span>
|
|
<span class="token property">--border-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--border-color-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">--selection-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--selection-color-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">--focus-outline</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--focus-outline-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">--hover-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--hover-color-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">--caret-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--caret-color-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">--text-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text-color-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment">/* Code dark mode */</span>
|
|
<span class="token comment">/* Only if you didn't specify a custom code theme */</span>
|
|
<span class="token selector">html.dark .shiki,
|
|
html.dark .shiki span</span> <span class="token punctuation">{</span>
|
|
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--shiki-dark<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span></code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h2 id="changing-markdown-input-color-theme" data-svelte-h="svelte-fxmyja"><a href="#changing-markdown-input-color-theme">Changing Markdown input color theme</a></h2> <p data-svelte-h="svelte-1eehkcf">Carta uses <a href="https://shiki.matsu.io/" rel="nofollow">Shiki</a> for syntax highlighting. Two default themes are included in the core package, which are set as a <a href="https://shiki.matsu.io/guide/dual-themes" rel="nofollow">dual theme</a> to support light and dark mode. If you plan to use a custom one with light/dark modes, make sure to use a dual theme as well.</p> <p data-svelte-h="svelte-ex141y">You can change theme in the options:</p> <div class="relative"><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>
|
|
theme<span class="token operator">:</span> <span class="token string">'github-dark'</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <p data-svelte-h="svelte-1ebbpib">If you use a <a href="https://shiki.matsu.io/guide/load-theme" rel="nofollow">custom theme</a>(or a custom language), you need to provide it inside the options, so that it gets loaded into the highlighter:</p> <div class="relative"><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>
|
|
shikiOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
langs<span class="token operator">:</span> <span class="token comment">// ...</span>
|
|
themes<span class="token operator">:</span> <span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span></code><!-- HTML_TAG_END --></pre> <button title="Copy" class="absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 " data-svelte-h="svelte-ms5nns"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h2 id="markdown-stylesheets" data-svelte-h="svelte-16btwno"><a href="#markdown-stylesheets">Markdown stylesheets</a></h2> <p data-svelte-h="svelte-18c97fa">Markdown is converted into standard HTML, so you can edit the final styles by using standard CSS rules. If you do not wish to create one from the ground up, you can use some already complete stylesheets, like <a href="https://github.com/sindresorhus/github-markdown-css" rel="nofollow">github-markdown-css</a> or <a href="https://tailwindcss.com/docs/typography-plugin" rel="nofollow">Tailwind Typography</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:"\u003Ch2 id=\"customizing-editor-styles\" data-svelte-h=\"svelte-1oq9x79\">\u003Ca href=\"#customizing-editor-styles\">Customizing editor styles\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-1d8k47q\">While the core styles are embedded in the Svelte components, the others can be set in a custom stylesheet. Here is what the final rendered HTML looks like.\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-html\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-html\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>div\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-editor carta-theme__<theme>\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>div\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-toolbar\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>div\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-toolbar-left\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\t\u003Cspan class=\"token comment\"><!-- ... -->\u003C/span>\n\t\t\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>\n\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>div\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-toolbar-right\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>button\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-icon\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003Cspan class=\"token comment\"><!-- ... -->\u003C/span>\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"></\u003C/span>button\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\t\u003Cspan class=\"token comment\"><!-- Other icons -->\u003C/span>\n\t\t\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>\n\t\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>\n\n\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>div\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-wrapper\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>div\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-container mode-<split|tabs>\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>div\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-input-wrapper\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>pre\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-font-code\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003Cspan class=\"token comment\"><!-- ... -->\u003C/span>\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"></\u003C/span>pre\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>textarea\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-font-code\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span> \u003Cspan class=\"token attr-name\">id\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>md\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span> \u003Cspan class=\"token punctuation\">/>\u003C/span>\u003C/span>\n\t\t\t\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>\n\t\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>div\u003C/span> \u003Cspan class=\"token attr-name\">class\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>carta-renderer\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\t\t\u003Cspan class=\"token comment\"><!-- Rendered Markdown -->\u003C/span>\n\t\t\t\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>\n\t\t\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>\n\t\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>\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> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch3 id=\"using-multiple-themes\" data-svelte-h=\"svelte-1w3acjm\">\u003Ca href=\"#using-multiple-themes\">Using multiple themes\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-fatvzl\">By using the \u003Ccode>theme\u003C/code> property in \u003Ccode><MarkdownEditor>\u003C/code> you can differentiate the themes of multiple editors.\u003C/p> \u003Ch2 id=\"dark-mode\" data-svelte-h=\"svelte-50vs2h\">\u003Ca href=\"#dark-mode\">Dark mode\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-1p81he7\">When using dark mode, there are two different themes that have to be changed: the editor theme and the one used for syntax highlighting:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-css\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-css\">\u003Cspan class=\"token comment\">/* Editor dark mode */\u003C/span>\n\u003Cspan class=\"token comment\">/* Only if you are using the default theme */\u003C/span>\n\u003Cspan class=\"token selector\">html.dark .carta-theme__default\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token property\">--border-color\u003C/span>\u003Cspan class=\"token punctuation\">:\u003C/span> \u003Cspan class=\"token function\">var\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>--border-color-dark\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token property\">--selection-color\u003C/span>\u003Cspan class=\"token punctuation\">:\u003C/span> \u003Cspan class=\"token function\">var\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>--selection-color-dark\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token property\">--focus-outline\u003C/span>\u003Cspan class=\"token punctuation\">:\u003C/span> \u003Cspan class=\"token function\">var\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>--focus-outline-dark\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token property\">--hover-color\u003C/span>\u003Cspan class=\"token punctuation\">:\u003C/span> \u003Cspan class=\"token function\">var\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>--hover-color-dark\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token property\">--caret-color\u003C/span>\u003Cspan class=\"token punctuation\">:\u003C/span> \u003Cspan class=\"token function\">var\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>--caret-color-dark\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token property\">--text-color\u003C/span>\u003Cspan class=\"token punctuation\">:\u003C/span> \u003Cspan class=\"token function\">var\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>--text-color-dark\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\n\n\u003Cspan class=\"token comment\">/* Code dark mode */\u003C/span>\n\u003Cspan class=\"token comment\">/* Only if you didn't specify a custom code theme */\u003C/span>\n\u003Cspan class=\"token selector\">html.dark .shiki,\nhtml.dark .shiki span\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token property\">color\u003C/span>\u003Cspan class=\"token punctuation\">:\u003C/span> \u003Cspan class=\"token function\">var\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>--shiki-dark\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token important\">!important\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch2 id=\"changing-markdown-input-color-theme\" data-svelte-h=\"svelte-fxmyja\">\u003Ca href=\"#changing-markdown-input-color-theme\">Changing Markdown input color theme\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-1eehkcf\">Carta uses \u003Ca href=\"https://shiki.matsu.io/\" rel=\"nofollow\">Shiki\u003C/a> for syntax highlighting. Two default themes are included in the core package, which are set as a \u003Ca href=\"https://shiki.matsu.io/guide/dual-themes\" rel=\"nofollow\">dual theme\u003C/a> to support light and dark mode. If you plan to use a custom one with light/dark modes, make sure to use a dual theme as well.\u003C/p> \u003Cp data-svelte-h=\"svelte-ex141y\">You can change theme in the options:\u003C/p> \u003Cdiv class=\"relative\">\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\ttheme\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'github-dark'\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cp data-svelte-h=\"svelte-1ebbpib\">If you use a \u003Ca href=\"https://shiki.matsu.io/guide/load-theme\" rel=\"nofollow\">custom theme\u003C/a>(or a custom language), you need to provide it inside the options, so that it gets loaded into the highlighter:\u003C/p> \u003Cdiv class=\"relative\">\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\tshikiOptions\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\tlangs\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token comment\">// ...\u003C/span>\n\t\tthemes\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token comment\">// ...\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch2 id=\"markdown-stylesheets\" data-svelte-h=\"svelte-16btwno\">\u003Ca href=\"#markdown-stylesheets\">Markdown stylesheets\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-18c97fa\">Markdown is converted into standard HTML, so you can edit the final styles by using standard CSS rules. If you do not wish to create one from the ground up, you can use some already complete stylesheets, like \u003Ca href=\"https://github.com/sindresorhus/github-markdown-css\" rel=\"nofollow\">github-markdown-css\u003C/a> or \u003Ca href=\"https://tailwindcss.com/docs/typography-plugin\" rel=\"nofollow\">Tailwind Typography\u003C/a>.\u003C/p>",css:{code:"",map:null},head:""},metadata:{title:"Editing Styles",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>
|