ngx-markjs

This is a Angular 13 Wrapper for Mark.js.

How to Use

Install the NPM package:

$ npm i @lmaos/ngx-markjs

Add the following to your tsconfig

{
	...
  	"compilerOptions": {
		...
		"allowSyntheticDefaultImports": true,
		...
	}
	...
}

Import the Module into your project:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxMarkjsModule } from '@lmaos/ngx-markjs'; // Add this

@NgModule({
	declarations: [AppComponent],
	imports: [
		BrowserModule,
		AppRoutingModule,
		NgxMarkjsModule, // Add this
	],
	providers: [],
	bootstrap: [AppComponent],
})
export class AppModule {}

Usage

start using the library via implementing the directive:

<div class="card-container"
markjsHighlight //add the directive to your div
[markjsConfig]={}
[markjsHighlight]="filteredText">Test Text</div>

or via the MarkjsHighlight class

import { MarkjsHighlight } from '@lmaos/ngx-markjs';
...
MarkjsHighlight.mark(this.testCard.nativeElement, 'ngx');

Find a minimal example at the demo Repository.