48 lines
16 KiB
JavaScript
48 lines
16 KiB
JavaScript
import{s as fa,e as c,a as i,c as u,l as m,g as r,p as h,i as p,f as t,H as X,b as Z,m as aa,n as sa}from"./scheduler.DKiYiPX0.js";import{S as ga,i as va,c as F,a as G,m as J,t as K,b as N,d as Q}from"./index.z4bt_ZBS.js";import{C as V}from"./Code.tlNrnEug.js";function _a(d){let s,o,k=`<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>`;return{c(){s=c("pre"),o=new X(!1),this.h()},l(e){s=u(e,"PRE",{class:!0});var l=Z(s);o=aa(l,!1),l.forEach(t),this.h()},h(){o.a=null,h(s,"class","language-html")},m(e,l){p(e,s,l),o.m(k,s)},p:sa,d(e){e&&t(s)}}}function $a(d){let s,o,k=`<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>`;return{c(){s=c("pre"),o=new X(!1),this.h()},l(e){s=u(e,"PRE",{class:!0});var l=Z(s);o=aa(l,!1),l.forEach(t),this.h()},h(){o.a=null,h(s,"class","language-css")},m(e,l){p(e,s,l),o.m(k,s)},p:sa,d(e){e&&t(s)}}}function wa(d){let s,o,k=`<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>`;return{c(){s=c("pre"),o=new X(!1),this.h()},l(e){s=u(e,"PRE",{class:!0});var l=Z(s);o=aa(l,!1),l.forEach(t),this.h()},h(){o.a=null,h(s,"class","language-ts")},m(e,l){p(e,s,l),o.m(k,s)},p:sa,d(e){e&&t(s)}}}function ya(d){let s,o,k=`<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>`;return{c(){s=c("pre"),o=new X(!1),this.h()},l(e){s=u(e,"PRE",{class:!0});var l=Z(s);o=aa(l,!1),l.forEach(t),this.h()},h(){o.a=null,h(s,"class","language-ts")},m(e,l){p(e,s,l),o.m(k,s)},p:sa,d(e){e&&t(s)}}}function Ha(d){let s,o='<a href="#customizing-editor-styles">Customizing editor styles</a>',k,e,l="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.",q,f,E,g,na='<a href="#using-multiple-themes">Using multiple themes</a>',P,C,ta="By using the <code>theme</code> property in <code><MarkdownEditor></code> you can differentiate the themes of multiple editors.",S,v,ea='<a href="#dark-mode">Dark mode</a>',O,x,pa="When using dark mode, there are two different themes that have to be changed: the editor theme and the one used for syntax highlighting:",R,_,z,$,oa='<a href="#changing-markdown-input-color-theme">Changing Markdown input color theme</a>',I,M,la='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.',j,T,ca="You can change theme in the options:",W,w,B,b,ua='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:',D,y,U,H,ia='<a href="#markdown-stylesheets">Markdown stylesheets</a>',Y,L,ra='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>.',A;return f=new V({props:{$$slots:{default:[_a]},$$scope:{ctx:d}}}),_=new V({props:{$$slots:{default:[$a]},$$scope:{ctx:d}}}),w=new V({props:{$$slots:{default:[wa]},$$scope:{ctx:d}}}),y=new V({props:{$$slots:{default:[ya]},$$scope:{ctx:d}}}),{c(){s=c("h2"),s.innerHTML=o,k=i(),e=c("p"),e.textContent=l,q=i(),F(f.$$.fragment),E=i(),g=c("h3"),g.innerHTML=na,P=i(),C=c("p"),C.innerHTML=ta,S=i(),v=c("h2"),v.innerHTML=ea,O=i(),x=c("p"),x.textContent=pa,R=i(),F(_.$$.fragment),z=i(),$=c("h2"),$.innerHTML=oa,I=i(),M=c("p"),M.innerHTML=la,j=i(),T=c("p"),T.textContent=ca,W=i(),F(w.$$.fragment),B=i(),b=c("p"),b.innerHTML=ua,D=i(),F(y.$$.fragment),U=i(),H=c("h2"),H.innerHTML=ia,Y=i(),L=c("p"),L.innerHTML=ra,this.h()},l(a){s=u(a,"H2",{id:!0,"data-svelte-h":!0}),m(s)!=="svelte-1oq9x79"&&(s.innerHTML=o),k=r(a),e=u(a,"P",{"data-svelte-h":!0}),m(e)!=="svelte-1d8k47q"&&(e.textContent=l),q=r(a),G(f.$$.fragment,a),E=r(a),g=u(a,"H3",{id:!0,"data-svelte-h":!0}),m(g)!=="svelte-1w3acjm"&&(g.innerHTML=na),P=r(a),C=u(a,"P",{"data-svelte-h":!0}),m(C)!=="svelte-fatvzl"&&(C.innerHTML=ta),S=r(a),v=u(a,"H2",{id:!0,"data-svelte-h":!0}),m(v)!=="svelte-50vs2h"&&(v.innerHTML=ea),O=r(a),x=u(a,"P",{"data-svelte-h":!0}),m(x)!=="svelte-1p81he7"&&(x.textContent=pa),R=r(a),G(_.$$.fragment,a),z=r(a),$=u(a,"H2",{id:!0,"data-svelte-h":!0}),m($)!=="svelte-fxmyja"&&($.innerHTML=oa),I=r(a),M=u(a,"P",{"data-svelte-h":!0}),m(M)!=="svelte-1eehkcf"&&(M.innerHTML=la),j=r(a),T=u(a,"P",{"data-svelte-h":!0}),m(T)!=="svelte-ex141y"&&(T.textContent=ca),W=r(a),G(w.$$.fragment,a),B=r(a),b=u(a,"P",{"data-svelte-h":!0}),m(b)!=="svelte-1ebbpib"&&(b.innerHTML=ua),D=r(a),G(y.$$.fragment,a),U=r(a),H=u(a,"H2",{id:!0,"data-svelte-h":!0}),m(H)!=="svelte-16btwno"&&(H.innerHTML=ia),Y=r(a),L=u(a,"P",{"data-svelte-h":!0}),m(L)!=="svelte-18c97fa"&&(L.innerHTML=ra),this.h()},h(){h(s,"id","customizing-editor-styles"),h(g,"id","using-multiple-themes"),h(v,"id","dark-mode"),h($,"id","changing-markdown-input-color-theme"),h(H,"id","markdown-stylesheets")},m(a,n){p(a,s,n),p(a,k,n),p(a,e,n),p(a,q,n),J(f,a,n),p(a,E,n),p(a,g,n),p(a,P,n),p(a,C,n),p(a,S,n),p(a,v,n),p(a,O,n),p(a,x,n),p(a,R,n),J(_,a,n),p(a,z,n),p(a,$,n),p(a,I,n),p(a,M,n),p(a,j,n),p(a,T,n),p(a,W,n),J(w,a,n),p(a,B,n),p(a,b,n),p(a,D,n),J(y,a,n),p(a,U,n),p(a,H,n),p(a,Y,n),p(a,L,n),A=!0},p(a,[n]){const ka={};n&1&&(ka.$$scope={dirty:n,ctx:a}),f.$set(ka);const ma={};n&1&&(ma.$$scope={dirty:n,ctx:a}),_.$set(ma);const da={};n&1&&(da.$$scope={dirty:n,ctx:a}),w.$set(da);const ha={};n&1&&(ha.$$scope={dirty:n,ctx:a}),y.$set(ha)},i(a){A||(K(f.$$.fragment,a),K(_.$$.fragment,a),K(w.$$.fragment,a),K(y.$$.fragment,a),A=!0)},o(a){N(f.$$.fragment,a),N(_.$$.fragment,a),N(w.$$.fragment,a),N(y.$$.fragment,a),A=!1},d(a){a&&(t(s),t(k),t(e),t(q),t(E),t(g),t(P),t(C),t(S),t(v),t(O),t(x),t(R),t(z),t($),t(I),t(M),t(j),t(T),t(W),t(B),t(b),t(D),t(U),t(H),t(Y),t(L)),Q(f,a),Q(_,a),Q(w,a),Q(y,a)}}}const Ta={title:"Editing Styles",section:"Overview"};class ba extends ga{constructor(s){super(),va(this,s,null,Ha,fa,{})}}export{ba as default,Ta as metadata};
|