carta

Carta

Moderner, leichter, leistungsstarker Markdown -Editor.

Dokumentation · GitHub

Einführung

Notiz

Carta wurde kürzlich auf v4 aktualisiert, was zahlreiche Hauptveränderungen enthält.

Folgen Sie dem Migrationshandbuch, um Ihr Projekt zu aktualisieren.

Carta ist ein leichtgewichtiger , schneller und erweiterbarer Sufle -Markdown -Editor und Zuschauer. Es wird von Unified, Bemerkung und Rehypen angetrieben. Schauen Sie sich die Beispiele an, um sie in Aktion zu sehen. Anders als bei den meisten Herausgebern enthält Carta keinen Code -Editor, aber es ist nur ein Textbereich mit Syntax -Hervorhebung, Verknüpfungen und vielem mehr.

Merkmale

• ? Markdown -Syntax -Hervorhebung (Shiki);
• Symbolleiste (erweiterbar);
• ⌨️ Tastaturverknüpfungen (erweiterbar);
• ? Unterstützt dank der Bemerkung 150 Plugins ;
• ? Scrollsynchronisation;
• ✅ Barrierefreiheit freundlich;
• SSR kompatibel;
• ⚗️ Katex Support (Plugin);
• ? Slash -Befehle (Plugin);
• ? Emojis mit inklusiven Suche (Plugin);
• ✏️ Tikz Support (Plugin);
• Anhangsunterstützung (Plugin);
• ⚓ Ankerlinks in Überschriften (Plugin);
• ? Codeblöcke Syntax Hervorhebung (Plugin).
• Einbettkomponenten (Plugin);

Pakete

Paket	Status	Dokumente
Carta-md		/
Plugin-Math		/Plugins/Math
Plugin-Code		/Plugins/Code
Plugin-Emoji		/Plugins/Emoji
Plugin-Slash		/Plugins/Schrägstrich
Plugin-Tikz		/Plugins/Tikz
Plugin-Eintätigkeit		/Plugins/Anhang
Plugin-Anchor		/Plugins/Anker
Plugin-Komponent		/Plugins/Komponente

Community -Plugins

Plugin	Beschreibung
Carta-Plugin-Video	Online -Videos rendern
Karta-Plugin-Imsize	Bilder in bestimmten Größen rendern
Carta-Plugin-Subscript	Rendern einschreibende und superscripts rendern
Carta-Plugin-Ins-Del	<ins> und <del> Tags unterstützen

Erste Schritte

Warnung

Die Bereinigung wird nicht von Carta behandelt. Sie müssen einen sanitizer in den Optionen bereitstellen. Gemeinsame Desinfektionsmittel sind isomorphe Dompurify (vorgeschlagen) und saniert-html. Schauen Sie sich die Dokumentation für ein Beispiel an.

Installation

Kernpaket:

 npm i carta-md

Plugins:

 npm i @cartamd/plugin-name

Grundkonfiguration

< 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 monospace font (Required to have the editor working correctly!) */
	:global( .carta-font-code ) {
		font-family : ' ... ' , monospace ;
		font-size : 1.1 rem ;
	}
</ style >

Flaggen

Sie können das serverseitige Bundle reduzieren, indem Sie die folgende VITE-Konfiguration verwenden. Dadurch wird Shiki aus dem Bundle entfernt. Dies kann zu Problemen führen, wenn Sie versuchen, plugin-code auf dem Server zu verwenden, da der Textmarker dort nicht mehr vorhanden ist.

 // 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 ;

Dokumentation

Für die vollständige Dokumentation, Beispiele, Führer und mehr Überprüfung der Website.

• Einführung
• Beispiele
• Erste Schritte
• Bearbeitungsstile
• Plugins:
  • Mathe
  • Code
  • Emoji
  • Schrägstrich
  • Tikz
  • Anhang
  • Anker
  • Komponente
• API:
  • Versorgungsunternehmen
  • Kern
  • Verlängerung

Beitragen und Entwicklung

Jeder Beitrag ist gut akzeptiert. Wenn Sie eine Funktionsanforderung haben, können Sie ein neues Problem eröffnen.

Dieses Paket verwendet einen PNPM -Arbeitsbereich, sodass PNPM alles herunterladen und richtig zusammenstellen muss.

Begehen

Dieses Repository ist engagiert freundlich. Gebrauch zu begehen:

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

Leitende Dokumente

Wenn Sie die Dokumente vorschauen möchten:

 cd docs
npm run dev