npm bundle license docs
banner

Carta
Swiftly edit and render Markdown, with no overhead.

Documentation · GitHub

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;
  • 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;
  • Code blocks syntax highlighting (plugin).

Packages

Package Status Docs
carta-md /
plugin-math /plugins/math
plugin-code /plugins/code
plugin-emoji /plugins/emoji
plugin-slash /plugins/slash
plugin-tikz /plugins/tikz
plugin-attachment /plugins/attachment
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.

Installation

Core package:

npm i carta-md

Plugins:

npm i @cartamd/plugin-name

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.

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

Top categories

Loading Svelte Themes