Liseré

面向React生态的轻量可组合文本选择与高亮组件，专为代码文档、教程和交互式高亮场景设计，由开发者Ankur Chauhan构建并开源。

核心功能与使用方式

Liseré提供即选即高亮的默认行为，用户选中文本后自动应用高亮样式，并支持通过onTextHighlighted回调获取选中内容。组件内置两种选择边界模式：Cursor Boundary（精确选中字符）与Word Boundary（自动扩展至完整单词），后者为默认模式。

• 安装方式: 支持pnpm、npm、yarn三种包管理器，命令为pnpm add lisere
• 自定义样式: 支持CSS类、内联样式或两者组合，示例展示了渐变背景、圆角、阴影等复杂效果
• 渲染属性: 提供render props机制，允许完全控制高亮内容的渲染逻辑
• 事件回调: onTextHighlighted返回TextSelection对象，包含选中文本内容

适用场景与优势

组件定位于代码文档、教程和交互式文本高亮场景，其轻量化和可组合特性使其易于集成到现有React项目中，不引入额外依赖。

• 代码文档: 可直接嵌入示例代码块，高亮关键语法或说明
• 教程制作: 支持多段文本独立高亮，适合分步教学
• 文本标注工具: 利用Word Boundary模式确保高亮一致性，避免半词截断
• 作者: 由Ankur Chauhan个人开发并维护，GitHub仓库可获取源码

技术细节与配置

组件通过selectionBoundary属性切换选择模式，highlightStyle属性接受对象定义样式，支持渐变、阴影等CSS特性。所有代码示例均附带可折叠的代码展示面板，便于开发者直接复制使用。

• 边界模式: cursor模式精确选中字符，word模式自动补全单词，适用于不同标注精度需求
• 样式示例: 内置linear-gradient背景、boxShadow多层阴影、cursor: crosshair等效果
• 文档结构: 官网提供Installation、Basic Usage、Custom Styling、Selection Boundary Modes、Custom Render Props等独立章节

常见问题

Q1：Liseré是否支持自定义高亮样式？

A1：支持。可通过highlightStyle属性传入CSS对象，支持内联样式、CSS类或两者组合，示例中包含渐变背景、圆角、阴影和自定义光标样式。

Q2：Liseré的selectionBoundary模式有什么区别？

A2：cursor模式精确高亮用户选中的字符，word模式自动将选中范围扩展至完整单词，默认使用word模式。

Q3：Liseré的安装命令是什么？

A3：使用pnpm add lisere、npm install lisere或yarn add lisere均可，官网示例以pnpm为首选。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。