Colorize Characters In Text – Word Highlighter

Word Highlighter is a modern JavaScript library that applies different colors to specific characters, words, or sentences in your text.

How to use it:

1. Download and insert the word-highlighter.min.js JavaScript library into your document.

<script src=”./word-highlighter.min.js”></script>

2. Markup the characters to be colored as follows:

#1{Hello}, #2{CSS}#3{Script}.#4{CoM}

3. This will wrap the characters into <span> elements with unique CSS classes and apply certain colors of your choosing to them as follows:

<span class="word-highlighter-1">Hello</span>,
<span class="word-highlighter-2">CSS</span>
<span class="word-highlighter-3">Script</span>.
<span class="word-highlighter-4">CoM</span>

.word-highlighter-1 {
  color: #f44336;
}
.word-highlighter-2 {
  /* ... */
}
.word-highlighter-3 {
  /* ... */
}
.word-highlighter-4 {
  /* ... */
}

4. To customize the predefined colors, download the package, register or override colors, and then run the build.

// ./src/colors.js
let colors = [
    '#f44336',
    '#ffc107',
    '#9c27b0',
    '#ff5722',
    '#3f51b5',
    '#e91e63',
    '#03a9f4',
    '#673ab7',
    '#009688',
    '#2196f3',
    '#8bc34a',
    '#00bcd4',
    '#ffeb3b',
    '#4caf50',
    '#ff9800',
    '#cddc39',
];
const registerColors = (newColors) => {
  colors = newColors;
};

$ npm install
$ npm build