markster
v1.0.0
Published
a web component for highlighting text
Downloads
1,753
Maintainers
Readme
Markster: a web component for highlighting text.
Examples
TSX
import { Component, h, Host } from '@stencil/core';
import 'markster';
@Component({
tag: 'my-component'
})
export class MyComponent {
render() {
return <Host>
<mark-ster
text={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta eros nibh, a iaculis nisl congue vitae.'}
searchWords={'ipsum iaculis elit'} />
</Host>;
}
}
HTML
<script src='https://unpkg.com/markster@latest/dist/markster.js'></script>
<mark-ster
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta eros nibh, a iaculis nisl congue vitae."
search-words="ipsum iaculis elit"></mark-ster>
Using this component
Script tag
- Put a script tag similar to this
<script src="https://unpkg.com/markster@latest/dist/markster.js"></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
In a stencil project
- Run
npm install markster --save
- Add an import to the npm package
import 'markster';
- Then you can use the element anywhere in your stencil project.