1.0.1 • Public • Published


Simple, sleek and powerful library for customized text highlight in webpage


npm version

Quick start

Several quick start options are available:

  • Download the latest release.
  • Clone the repo: git clone https://github.com/mcsarathkumar/highlightjs.git
  • Install with npm: npm install @mcsarathkumar/highlightjs
  • Install with yarn: yarn add @mcsarathkumar/highlightjs


  • Want to provide functionality to your users to search & highlight any content in full / particular portion of webpage ?
  • Want case sensitive search & highlight ?
  • Want to apply customized styles on highlighted content ?
  • Want to override browser search with customized search & highlight ?
  • Need Library without dependencies and avoid code mess ?


Here is HighlightJS - A single line of Code can solve all the above problems

<input type="text" id="searchTerm">
<script src="https://cdn.jsdelivr.net/npm/@mcsarathkumar/highlightjs/dist/highlight.js"></script>
document.querySelector('#searchTerm').addEventListener('keyup', () => {
  const searchTerm = document.getElementById('searchTerm').value;
  $hljs.highlight({searchTerm: 'search me'});


Please check all components we have in action at https://mcsarathkumar.github.io/highlightjs/demo.html

API Accessors

$hljs.highlight() (or) hljs.highlight() (or) $hlJS.highlight() (or) hlJS.highlight()

API Inputs for highlight()

Input isRequired Datatype Usage Default Example
searchTerm required string Searches the given text in the target area $hljs.highlight({
  searchTerm: 'search me'
selector optional string Specify target in your webpage to search
and highlight. Tag's ID to target, body
tag is focused by default
body $hljs.highlight({
  searchTerm: 'search me',
  selector: '#container'
highlightClass optional string CSS class to be applied on the highlighted content $hljs.highlight({
  searchTerm: 'search me',
  highlightClass: 'bg-white text-primary'
highlightStyle optional object CSS style to be applied on the highlighted content {
  'background-color': '#FFF77D'
  searchTerm: 'search me',
  highlightStyle: {
    'background-color': 'aliceblue',
     color: 'black'
caseSensitive optional boolean Case sensitive search false $hljs.highlight({
  searchTerm: 'search me',
  caseSensitive: true
debounceTime optional number On continuous keystroke in search term,
time (in milli seconds) to wait before
executing search
50 $hljs.highlight({
  searchTerm: 'search me',
  debounceTime: 100

API Output

Output Datatype Usage
count number Count of number of matched contents
disableCtrlFandFocusCustomInput(arg = true) function When the arg = #searchTerm (input tag id) Browser's Ctrl + F or F3 shortcuts properties
are overridden and focussd to #searchTerm on pressing shortcuts, when arg = true, Browser's
shortcuts are disabled, arg = false Enables browser shortcuts, if it was disabled by HighlightJS



Package Sidebar


Weekly Downloads






Unpacked Size

38.5 kB

Total Files


Last publish


  • mcsarathkumar