推荐一款现代轻量级强大的Markdown编辑器：Carta-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00401/article/details/142807676

推荐一款现代轻量级强大的Markdown编辑器：Carta

carta A lightweight, fast and extensible Svelte Markdown editor and viewer. 项目地址: https://gitcode.com/gh_mirrors/ca/carta

项目介绍

Carta是一款基于Svelte框架开发的现代、轻量级且功能强大的Markdown编辑器和查看器。最近，Carta已经更新到v4版本，带来了众多重大改进。如果你正在使用旧版本，可以参考迁移指南来升级你的项目。

Carta的核心优势在于其轻量、快速和可扩展的特性。它由unified、remark和rehype提供支持，能够满足开发者多样化的需求。与大多数编辑器不同，Carta不包含代码编辑器，而仅仅是一个带有语法高亮、快捷键等功能的文本区域。

项目技术分析

Carta的技术架构基于以下几个核心库：

unified：一个用于处理文本内容的统一工具链，支持多种插件。
remark：一个用于解析和转换Markdown的库，支持150+插件。
rehype：一个用于处理HTML的库，常与remark结合使用。

此外，Carta还使用了Shiki来进行代码块的语法高亮，提供了丰富的插件生态系统，支持包括数学公式（KaTeX）、斜杠命令、表情符号、TikZ绘图、附件支持、锚点链接等在内的多种功能。

项目及技术应用场景

Carta适用于多种应用场景，包括但不限于：

文档编写：由于其轻量和快速的特性，非常适合用于编写和查看技术文档。
内容管理系统（CMS）：可以集成到CMS中，提供强大的Markdown编辑功能。
教育平台：支持数学公式和TikZ绘图，适用于编写数学和科学相关的教学内容。
博客和论坛：提供丰富的插件和扩展功能，增强用户的内容创作体验。

项目特点

语法高亮：支持Markdown语法高亮，提升编辑体验。
可扩展的工具栏：工具栏支持扩展，可根据需求添加自定义功能。
快捷键支持：提供可扩展的键盘快捷键，提高编辑效率。
丰富的插件支持：通过remark支持150+插件，满足多样化需求。
滚动同步：编辑器和预览窗口滚动同步，方便查看内容。
无障碍友好：设计考虑无障碍性，确保所有用户都能顺畅使用。
SSR兼容：支持服务器端渲染，提升性能。
多种插件：包括数学公式、代码块高亮、表情符号、TikZ绘图、附件支持、锚点链接等。

快速上手

安装

核心包安装：

npm i carta-md

插件安装：

npm i @cartamd/plugin-name

基本配置

<script lang="ts">
	import { Carta, MarkdownEditor } from 'carta-md';
	// 导入默认主题
	import 'carta-md/default.css';

	const carta = new Carta({
		// 记得使用sanitizer防止XSS攻击
		// sanitizer: mySanitizer
	});
</script>

<MarkdownEditor {carta} />

<style>
	/* 或者在全局样式表中设置 */
	/* 设置你的等宽字体（确保编辑器正常工作！） */
	:global(.carta-font-code) {
		font-family: '...', monospace;
		font-size: 1.1rem;
	}
</style>

优化配置

通过以下Vite配置可以减少服务器端包的大小：

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