A lightweight, fast and extensible Svelte Markdown editor and viewer.
Find a file
2024-04-12 08:29:41 +02:00
.github/workflows ci: remove signatures audit step 2024-03-19 14:50:47 +01:00
.husky emoji extension 2023-05-06 16:50:52 +02:00
.vscode docs: update docs, add migration guide 2024-04-12 08:24:46 +02:00
docs docs: minor fixes 2024-04-12 08:24:47 +02:00
images update demo and readme 2023-07-19 19:15:39 +02:00
packages chore: migrate plugin-attachment 2024-04-12 08:29:41 +02:00
scripts chore: add plugin-achor to list of packages 2024-01-16 19:24:48 +01:00
.eslintignore docs: add introduction and examples 2023-11-15 22:32:07 +01:00
.eslintrc.json build: replace eslint-plugin-svelte3 with eslint-plugin-svelte 2023-11-07 12:05:05 +01:00
.gitignore setup slash plugin enviroment 2023-05-04 22:24:05 +02:00
.npmrc add code blocks syntax highlighting 2023-05-07 22:05:12 +02:00
.prettierignore improved syntax highlighting 2023-07-14 08:49:16 +02:00
.prettierrc docs: add introduction and examples 2023-11-15 22:32:07 +01:00
LICENSE Create LICENSE 2023-05-10 12:00:25 +02:00
package.json build: update dev dependencies 2024-03-18 19:41:22 +01:00
pnpm-lock.yaml docs: update docs, add migration guide 2024-04-12 08:24:46 +02:00
pnpm-workspace.yaml docs: replace demo with docs 2023-11-19 15:44:30 +01:00
README.md docs: minor fixes 2024-04-12 08:24:47 +02:00
tsconfig.json refactor: remove verbose prefixes 2024-04-12 08:24:37 +02:00

Carta.png

Carta

Modern, lightweight, powerful Markdown Editor.


Introduction

Note

Carta has recently been updated to v4, which features numerous major changes.

Follow the Migration Guide to update your project.

Carta is a lightweight, fast and extensible Svelte Markdown editor and viewer. It is powered by unified, remark and rehype. Check out the examples to see it in action. Differently from most editors, Carta does not include a code editor, but it is just a textarea with syntax highlighting, shortcuts and more.

Features

  • 🌈 Markdown syntax highlighting (Shiki);
  • 🛠️ Toolbar (extensible);
  • ⌨️ Keyboard shortcuts (extensible);
  • 📦 Supports 150+ plugins thanks to remark;
  • 🔀 Scroll sync;
  • Accessibility friendly;
  • 🖥️ SSR compatible;
  • ⚗️ KaTeX support (plugin);
  • 🔨 Slash commands (plugin);
  • 😄 Emojis, with included search (plugin);
  • ✏️ TikZ support (plugin);
  • 📂 Attachment support (plugin);
  • Anchor links in headings (plugin);
  • 🌈 Code blocks syntax highlighting (plugin).

Packages

Package Status Docs
carta-md carta-md /
plugin-math plugin-math /plugins/math
plugin-code plugin-code /plugins/code
plugin-emoji plugin-emoji /plugins/emoji
plugin-slash plugin-slash /plugins/slash
plugin-tikz plugin-tikz /plugins/tikz
plugin-attachment plugin-attachment /plugins/attachment
plugin-anchor plugin-anchor /plugins/anchor

Community plugins

Plugin Description
carta-plugin-video Render online videos
carta-plugin-imsize Render images in specific sizes
carta-plugin-subscript Render subscripts and superscripts
carta-plugin-ins-del <ins> and <del> tags support

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. Checkout the documentation for an example.

Installation

Core package:

npm i carta-md

Plugins:

npm i @cartamd/plugin-name

Basic configuration

<script lang="ts">
	import { Carta, MarkdownEditor } from 'carta-md';
	// Component default theme
	import 'carta-md/default.css';

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

<MarkdownEditor {carta} />

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

Documentation

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

Contributing & Development

Every contribution is well accepted. If you have a feature request you can open a new issue.

This package uses a pnpm workspace, so pnpm is required to download and put everything together properly.

Committing

This repository is commitizen friendly. To commit use:

npm run commit
# or, if you have commitizen installed globally
git cz

Running docs

If you want to preview the docs:

cd docs
npm run dev