carta

Carta

Editor de Markdown moderno, leve e poderoso.

Documentação · Github

Introdução

Observação

A Carta foi recentemente atualizada para a v4 , que apresenta inúmeras grandes mudanças.

Siga o Guia de Migração para atualizar seu projeto.

A Carta é um editor e visualizador de markdown leve , rápido e extensível . É alimentado por unificado, observação e reprodução. Confira os exemplos para vê -lo em ação. Diferentemente da maioria dos editores, a Carta não inclui um editor de código, mas é apenas uma textarea com destaque de sintaxe, atalhos e muito mais.

Características

• ? Sintaxe Markdown Destaques (Shiki);
• Barra de ferramentas (extensível);
• ⌨️ Atalhos de teclado (extensíveis);
• ? Suporta mais de 150 plugins graças à observação;
• ? Rolar sincronizar;
• ✅ Acessibilidade amigável;
• SSR compatível;
• ⚗️ Suporte Katex (plug -in);
• ? Comandos Slash (plugin);
• ? Emojis , com pesquisa incluída (plugin);
• ✏️ TIKZ Suporte (plugin);
• Suporte de anexo (plugin);
• ⚓ Links de âncora nos títulos (plug -in);
• ? Código Bloco Sintaxe Destacando (plug -in).
• Componentes de incorporação (plug -in);

Pacotes

Pacote	Status	Documentos
Carta-md		/
plugin-math		/plugins/matemática
Código do plug-in		/plugins/código
Plugin-emji		/Plugins/emoji
Slash de plug-in		/Plugins/Slash
plugin-tikz		/plugins/tikz
plugin-attachment		/Plugins/Anexamento
A âncora plugin		/plugins/âncora
componente do plug-in		/plugins/componente

Plugins comunitários

Plugin	Descrição
Carta-Plugin-Video	Renderizar vídeos online
Carta-plugin-simsize	Renderizar imagens em tamanhos específicos
Carta-Plugin-Subscript	Renderizar subscritos e superestriões
Carta-Plugin-Ins-Del	Suporte a tags <ins> e <del>

Começando

Aviso

A higienização não é tratada pela Carta. Você precisa fornecer um sanitizer nas opções. Os desinfetantes comuns são incompurtificados isomórficos (sugeridos) e higienizam-html. Confira a documentação para um exemplo.

Instalação

Pacote principal:

 npm i carta-md

Plugins:

 npm i @cartamd/plugin-name

Configuração básica

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

Bandeiras

Você pode reduzir o pacote do lado do servidor usando a seguinte configuração Vite. Isso removerá Shiki do pacote. Pode causar problemas se você tentar usar plugin-code no servidor, pois o marcador não estiver mais presente lá.

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

Documentação

Para a documentação completa, exemplos, guias e mais, consulte o site.

• Introdução
• Exemplos
• Começando
• Estilos de edição
• Plugins:
  • Matemática
  • Código
  • Emoji
  • Slash
  • Tikz
  • Anexo
  • Âncora
  • Componente
• API:
  • Utilitários
  • Essencial
  • Extensão

Contribuindo e Desenvolvimento

Toda contribuição é bem aceita. Se você tiver uma solicitação de recurso, pode abrir um novo problema.

Este pacote usa um espaço de trabalho do PNPM, portanto, o PNPM é necessário para baixar e montar tudo corretamente.

Comprometendo

Este repositório é amigável. Para cometer uso:

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

Docs em execução

Se você quiser visualizar os documentos:

 cd docs
npm run dev