207 lines
74 KiB
HTML
207 lines
74 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>Using Svelte Components - 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">Using Svelte Components</h1> <div class="markdown"> <!-- HTML_TAG_START --><p data-svelte-h="svelte-1ur5rpk">Svelte components can be embedded into the rendered HTML to make certain elements interactive. However, they require a bit more work, as Remark is configured to only render static HTML. To get around this, the idea is to do the following:</p> <ol data-svelte-h="svelte-101k9os"><li>Create a Unified plugin to isolate the targeted element;</li> <li>Replace all the elements with the component, after every render.</li></ol> <h2 id="example" data-svelte-h="svelte-r4uhiu"><a href="#example">Example</a></h2> <p data-svelte-h="svelte-r8in7e">Let’s say we want to replace all hashtags, such as <code>#something</code>, with a custom component. Here is as example of how that could be achieved.</p> <h3 id="parsing-the-hashtags" data-svelte-h="svelte-15fs2m6"><a href="#parsing-the-hashtags">Parsing the hashtags</a></h3> <p data-svelte-h="svelte-1r7bbxd">First things first: we need to tell the parser that we want to parse hashtags as custom elements. To do this, it’s useful to first install the following packages:</p> <div class="relative"><pre class="language-shell"><!-- HTML_TAG_START --><code class="language-shell"><span class="token function">npm</span> i unist-util-visit
|
||
<span class="token comment"># Types</span>
|
||
<span class="token function">npm</span> i <span class="token parameter variable">-D</span> unified hast</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-yy3zc6">Let’s create a Unified plugin. The basic structure of a plugin is the following:</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Plugin <span class="token keyword">as</span> UnifiedPlugin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'unified'</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">SKIP</span><span class="token punctuation">,</span> visit <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'unist-util-visit'</span>
|
||
|
||
<span class="token keyword">const</span> unifiedPlugin<span class="token operator">:</span> UnifiedPlugin<span class="token operator"><</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> hast<span class="token punctuation">.</span>Root<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>tree<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Visit every node in the syntax tree</span>
|
||
<span class="token function">visit</span><span class="token punctuation">(</span>tree<span class="token punctuation">,</span> <span class="token punctuation">(</span>node<span class="token punctuation">,</span> index<span class="token punctuation">,</span> parent<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Do something with the node</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-1akzv4g">We now want to parse text nodes, so that words such as <code>#pizza</code> and <code>#123</code> are separated from the rest. This is a possible implementation:</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">const</span> unifiedPlugin<span class="token operator">:</span> UnifiedPlugin<span class="token operator"><</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> hast<span class="token punctuation">.</span>Root<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>tree<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">visit</span><span class="token punctuation">(</span>tree<span class="token punctuation">,</span> <span class="token punctuation">(</span>node<span class="token punctuation">,</span> index<span class="token punctuation">,</span> parent<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Skip code blocks and their children</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'element'</span> <span class="token operator">&&</span> node<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'pre'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token constant">SKIP</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// Skip non-text nodes</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">!==</span> <span class="token string">'text'</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> text <span class="token operator">=</span> node <span class="token keyword">as</span> hast<span class="token punctuation">.</span>Text<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Parse the text node and replace hashtags with spans</span>
|
||
<span class="token keyword">const</span> regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">#(w+)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> children<span class="token operator">:</span> <span class="token punctuation">(</span>hast<span class="token punctuation">.</span>Element <span class="token operator">|</span> hast<span class="token punctuation">.</span>Text<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> lastIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> match<span class="token punctuation">;</span>
|
||
<span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>match <span class="token operator">=</span> regex<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>text<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> before <span class="token operator">=</span> text<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>lastIndex<span class="token punctuation">,</span> match<span class="token punctuation">.</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>before<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> before <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
type<span class="token operator">:</span> <span class="token string">'element'</span><span class="token punctuation">,</span>
|
||
tagName<span class="token operator">:</span> <span class="token string">'span'</span><span class="token punctuation">,</span>
|
||
properties<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'hashtag'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> match<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> match<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
lastIndex <span class="token operator">=</span> regex<span class="token punctuation">.</span>lastIndex<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>lastIndex <span class="token operator"><</span> text<span class="token punctuation">.</span>value<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> text<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>lastIndex<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// Replace the text node with all the children</span>
|
||
parent<span class="token operator">!</span><span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token operator">!</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token operator">...</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Skip the children</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token constant">SKIP</span><span class="token punctuation">,</span> index<span class="token operator">!</span> <span class="token operator">+</span> children<span class="token punctuation">.</span>length<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span 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-tc8iwr">If you want a more in-depth guide on writing Unified plugins, you can check out the official <a href="https://unifiedjs.com/learn/guide/create-a-plugin/" rel="nofollow">documentation</a>.</p> <p data-svelte-h="svelte-1a8clay">Notice that hashtags are now replaced with the following:</p> <pre class="language-html"><!-- HTML_TAG_START --><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hashtag<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pizza<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> #pizza <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></code><!-- HTML_TAG_END --></pre> <h3 id="configuring-the-transformer" data-svelte-h="svelte-fedxl7"><a href="#configuring-the-transformer">Configuring the transformer</a></h3> <p data-svelte-h="svelte-6g4x7v">Unified plugins need to be wrapped inside a <code>UnifiedTransformer</code> type, to be able to be used in Carta.</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> UnifiedTransformer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'carta-md'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> hashtagTransformer<span class="token operator">:</span> UnifiedTransformer<span class="token operator"><</span><span class="token string">'sync'</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
execution<span class="token operator">:</span> <span class="token string">'sync'</span><span class="token punctuation">,</span> <span class="token comment">// Sync, since the plugin is synchronous</span>
|
||
type<span class="token operator">:</span> <span class="token string">'rehype'</span><span class="token punctuation">,</span> <span class="token comment">// Rehype, since it operates on HTML</span>
|
||
<span class="token function">transform</span><span class="token punctuation">(</span><span class="token punctuation">{</span> processor <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
processor<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>unifiedPlugin<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></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="mounting-the-components" data-svelte-h="svelte-1xm0rp4"><a href="#mounting-the-components">Mounting the components</a></h3> <p data-svelte-h="svelte-1btti53">We now want to replace the generated hashtag placeholders with the following element:</p> <div class="relative"><pre class="language-svelte"><!-- HTML_TAG_START --><code class="language-svelte"><span class="token comment"><!-- Hashtag.svelte --></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">export</span> <span class="token keyword">let</span> value<span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
<span class="token attr-name"><span class="token namespace">on:</span>click=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hashtag clicked!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
#<span class="token language-javascript"><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</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> <p data-svelte-h="svelte-1ab5sxp">To do that, we create a listener that:</p> <ol data-svelte-h="svelte-1ks6dt4"><li>Finds all the previous placeholders;</li> <li>Mounts the component next to them;</li> <li>Removes the placeholders.</li></ol> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Listener <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'carta-md'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> Hashtag <span class="token keyword">from</span> <span class="token string">'./Hashtag.svelte'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> convertHashtags<span class="token operator">:</span> Listener<span class="token operator"><</span><span class="token string">'carta-render'</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token string">'carta-render'</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">function</span> <span class="token function">onRender</span><span class="token punctuation">(</span><span class="token punctuation">{</span> detail<span class="token operator">:</span> <span class="token punctuation">{</span> carta <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> rendererContainer <span class="token operator">=</span> carta<span class="token punctuation">.</span>renderer<span class="token operator">?.</span>container<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>rendererContainer<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Find all hashtag spans and replace them with Svelte components</span>
|
||
<span class="token keyword">const</span> hashtagSpans <span class="token operator">=</span> rendererContainer<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'span[type="hashtag"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> span <span class="token keyword">of</span> hashtagSpans<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> hashtag <span class="token operator">=</span> span<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'value'</span><span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">''</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">new</span> <span class="token class-name">Hashtag</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
target<span class="token operator">:</span> span<span class="token punctuation">.</span>parentElement<span class="token operator">!</span><span class="token punctuation">,</span>
|
||
anchor<span class="token operator">:</span> span<span class="token punctuation">,</span>
|
||
props<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> hashtag <span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
span<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span 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> <h3 id="using-the-plugin" data-svelte-h="svelte-bnlm90"><a href="#using-the-plugin">Using the plugin</a></h3> <p data-svelte-h="svelte-sji02v">Let’s now create a Plugin with the transformer and the listener:</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Plugin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'carta-md'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">export</span> <span class="token keyword">const</span> hashtag <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Plugin <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
transformers<span class="token operator">:</span> <span class="token punctuation">[</span>hashtagTransformer<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
listeners<span class="token operator">:</span> <span class="token punctuation">[</span>convertHashtags<span class="token punctuation">]</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-9krp4j">We can now use the plugin with the following:</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> Carta <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'carta-md'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">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>
|
||
extensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">hashtag</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <p data-svelte-h="svelte-1fa80qn">You can find the example source code <a href="https://github.com/BearToCode/svelte-in-carta-example" rel="nofollow">here</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-1ur5rpk\">Svelte components can be embedded into the rendered HTML to make certain elements interactive. However, they require a bit more work, as Remark is configured to only render static HTML. To get around this, the idea is to do the following:\u003C/p> \u003Col data-svelte-h=\"svelte-101k9os\">\u003Cli>Create a Unified plugin to isolate the targeted element;\u003C/li> \u003Cli>Replace all the elements with the component, after every render.\u003C/li>\u003C/ol> \u003Ch2 id=\"example\" data-svelte-h=\"svelte-r4uhiu\">\u003Ca href=\"#example\">Example\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-r8in7e\">Let’s say we want to replace all hashtags, such as \u003Ccode>#something\u003C/code>, with a custom component. Here is as example of how that could be achieved.\u003C/p> \u003Ch3 id=\"parsing-the-hashtags\" data-svelte-h=\"svelte-15fs2m6\">\u003Ca href=\"#parsing-the-hashtags\">Parsing the hashtags\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-1r7bbxd\">First things first: we need to tell the parser that we want to parse hashtags as custom elements. To do this, it’s useful to first install the following packages:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-shell\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-shell\">\u003Cspan class=\"token function\">npm\u003C/span> i unist-util-visit\n\u003Cspan class=\"token comment\"># Types\u003C/span>\n\u003Cspan class=\"token function\">npm\u003C/span> i \u003Cspan class=\"token parameter variable\">-D\u003C/span> unified hast\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-yy3zc6\">Let’s create a Unified plugin. The basic structure of a plugin is the following:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token keyword\">type\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Plugin \u003Cspan class=\"token keyword\">as\u003C/span> UnifiedPlugin \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'unified'\u003C/span>\n\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> \u003Cspan class=\"token constant\">SKIP\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> visit \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'unist-util-visit'\u003C/span>\n\n\u003Cspan class=\"token keyword\">const\u003C/span> unifiedPlugin\u003Cspan class=\"token operator\">:\u003C/span> UnifiedPlugin\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> hast\u003Cspan class=\"token punctuation\">.\u003C/span>Root\u003Cspan class=\"token operator\">>\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token keyword\">return\u003C/span> \u003Cspan class=\"token keyword\">function\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>tree\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n \u003Cspan class=\"token comment\">// Visit every node in the syntax tree\u003C/span>\n \u003Cspan class=\"token function\">visit\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>tree\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>node\u003Cspan class=\"token punctuation\">,\u003C/span> index\u003Cspan class=\"token punctuation\">,\u003C/span> parent\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n \u003Cspan class=\"token comment\">// Do something with the node\u003C/span>\n \u003Cspan class=\"token punctuation\">}\u003C/span>\n \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> \u003Cp data-svelte-h=\"svelte-1akzv4g\">We now want to parse text nodes, so that words such as \u003Ccode>#pizza\u003C/code> and \u003Ccode>#123\u003C/code> are separated from the rest. This is a possible implementation:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> unifiedPlugin\u003Cspan class=\"token operator\">:\u003C/span> UnifiedPlugin\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> hast\u003Cspan class=\"token punctuation\">.\u003C/span>Root\u003Cspan class=\"token operator\">>\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token keyword\">return\u003C/span> \u003Cspan class=\"token keyword\">function\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>tree\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token function\">visit\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>tree\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>node\u003Cspan class=\"token punctuation\">,\u003C/span> index\u003Cspan class=\"token punctuation\">,\u003C/span> parent\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\u003Cspan class=\"token comment\">// Skip code blocks and their children\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>node\u003Cspan class=\"token punctuation\">.\u003C/span>type \u003Cspan class=\"token operator\">===\u003C/span> \u003Cspan class=\"token string\">'element'\u003C/span> \u003Cspan class=\"token operator\">&&\u003C/span> node\u003Cspan class=\"token punctuation\">.\u003C/span>tagName \u003Cspan class=\"token operator\">===\u003C/span> \u003Cspan class=\"token string\">'pre'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token keyword\">return\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token constant\">SKIP\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token comment\">// Skip non-text nodes\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>node\u003Cspan class=\"token punctuation\">.\u003C/span>type \u003Cspan class=\"token operator\">!==\u003C/span> \u003Cspan class=\"token string\">'text'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token keyword\">return\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> text \u003Cspan class=\"token operator\">=\u003C/span> node \u003Cspan class=\"token keyword\">as\u003C/span> hast\u003Cspan class=\"token punctuation\">.\u003C/span>Text\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\t\u003Cspan class=\"token comment\">// Parse the text node and replace hashtags with spans\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> regex \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token regex\">\u003Cspan class=\"token regex-delimiter\">/\u003C/span>\u003Cspan class=\"token regex-source language-regex\">#(w+)\u003C/span>\u003Cspan class=\"token regex-delimiter\">/\u003C/span>\u003Cspan class=\"token regex-flags\">g\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> children\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>hast\u003Cspan class=\"token punctuation\">.\u003C/span>Element \u003Cspan class=\"token operator\">|\u003C/span> hast\u003Cspan class=\"token punctuation\">.\u003C/span>Text\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">let\u003C/span> lastIndex \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token number\">0\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">let\u003C/span> match\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">while\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>match \u003Cspan class=\"token operator\">=\u003C/span> regex\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">exec\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>text\u003Cspan class=\"token punctuation\">.\u003C/span>value\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> before \u003Cspan class=\"token operator\">=\u003C/span> text\u003Cspan class=\"token punctuation\">.\u003C/span>value\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">slice\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>lastIndex\u003Cspan class=\"token punctuation\">,\u003C/span> match\u003Cspan class=\"token punctuation\">.\u003C/span>index\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>before\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\t\tchildren\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">push\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> type\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'text'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> before \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\t\t\t\tchildren\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">push\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\t\ttype\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'element'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\t\ttagName\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'span'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\t\tproperties\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> type\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'hashtag'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> match\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token number\">1\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span> \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\t\tchildren\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> type\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'text'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> match\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token number\">0\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span> \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\n\t\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\tlastIndex \u003Cspan class=\"token operator\">=\u003C/span> regex\u003Cspan class=\"token punctuation\">.\u003C/span>lastIndex\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>lastIndex \u003Cspan class=\"token operator\"><\u003C/span> text\u003Cspan class=\"token punctuation\">.\u003C/span>value\u003Cspan class=\"token punctuation\">.\u003C/span>length\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\tchildren\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">push\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> type\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'text'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> text\u003Cspan class=\"token punctuation\">.\u003C/span>value\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">slice\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>lastIndex\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\n\t\t\t\u003Cspan class=\"token comment\">// Replace the text node with all the children\u003C/span>\n\t\t\tparent\u003Cspan class=\"token operator\">!\u003C/span>\u003Cspan class=\"token punctuation\">.\u003C/span>children\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">splice\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>index\u003Cspan class=\"token operator\">!\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token number\">1\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token operator\">...\u003C/span>children\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\t\u003Cspan class=\"token comment\">// Skip the children\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">return\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token constant\">SKIP\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> index\u003Cspan class=\"token operator\">!\u003C/span> \u003Cspan class=\"token operator\">+\u003C/span> children\u003Cspan class=\"token punctuation\">.\u003C/span>length\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\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> \u003Cp data-svelte-h=\"svelte-tc8iwr\">If you want a more in-depth guide on writing Unified plugins, you can check out the official \u003Ca href=\"https://unifiedjs.com/learn/guide/create-a-plugin/\" rel=\"nofollow\">documentation\u003C/a>.\u003C/p> \u003Cp data-svelte-h=\"svelte-1a8clay\">Notice that hashtags are now replaced with the following:\u003C/p> \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>span\u003C/span> \u003Cspan class=\"token attr-name\">type\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>hashtag\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span> \u003Cspan class=\"token attr-name\">value\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>pizza\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span> #pizza \u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"></\u003C/span>span\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch3 id=\"configuring-the-transformer\" data-svelte-h=\"svelte-fedxl7\">\u003Ca href=\"#configuring-the-transformer\">Configuring the transformer\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-6g4x7v\">Unified plugins need to be wrapped inside a \u003Ccode>UnifiedTransformer\u003C/code> type, to be able to be used in Carta.\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token keyword\">type\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> UnifiedTransformer \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'carta-md'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\u003Cspan class=\"token keyword\">const\u003C/span> hashtagTransformer\u003Cspan class=\"token operator\">:\u003C/span> UnifiedTransformer\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token string\">'sync'\u003C/span>\u003Cspan class=\"token operator\">>\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\texecution\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'sync'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token comment\">// Sync, since the plugin is synchronous\u003C/span>\n\ttype\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'rehype'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token comment\">// Rehype, since it operates on HTML\u003C/span>\n\t\u003Cspan class=\"token function\">transform\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> processor \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\tprocessor\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">use\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>unifiedPlugin\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\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> \u003Ch3 id=\"mounting-the-components\" data-svelte-h=\"svelte-1xm0rp4\">\u003Ca href=\"#mounting-the-components\">Mounting the components\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-1btti53\">We now want to replace the generated hashtag placeholders with the following element:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-svelte\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-svelte\">\u003Cspan class=\"token comment\"><!-- Hashtag.svelte -->\u003C/span>\n\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>script\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003Cspan class=\"token script\">\u003Cspan class=\"token language-javascript\">\n\t\u003Cspan class=\"token keyword\">export\u003C/span> \u003Cspan class=\"token keyword\">let\u003C/span> value\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003C/span>\u003C/span>\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"></\u003C/span>script\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>button\u003C/span>\n\t\u003Cspan class=\"token attr-name\">\u003Cspan class=\"token namespace\">on:\u003C/span>click=\u003C/span>\u003Cspan class=\"token language-javascript\">\u003Cspan class=\"token punctuation\">{\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\tconsole\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">log\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token string\">'Hashtag clicked!'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t#\u003Cspan class=\"token language-javascript\">\u003Cspan class=\"token punctuation\">{\u003C/span>value\u003Cspan class=\"token punctuation\">}\u003C/span>\u003C/span>\n\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>\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-1ab5sxp\">To do that, we create a listener that:\u003C/p> \u003Col data-svelte-h=\"svelte-1ks6dt4\">\u003Cli>Finds all the previous placeholders;\u003C/li> \u003Cli>Mounts the component next to them;\u003C/li> \u003Cli>Removes the placeholders.\u003C/li>\u003C/ol> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token keyword\">type\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Listener \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'carta-md'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token keyword\">import\u003C/span> Hashtag \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'./Hashtag.svelte'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\u003Cspan class=\"token keyword\">const\u003C/span> convertHashtags\u003Cspan class=\"token operator\">:\u003C/span> Listener\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token string\">'carta-render'\u003C/span>\u003Cspan class=\"token operator\">>\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\n\t\u003Cspan class=\"token string\">'carta-render'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token keyword\">function\u003C/span> \u003Cspan class=\"token function\">onRender\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> detail\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> carta \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">const\u003C/span> rendererContainer \u003Cspan class=\"token operator\">=\u003C/span> carta\u003Cspan class=\"token punctuation\">.\u003C/span>renderer\u003Cspan class=\"token operator\">?.\u003C/span>container\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token operator\">!\u003C/span>rendererContainer\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token keyword\">return\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\u003Cspan class=\"token comment\">// Find all hashtag spans and replace them with Svelte components\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">const\u003C/span> hashtagSpans \u003Cspan class=\"token operator\">=\u003C/span> rendererContainer\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">querySelectorAll\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token string\">'span[type=\"hashtag\"]'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">for\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token keyword\">const\u003C/span> span \u003Cspan class=\"token keyword\">of\u003C/span> hashtagSpans\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> hashtag \u003Cspan class=\"token operator\">=\u003C/span> span\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">getAttribute\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token string\">'value'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">??\u003C/span> \u003Cspan class=\"token string\">''\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\t\u003Cspan class=\"token keyword\">new\u003C/span> \u003Cspan class=\"token class-name\">Hashtag\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\ttarget\u003Cspan class=\"token operator\">:\u003C/span> span\u003Cspan class=\"token punctuation\">.\u003C/span>parentElement\u003Cspan class=\"token operator\">!\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\tanchor\u003Cspan class=\"token operator\">:\u003C/span> span\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\tprops\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> hashtag \u003Cspan class=\"token punctuation\">}\u003C/span>\n\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\tspan\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">remove\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token punctuation\">}\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> \u003Ch3 id=\"using-the-plugin\" data-svelte-h=\"svelte-bnlm90\">\u003Ca href=\"#using-the-plugin\">Using the plugin\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-sji02v\">Let’s now create a Plugin with the transformer and the listener:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token keyword\">type\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Plugin \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'carta-md'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\u003Cspan class=\"token keyword\">export\u003C/span> \u003Cspan class=\"token keyword\">const\u003C/span> hashtag \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> Plugin \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\ttransformers\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>hashtagTransformer\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\tlisteners\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>convertHashtags\u003Cspan class=\"token punctuation\">]\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-9krp4j\">We can now use the plugin with the following:\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Carta \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'carta-md'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\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\textensions\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token function\">hashtag\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">]\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> \u003Cp data-svelte-h=\"svelte-1fa80qn\">You can find the example source code \u003Ca href=\"https://github.com/BearToCode/svelte-in-carta-example\" rel=\"nofollow\">here\u003C/a>.\u003C/p>",css:{code:"",map:null},head:""},metadata:{title:"Using Svelte Components",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>
|