carta/packages/carta-md
Davide 1b75fe794e
feat: add custom labels support (#23)
* feat: add custom labels
* build: pin prettier to v3.1.0
2023-12-16 23:23:38 +01:00
..
src feat: add custom labels support (#23) 2023-12-16 23:23:38 +01:00
static convert to monorepo 2023-05-04 22:22:46 +02:00
.gitignore improved syntax highlighting 2023-07-14 08:49:16 +02:00
.prettierignore convert to monorepo 2023-05-04 22:22:46 +02:00
eslintignore convert to monorepo 2023-05-04 22:22:46 +02:00
package.json refactor: use consistent file name for default styles 2023-11-11 11:19:52 +01:00
README.md docs: update old links in readme 2023-11-29 22:30:45 +01:00
svelte.config.js remove custom shj build 2023-08-01 19:18:45 +02:00
tsconfig.json remove custom shj build 2023-08-01 19:18:45 +02:00
vite.config.js convert to monorepo 2023-05-04 22:22:46 +02:00


Carta
Swiftly edit and render Markdown, with no overhead.


Introduction

Carta is a lightweight, fast and extensible Svelte Markdown editor and viewer, based on Marked. Check out the examples to see it in action. Differently from most editors, Carta includes neither ProseMirror nor CodeMirror, allowing for an extremely small bundle size and fast loading time.

Features

  • Keyboard shortcuts (extensible);
  • Toolbar (extensible);
  • Markdown syntax highlighting;
  • Scroll sync;
  • SSR compatible;
  • Katex support (plugin);
  • Slash commands (plugin);
  • Emojis, with included search (plugin);
  • Tikz support(plugin);
  • Attachment support(plugin);
  • Code blocks syntax highlighting (plugin).

Getting started

Warning

Sanitization is not dealt with by Carta. You need to provide a sanitizer in the options. Common sanitizers are isomorphic-dompurify (suggested) and sanitize-html.

Basic configuration

<script lang="ts">
	import { Carta, CartaEditor } from 'carta-md';
	// Component default theme
	import 'carta-md/default.css';
	// Markdown input theme (Speed Highlight)
	import 'carta-md/light.css';

	const carta = new Carta({
		// Remember to use a sanitizer to prevent XSS attacks
		// sanitizer: mySanitizer
	});
</script>

<CartaEditor {carta} />

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

Documentation

For the full documentation, examples, guides and more checkout the website.