Carta 开源项目教程

最新推荐文章于 2024-10-11 07:13:09 发布

邢郁勇Alda

最新推荐文章于 2024-10-11 07:13:09 发布

阅读量494

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00021/article/details/139820318

Carta 开源项目教程

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

1、项目介绍

Carta 是一个轻量级、快速且可扩展的 Svelte Markdown 编辑器和查看器。它由 unified、remark 和 rehype 提供支持，适用于现代开发环境。Carta 不包含代码编辑器，而是一个带有语法高亮、快捷键和其他功能的 textarea。

主要特性

Markdown 语法高亮：支持 Shiki 进行语法高亮。
工具栏：可扩展的工具栏。
键盘快捷键：可扩展的键盘快捷键。
插件支持：支持超过 150 个插件。
滚动同步：支持滚动同步功能。
无障碍友好：对无障碍访问友好。
SSR 兼容：支持服务器端渲染。
KaTeX 支持：通过插件支持 KaTeX。
Slash 命令：通过插件支持 Slash 命令。
Emojis 支持：支持 Emojis，并包含搜索功能。
TikZ 支持：通过插件支持 TikZ。
附件支持：通过插件支持附件。
锚链接：支持在标题中使用锚链接。
代码块语法高亮：通过插件支持代码块语法高亮。
嵌入组件：通过插件支持嵌入组件。

2、项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Carta 的核心包和插件：

npm install carta-md
npm install @carta-md/plugin-name

基本配置

在你的 Svelte 项目中，使用以下代码进行基本配置：

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