{"type":"data","nodes":[null,{"type":"data","data":[{"content":1,"metadata":6},{"html":2,"css":3,"head":4},"\u003Cp data-svelte-h=\"svelte-ywab58\">This plugin adds support for code blocks \u003Cstrong>syntax highlighting\u003C/strong>. It uses the same highlighter from the core package(Shiki).\u003C/p> \u003Ch2 id=\"installation\" data-svelte-h=\"svelte-18vig38\">\u003Ca href=\"#installation\">Installation\u003C/a>\u003C/h2> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-undefined\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-undefined\">npm i @cartamd/plugin-code\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=\"setup\" data-svelte-h=\"svelte-1uj9ei1\">\u003Ca href=\"#setup\">Setup\u003C/a>\u003C/h2> \u003Ch3 id=\"styles\" data-svelte-h=\"svelte-1obsuhg\">\u003Ca href=\"#styles\">Styles\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-1pnhsd1\">Import the default styles:\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 string\">'@cartamd/plugin-code/default.css'\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-default-highlighter\" data-svelte-h=\"svelte-1vws7dn\">\u003Ca href=\"#using-the-default-highlighter\">Using the default highlighter\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-g4q49f\">Carta comes with a default highlighter that matches the one used to highlight markdown in the editor and is used by default (Shiki). If you want to use a theme different from the one used to highlight Markdown, you can specify it in the options.\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> carta \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token keyword\">new\u003C/span> \u003Cspan class=\"token class-name\">Carta\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token comment\">// ...\u003C/span>\n\textensions\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\n\t\t\u003Cspan class=\"token function\">code\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\ttheme\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'ayu-light'\u003C/span>\n\t\t\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>\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-a-custom-highlighter\" data-svelte-h=\"svelte-ybuzo7\">\u003Ca href=\"#using-a-custom-highlighter\">Using a custom highlighter\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-1b5n00u\">It is no longer possible to specify a custom highlighter in this plugin. However, there are many different \u003Ca href=\"https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins\" rel=\"nofollow\">Remark plugins\u003C/a> that provide syntax highlighting.\u003C/p> \u003Ch3 id=\"extension\" data-svelte-h=\"svelte-1h1d05d\">\u003Ca href=\"#extension\">Extension\u003C/a>\u003C/h3> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-svelte\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-svelte\">\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\">import\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Carta\u003Cspan class=\"token punctuation\">,\u003C/span> MarkdownEditor \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\t\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> code \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'@cartamd/plugin-code'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\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\t\u003Cspan class=\"token literal-property property\">extensions\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token function\">code\u003C/span>\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>\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>MarkdownEditor\u003C/span> \u003Cspan class=\"token language-javascript\">\u003Cspan class=\"token punctuation\">{\u003C/span>carta\u003Cspan class=\"token punctuation\">}\u003C/span>\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> \u003Ch2 id=\"options\" data-svelte-h=\"svelte-qvxcr2\">\u003Ca href=\"#options\">Options\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-ix7929\">The options you can pass to \u003Ccode>code()\u003C/code> extend the ones provided by \u003Ca href=\"https://shiki.matsu.io/guide/transformers\" rel=\"nofollow\">Shiki\u003C/a>.\u003C/p>",{"code":4,"map":5},"",null,{"section":7,"title":8},"Plugins","Code"],"uses":{"url":1}}]}