https://github.com/chunshand/mark-highlight
mark-highlight is a simple tool，Highlight the content | mark-highlight 是一个简单的小工具，可以对选择的内容进行划线 高亮
https://github.com/chunshand/mark-highlight
highlight mark typescript underline
Last synced: 2 months ago
JSON representation
mark-highlight is a simple tool，Highlight the content | mark-highlight 是一个简单的小工具，可以对选择的内容进行划线 高亮
- Host: GitHub
- URL: https://github.com/chunshand/mark-highlight
- Owner: chunshand
- License: mit
- Created: 2022-11-27T10:31:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-06T01:09:07.000Z (over 2 years ago)
- Last Synced: 2025-03-20T21:13:31.563Z (3 months ago)
- Topics: highlight, mark, typescript, underline
- Language: TypeScript
- Homepage:
- Size: 120 KB
- Stars: 39
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
- License: LICENSE
Awesome Lists containing this project
README
# mark-highlight(beta)
Languages: [简体中文](/README.md) | English
mark-highlight is a simple tool，Highlight the content , Does not pollute the element structure
- underline / highlight
- custom click function
- custom class
- auto resize
### demo
[code](./examples/index.html)
[online demo](https://code.juejin.cn/pen/7171034100965310472)
If you feel okay, give me a star
### installation
```html
```
or
```bash
npm install mark-highlight
```
### use
```js
let mark = new Mark("idName"|HtmlElement);
mark.render();
```
**on**
```js
mark.on('render', (el) => {
console.log('render dom',el);
})
mark.on('selected', (data) => {
let markStr = data.markStr;
let {
top_left,
top_center,
top_right,
// ...
} = data.position;
})
```
**add highlight**
```js
mark.highlight(markStr, 'className', (e) => {
// click function
let _markStr = e.target.getAttribute('data-id')
})
```
**add underline**
```js
mark.underline(markStr, 'className', (e) => {
let _markStr = e.target.getAttribute('data-id')
})
```
**remove mark**
```js
mark.remove(markStr, 'underline|highlight');
```
**add mark**
```js
mark.add({
markStr:"",
type: 'underline|highlight',
className: "",
data: {},
clirk:()=>{},
});
```
**show all mark**
```js
mark.show();
```
**hide all mark**
```js
mark.hide();
```
**clear mark**
```js
mark.clear();
```
**get all mark**
```js
mark.getMarks();
```