plugin-bytemd-rough

Bytemd Rough Notation 插件

这个插件将 rough-notation 库与 Bytemd（一个 Markdown 编辑器）集成。它为渲染出来的 Markdown 内容中的特定 HTML 元素提供可视化的注释效果，并且可以自定义注释样式。此外，插件还包括一个自动为代码块添加“复制代码”按钮的功能。

特性

集成 Rough Notation：为 Markdown 中的特定 HTML 元素（如添加可定制的标注效果，包括框、突出显示、划线等样式。可自定义注释：你可以定义自定义的注释规则，包括指定哪些 HTML 标签需要被注释以及注释的样式选项。复制代码按钮：为每个代码块自动添加“复制”按钮，方便用户一键复制代码内容到剪贴板。

安装

你可以通过 npm 或 pnpm 安装该插件：

npm install plugin-bytemd-rough

或者

pnpm add plugin-bytemd-rough

使用方法

基本使用

使用该插件时，你需要导入并将其添加到 Bytemd 编辑器的插件列表中：

import { roughNotationPlugin, pluginCopyCode } from 'plugin-bytemd-rough';

const editor = new Bytemd({
  plugins: [
    roughNotationPlugin(),  // 默认的标注规则
    pluginCopyCode()        // 复制代码按钮功能
  ]
});

这样会启用注释效果和复制代码功能。

效果图

自定义注释

如果你希望自定义注释的规则，可以传入自定义的注释配置。例如：

import { roughNotationPlugin } from 'plugin-bytemd-rough';

const customAnnotations = [
  {
    tag: 'h1',
    option: {
      type: 'underline',
      color: '#00f',
      animate: true,
      animationDuration: 1200,
      strokeWidth: 2
    }
  },
  {
    tag: 'p',
    option: {
      type: 'highlight',
      color: '#ff0',
      animate: true,
      animationDuration: 800,
      strokeWidth: 1
    }
  }
];

const editor = new Bytemd({
  plugins: [
    roughNotationPlugin(customAnnotations),
    pluginCopyCode()
  ]
});

插件配置

AnnotationConfig：定义每个注释的配置。
tag：需要标注的 HTML 元素（例如 strong、blockquote、h1 等）。
option：rough-notation 的配置选项，定义标注效果的样式。包括 type、color、animate、strokeWidth 等选项。

默认标注规则

插件内置了一些默认的标注规则，针对常见的 HTML 标签（如 strong、blockquote、ul、ol、del 等）。你可以通过自定义配置来覆盖这些默认规则。

Rough Notation 类型

rough-notation 支持以下几种注释类型：

box：在元素周围绘制一个框。
highlight：高亮元素的背景。
bracket：在元素左右添加括号。
crossed-off：对元素进行划线处理。复制代码按钮