Rough Notation让文章更生动不枯燥

效果展示

上周五适合摸鱼，摸鱼之际发现一个好看的插件，特别适合添加到文章上，让文字不在枯燥，让标注更好看

点击跳转查看效果更佳

一个小的JavaScript库，用于在网页上创建和动画注释 Rough Notation使用RoughJS来创建手绘的外观。元素可以用许多不同的样式进行注释。动画持续时间和延迟可以配置，或者只是关闭。 Rough Notation压缩后的大小为3.8kb，代码可在GitHub上获得。

插件使用

在bytemd中使用简单，通过插件引入即可。

1. 下载依赖 npm install --save rough-notation
2. 当然也可以直接使用ES module 进行加载 <script type="module" src="https://unpkg.com/rough-notation?module"><\/script>
3. 或者加载IIFE版本，它在你的作用域中创建了一个RoughNotation对象 <script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"><\/script>

import type { FC } from 'react';
import { Viewer } from '@bytemd/react';
import gfm from '@bytemd/plugin-gfm';
import gfmLocale from '@bytemd/plugin-gfm/locales/zh_Hans.json';
import gemoji from '@bytemd/plugin-gemoji';
import highlight from '@bytemd/plugin-highlight';
import math from '@bytemd/plugin-math';
import mathLocale from '@bytemd/plugin-math/locales/zh_Hans.json';
import mermaid from '@bytemd/plugin-mermaid';
import mermaidLocale from '@bytemd/plugin-mermaid/locales/zh_Hans.json';
import mediumZoom from '@bytemd/plugin-medium-zoom';
import { annotate, annotationGroup } from 'rough-notation'; // 引入 annotationGroup
import 'bytemd/dist/index.css';
import 'highlight.js/styles/school-book.css';
import 'github-markdown-css/github-markdown-light.css';
import Style from './md-view.module.scss';

interface Props {
  value?: string;
}

// bytemd 插件配置
const plugins = [
  gfm({ locale: gfmLocale }),
  gemoji(),
  highlight(),
  math({ locale: mathLocale }),
  mermaid({ locale: mermaidLocale }),
  mediumZoom(),
  {
    // 在 Markdown 渲染完成后执行的回调函数，用于添加自定义的样式或行为
    viewerEffect: ({ markdownBody }: { markdownBody: HTMLElement }) => {
      /**
       * 使用 rough-notation 插件创建注释组及增加动画配置
       * @param selector 富文本渲染后的选择器
       * @param options  配置项
       */
      const createAnnotations = (selector: string, options: Parameters<typeof annotate>[1]) => {
        const elements = markdownBody.querySelectorAll(selector);
        const annotations = Array.from(elements)
          .filter((el): el is HTMLElement => el instanceof HTMLElement)
          .map((el) => annotate(el, options));
        const group = annotationGroup(annotations);
        group.show();
      };

      createAnnotations('strong', {
        type: 'box',
        color: '#4a148c',
        animate: true,
        animationDuration: 1000,
        strokeWidth: 1
      });
      

      createAnnotations('ol, ul', {
        type: 'bracket',
        color: '#4a148c',
        animate: true,
        animationDuration: 1000,
        strokeWidth: 4,
        brackets: ['left', 'right']
      });

      createAnnotations('del', {
        type: 'crossed-off',
        color: '#b71c1c',
        animate: true,
        animationDuration: 1000,
        strokeWidth: 1
      });

      createAnnotations('em', {
        type: 'highlight',
        color: '#ffd54f',
        animate: true,
        animationDuration: 1000,
        strokeWidth: 1
      });
    }
  }
];

const MdViewer: FC<Props> = ({ value = '' }) => (
  <article className={Style['md-viewer']}>
    <Viewer value={value} plugins={plugins} />
  </article>
);

export default MdViewer;