mark.js 教程

mark.js 教程

mark.jsJavaScript keyword highlighting. Mark text with with options that fit every application. Also available as jQuery plugin.项目地址:https://gitcode.com/gh_mirrors/ma/mark.js

1. 项目目录结构及介绍

mark.js 的目录结构大致如下：

mark.js/
├── dist/          # 包含构建后的文件（例如：mark.min.js）
├── src/           # 源代码
│   ├── core/      # 核心功能代码
│   └── plugins/   # 插件代码
├── test/          # 单元测试
└── package.json   # 项目依赖和配置

• dist/: 存放编译后的可部署文件。
• src/core/: 存放核心标记和高亮显示的JavaScript代码。
• src/plugins/: 提供了各种扩展功能的插件源码。
• test/: 测试目录，用于确保代码质量。
• package.json: 定义了项目的依赖、版本等信息。

2. 项目启动文件介绍

由于 mark.js 是一个库，没有传统的启动文件概念。你可以通过在你的HTML或JavaScript文件中引入库来使用它。如果你使用npm安装，可以这样导入：

import Mark from 'mark.js';
// 或者
const Mark = require('mark.js');

然后创建实例并应用标记：

const context = document.querySelector('.context');
new Mark(context).mark('search term');

如果你选择直接从CDN获取，可以在HTML文件中添加以下标签：

<script src="https://cdn.jsdelivr.net/npm/mark.js@latest/dist/mark.min.js"></script>

之后，你就可以在全局作用域访问 $.fn.mark 和 Mark 对象。

3. 项目的配置文件介绍

mark.js 并不直接使用配置文件。但是，它允许你在调用 mark() 方法时传递一个配置对象，以自定义其行为。这里是一些主要的配置选项：

{
  accuracy: 'exactly',  // 精确度（'exactly', 'approximately', 'veryApproximately'）
  separateWords: true,  // 是否按单词单独搜索
  ignorePunctuation: true,  // 忽略标点符号
  elements: null,  // 要处理的元素类型
  className: 'marked',  // 高亮的类名
}

例如，要禁用标点符号忽略，你可以这样做：

new Mark(context).mark('search term', { ignorePunctuation: false });

此外，对于jQuery插件，可以在初始化时传递这些选项：

$('.context').mark('search term', {
 accuracy: 'approximately',
});

了解这些基础知识后，你可以深入研究官方文档以发现更多高级特性和插件使用方法。

mark.jsJavaScript keyword highlighting. Mark text with with options that fit every application. Also available as jQuery plugin.项目地址:https://gitcode.com/gh_mirrors/ma/mark.js