Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

carta-md

Package Overview
Dependencies
Maintainers
1
Versions
96
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

carta-md

A lightweight, fully customizable, Markdown editor

  • 2.7.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.3K
increased by27.21%
Maintainers
1
Weekly downloads
 
Created
Source
logo

npm bundle license demo

Carta is a lightweight, fast and extensible Svelte Markdown editor and viewer, based on Marked. Check out the demo 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).
  • 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.

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-theme.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>

Editor component exported properties:

NameTypeDescription
cartaCartaCarta Editor
themestringFor custom css themes, see below for more
valuestringMarkdown input
placeholderstringPlaceholder text for textarea
mode'tabs' | 'split' | 'auto'Tabs settings
disableToolbarbooleanOption to disable the toolbar

Plugins

Each plugin's readme includes a guide on its use.

NameDescription
plugin-mathKatex support
plugin-slashSlash commands support
plugin-emojiEmojis support, including inline search
plugin-codeCode blocks syntax highlighting
plugin-tikzTikZ support using TikZJax

Themes customization

By using the theme property in CartaEditor and CartaPreview you can change their classes to carta-editor__{theme} and carta-viewer__{theme}.

Check out the default theme to customize it.

If you are using a plugin, look at its readme for its customization.

Markdown highlighting is done using Speed Highlight JS, here you can find more themes.

You can find complete Markdown stylesheet online. For example github-markdown-css(used in the demo), or tailwind-typography.

Extensibility

Options

Carta options:

NameTypeDescription
extensionsCartaExtension[]Editor/viewer extensions
rendererDebouncenumberRenderer debouncing timeout, in ms (def. 300ms)
disableShortcutsDefaultShortcutId[] | trueRemove default shortcuts by ids
disableIconsDefaultIconId[] | trueRemove default icons by ids
disablePrefixesDefaultPrefixId[] | trueRemove default prefixes by ids
historyOptionsPartial<CartaHistoryOptions>History (Undo/Redo) options
sanitizer(html: string) => stringHTML sanitizer
manglefalseAllows disabling of marked-mangle
gfmHeadingIdGfmHeadingIdOptions | falsemarked-gfm-heading-id options, or disabling

You can easily extend Carta by creating custom plugins. Here are all the CartaExtension properties:

NameTypeDescription
markedExtensionsmarked.MarkedExtension[]Marked extensions, more on that here
shortcutsKeyboardShortcut[]Additional keyboard shortcuts
iconsCartaIcon[]Additional icons
prefixesPrefix[]Additional prefixes
listenersCartaListener[]Textarea event listeners
componentsCartaExtensionComponentsAdditional components, that will be put after the editor. All components are given a carta: Carta. prop The editor has a relative position, so you can position elements absolutely
highlightRulesHighlightRule[]Custom markdown highlight rules. See Speed-Highlight Wiki.
onLoad(data: { carta:Carta, ... }) => voidUse this callback to execute code when one Carta instance loads the extension.

If you created a plugin and want to share it, you can open an issue and we will consider sponsoring it on this guide.

Contributions

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.

Keywords

FAQs

Package last updated on 26 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc