It is Angular 20 wrapper for very cool text highlighting lib [Mark.js](https://markjs.io)
npm install ngx-markjs-demoIt is Angular 20 wrapper for very cool text highlighting lib Mark.js
| ngx-markjs | Angular |
|---|---|
| 20.x.x | 20.x.x |
| 19.x.x | 19.x.x |
| 18.x.x | 18.x.x |
npm i mark.js
npm i ngx-markjs
$3
...
import {NgxMarkjsModule} from 'ngx-markjs';@NgModule({
...
imports: [
...
NgxMarkjsModule
],
...
})
export class AppModule { }
$3
[markjsHighlight]="searchText"
[markjsConfig]="config"
[scrollToFirstMarked]="true"
>$3
The
input allows you to customize the behavior of mark.js. You can find a list of available options on the mark.js website.Here's an example of how to use the
markjsConfig input to change the highlight color:`html
[markjsHighlight]="searchText"
[markjsConfig]="{ 'className': 'highlight' }"
>
css
.highlight {
background-color: yellow;
}
`$3
A live demo of the library is available here.
Contributing
Contributions are welcome! Please feel free to submit a pull request.
$3
Incase of some compilation issues you can try to import ngxMarkjsModule directly in your application from .ts file
import {NgxMarkjsModule} from 'ngx-markjs/src/public-api';
But in that case you should include path to module in tsconfig.json ('include' section).
$3
Clone this repo and do install
npm installng serve
Additional mark.js config params can be found on its officail site
Did you Like this lib? Follow me on Twitter for more Angular and RxJS staff!
Need a mentorship for Angular and RxJS? Find me on codementor.io
This project is licensed under the MIT License.