Carta

Introduction

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);
- ⚙️ Embed Components (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 |
| plugin-component | !plugin-component | /plugins/component |

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 | and 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

`svelte



`

Flags

You can reduce the server-side bundle by using the following vite config. This will remove shiki from the bundle. It may cause issues if you try to use plugin-code on the server, as the highlighter is no longer present there.

`ts
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

/* @type {import('vite').UserConfig} /
const config = {
plugins: [sveltekit()],
define: {
__ENABLE_CARTA_SSR_HIGHLIGHTER__: false
}
};
export default config;
`

Documentation

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

- Introduction
- Examples
- Getting Started
- Editing Styles
- Plugins:
- Math
- Code
- Emoji
- Slash
- TikZ
- Attachment
- Anchor
- Component
- API:
- Utilities
- Core
- Extension

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.

$3

This repository is commitizen friendly. To commit use:

`
npm run commit


or, if you have commitizen installed globally

`
cd docs
npm run dev
``