carta/editing-styles/__data.json


			
				
				
					
						
						
						
							
							
							{"type":"data","nodes":[null,{"type":"data","data":[{"content":1,"metadata":6},{"html":2,"css":3,"head":4},"\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\">&lt;\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__&lt;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\">&lt;\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\">&lt;\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\">&lt;!-- ... -->\u003C/span>\n\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\">&lt;/\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\">&lt;\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\">&lt;\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\">&lt;!-- ... -->\u003C/span>\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\">&lt;/\u003C/span>button\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t\t\t\u003Cspan class=\"token comment\">&lt;!-- Other icons -->\u003C/span>\n\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\">&lt;/\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\">&lt;/\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\">&lt;\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\">&lt;\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-&lt;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\">&lt;\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\">&lt;\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\">&lt;!-- ... -->\u003C/span>\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\">&lt;/\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\">&lt;\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\">&lt;/\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\">&lt;\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\">&lt;!-- Rendered Markdown -->\u003C/span>\n\t\t\t\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\">&lt;/\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\">&lt;/\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\">&lt;/\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\">&lt;/\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>&lt;MarkdownEditor&gt;\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\">&#123;\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\">&#125;\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\">&#123;\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\">&#125;\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\">&#123;\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\">&#125;\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\">&#123;\u003C/span>\n\t\u003Cspan class=\"token comment\">// ...\u003C/span>\n\tshikiOptions\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">&#123;\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\">&#125;\u003C/span>\n\u003Cspan class=\"token punctuation\">&#125;\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>",{"code":4,"map":5},"",null,{"title":7,"section":8},"Editing Styles","Overview"],"uses":{"url":1}}]}

						
						
					
				
				
					
						Reference in a new issue
					
					View git blame
					Copy permalink