Overview

Getting Started

Installation

Installing the core package:

npm i carta-md

Installing plugins:

npm i @cartamd/plugin-name

Setup

Setup a basic editor:

<script>
	import { Carta, MarkdownEditor } from 'carta-md';
	import 'carta-md/default.css'; /* Default theme */

	const carta = new Carta({
		// Remember to use a sanitizer to prevent XSS attacks!
		// More on that below
		// sanitizer: ...
	});

	let value = '';
</script>

<MarkdownEditor {carta} bind:value />

<style>
	/* Set your custom monospace font */
	:global(.carta-font-code) {
		font-family: '...', monospace;
		font-size: 1.1rem;
	}
</style>

Or, if you just want to render content:

<script>
	import { Carta, Markdown } from 'carta-md';

	const carta = new Carta({
		/* ... */
	});

	let value = '...';
</script>

<Markdown {carta} {value} />

Sanitization

By default Carta does not sanitize user input, which can include malicious code that could lead to XSS attacks. For this reason it is strongly recommended to install a package that handles that for you.

Since Carta operates both on the server and the client, you’d need a sanitizer able to work in both environments, for example isomorphic-dompurify or sanitize-html. Here is an example using the former, which requires minimum configuration.

<script>
	// Your other stuff...
	import DOMPurify from 'isomorphic-dompurify';

	const carta = new Carta({
		sanitizer: DOMPurify.sanitize
	});

	let value = '';
</script>

<MarkdownEditor {carta} bind:value />
Handmade by Davide