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.
- 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).
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.
Core package:
npm i carta-md
Plugins:
npm i @cartamd/plugin-name
<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>
For the full documentation, examples, guides and more checkout the website.
- Introduction
- Examples
- Getting Started
- Editing Styles
- Plugins:
- API:
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.
This repository is commitizen friendly. To commit use:
npm run commit
# or, if you have commitizen installed globally
git cz