carta/getting-started/__data.json

{"type":"data","nodes":[null,{"type":"data","data":[{"content":1,"metadata":6},{"html":2,"css":3,"head":4},"\u003Ch2 id=\"installation\" data-svelte-h=\"svelte-18vig38\">\u003Ca href=\"#installation\">Installation\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-1utr4t3\">Installing the core package:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-undefined\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-undefined\">npm i carta-md\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-15kmill\">Installing plugins:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-undefined\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-undefined\">npm i @cartamd/plugin-name\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> \u003Cp data-svelte-h=\"svelte-17a7tcx\">Setup a basic editor:\u003C/p> \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 string\">'carta-md/default.css'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span> \u003Cspan class=\"token comment\">/* Default theme */\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 comment\">// Remember to use a sanitizer to prevent XSS attacks!\u003C/span>\n\t\t\u003Cspan class=\"token comment\">// More on that below\u003C/span>\n\t\t\u003Cspan class=\"token comment\">// sanitizer: ...\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\u003Cspan class=\"token keyword\">let\u003C/span> value \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token string\">''\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 attr-name\">\u003Cspan class=\"token namespace\">bind:\u003C/span>value\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>style\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003Cspan class=\"token style\">\u003Cspan class=\"token language-css\">\n\t\u003Cspan class=\"token comment\">/* Set your custom monospace font */\u003C/span>\n\t\u003Cspan class=\"token selector\">:global(.carta-font-code)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token property\">font-family\u003C/span>\u003Cspan class=\"token punctuation\">:\u003C/span> \u003Cspan class=\"token string\">'...'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> monospace\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token property\">font-size\u003C/span>\u003Cspan class=\"token punctuation\">:\u003C/span> 1.1rem\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\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>style\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-19ezkc3\">Or, if you just want to render content:\u003C/p> \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> Markdown \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\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 comment\">/* ... */\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\u003Cspan class=\"token keyword\">let\u003C/span> value \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token string\">'...'\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>Markdown\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 language-javascript\">\u003Cspan class=\"token punctuation\">{\u003C/span>value\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=\"sanitization\" data-svelte-h=\"svelte-u7hsf9\">\u003Ca href=\"#sanitization\">Sanitization\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-1t1ldau\">By default Carta does \u003Cstrong>not\u003C/strong> sanitize user input, which can include malicious code that could lead to \u003Ca href=\"https://en.wikipedia.org/wiki/Cross-site_scripting\" rel=\"nofollow\">XSS attacks\u003C/a>. For this reason it is \u003Cem>strongly recommended\u003C/em> to install a package that handles that for you.\u003C/p> \u003Cp data-svelte-h=\"svelte-qj9me5\">Since Carta operates both on the server and the client, you’d need a sanitizer able to work in both environments, for example \u003Ca href=\"https://www.npmjs.com/package/isomorphic-dompurify\" rel=\"nofollow\">isomorphic-dompurify\u003C/a> or \u003Ca href=\"https://www.npmjs.com/package/sanitize-html\" rel=\"nofollow\">sanitize-html\u003C/a>. Here is an example using the former, which requires minimum configuration.\u003C/p> \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 comment\">// Your other stuff...\u003C/span>\n\t\u003Cspan class=\"token keyword\">import\u003C/span> DOMPurify \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'isomorphic-dompurify'\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\">sanitizer\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> DOMPurify\u003Cspan class=\"token punctuation\">.\u003C/span>sanitize\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\u003Cspan class=\"token keyword\">let\u003C/span> value \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token string\">''\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 attr-name\">\u003Cspan class=\"token namespace\">bind:\u003C/span>value\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>",{"code":4,"map":5},"",null,{"title":7,"section":8},"Getting Started","Overview"],"uses":{"url":1}}]}