Carta

简介

Carta 是一款 轻量级、快速 且 可扩展 的 Svelte Markdown 编辑器和查看器。它由 unified、remark 和 rehype 提供支持。查看 示例 以了解它的实际应用。 与大多数编辑器不同，Carta 没有包含代码编辑器，而只是一个带有语法高亮、快捷键等功能的文本区域。

功能

• 🌈 Markdown 语法高亮 (Shiki);
• 🛠️ 工具栏（可扩展）；
• ⌨️ 键盘 快捷键（可扩展）；
• 📦 支持 150+ 插件，得益于 remark；
• 🔀 滚动同步；
• ✅ 无障碍友好；
• 🖥️ SSR 兼容；
• ⚗️ KaTeX 支持（插件）；
• 🔨 斜杠 命令（插件）；
• 😄 表情，带搜索功能（插件）；
• ✏️ TikZ 支持（插件）；
• 📂 附件 支持（插件）；
• ⚓ 锚点 链接在标题中（插件）；
• 🌈 代码块 语法高亮（插件）；
• ⚙️ 嵌入 组件（插件）。

包

包名	状态	文档
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
plugin-component		/plugins/component

社区插件

插件	描述
carta-plugin-video	渲染在线视频
carta-plugin-imsize	按特定大小渲染图片
carta-plugin-subscript	渲染下标和上标
carta-plugin-ins-del	<ins> 和 <del> 标签支持

快速入门

安装

核心包：

npm i carta-md

插件：

npm i @cartamd/plugin-name

基本配置

<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
	});

	let value = $state('');
</script>

<MarkdownEditor bind:value {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.1rem;
		line-height: 1.1rem;
		letter-spacing: normal;
	}
</style>

标志

您可以通过以下 Vite 配置来减小服务器端的包体积。这将从包中移除 Shiki。如果您尝试在服务器上使用 plugin-code，可能会出现问题，因为高亮器已不再存在于那里。

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

文档

如需获取完整文档、示例、指南等，请访问官方网站。

• 简介
• 示例
• 入门指南
• 编辑样式
• 插件：
  • 数学
  • 代码
  • 表情
  • 斜杠
  • TikZ
  • 附件
  • 锚点
  • 组件
• API：
  • 工具类
  • 核心
  • 扩展

贡献与发展

我们热烈欢迎每一个贡献。如果您有功能请求，可以提出一个新问题。

此包使用pnpm 工作区，因此需要使用 pnpm 来正确下载并整合所有内容。

提交

此仓库支持commitizen。提交时请使用：

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

运行文档

若您希望预览文档：

cd docs
npm run dev

当然，我会根据您的要求进行翻译。不过，我需要您提供要翻译的英文文本，这样我才能将其翻译成中文。请提供文本内容。