Back to GitHub

HighlightHelper.js Demo

Theme:

Jump to:

Demo 1: Basic highlighter

HighlightHelper.js is a JavaScript library for drawing highlights in HTML content. Select text, or tap an existing highlight. Then choose a color or style. Highlights can be drawn across element boundaries, and they can overlap!

You can use default fill and underline styles, or define your own. The library can adapt to a variety of use cases and languages.

わたしニーファイはりょうしんからまれたので,ちちまなんだすべてのことのなかからいくらかのおしえをけた。

فِي الْبَدْءِ خَلَقَ اللهُ السَّمَاوَاتِ وَالأَرْضَ. وَكَانَتِ الأَرْضُ خَرِبَةً وَخَالِيَةً، وَعَلَى وَجْهِ الْغَمْرِ ظُلْمَةٌ، وَرُوحُ اللهِ يَرِفُّ عَلَى وَجْهِ الْمِيَاهِ. وَقَالَ اللهُ: «لِيَكُنْ نُورٌ»، فَكَانَ نُورٌ.

១ព្រះ​បន្ទូល​ទាំង​ឡាយ​នៃ​ព្រះ ដែល​ទ្រង់​មាន​ព្រះ​បន្ទូល​ទៅ​ម៉ូសេ ក្នុង​កាល​ម៉ូសេ​ត្រូវ​បាន​នាំ​ឡើង​ទៅ​លើ​ភ្នំ​ដ៏​ខ្ពស់​បំផុត

Select One

Warning: For simpler code snippets, the below demos use CSS @scope, which is not supported on your browser.

Demo 2: Audio sync

CHAPTER 13

Paul discusses the high status of charity—Charity, a pure love, excels and exceeds almost all else.

1 Though I speak with the tongues of men and of angels, and have not charity, I am become as sounding brass, or a tinkling cymbal.

2 And though I have the gift of prophecy, and understand all mysteries, and all knowledge; and though I have all faith, so that I could remove mountains, and have not charity, I am nothing.

3 And though I bestow all my goods to feed the poor, and though I give my body to be burned, and have not charity, it profiteth me nothing.

4 Charity suffereth long, and is kind; charity envieth not; charity vaunteth not itself, is not puffed up,

5 Doth not behave itself unseemly, seeketh not her own, is not easily provoked, thinketh no evil;

6 Rejoiceth not in iniquity, but rejoiceth in the truth;

7 Beareth all things, believeth all things, hopeth all things, endureth all things.

8 Charity never faileth: but whether there be prophecies, they shall fail; whether there be tongues, they shall cease; whether there be knowledge, it shall vanish away.

9 For we know in part, and we prophesy in part.

10 But when that which is perfect is come, then that which is in part shall be done away.

11 When I was a child, I spake as a child, I understood as a child, I thought as a child: but when I became a man, I put away childish things.

12 For now we see through a glass, darkly; but then face to face: now I know in part; but then shall I know even as also I am known.

13 And now abideth faith, hope, charity, these three; but the greatest of these is charity.


This demo example has two highlights: a bold highlight for the current word, and an invisible highlight for the current verse. The highlights move as the audio advances. The callout bar is a wrapper on the verse highlight.

Demo 3: Document draft

About Cereal

A cereal is a grass (family Poaceae) cultivated for its edible grain. Cereals are the worlds largest crops, and are therefore staple foods. They include rice, wheat, rye, oats, barley, millet, and maize. Edible grains from other plant families, such as amaranth, buckwheat and quinoa, are pseudocereals (Eudicots). Most cereals are annuals, producing one crop from each planting, though rice is sometimes grown as a perennial. Winter varieties are hardy enough to be planted in the autumn, becoming dormant in the winter, and harvested in spring or early summer; spring varieties are planted in spring and harvested in late summer. The term cereal is derived from the name of the Roman goddess of grain crops and fertility, Ceres.

Cereals were domesticated in the Neolithic around 8,000 years ago. Wheat and barley were domesticated in the Fertile Crescent. Rice and some millets were domesticated in East Asia, while sorghum and other millets were domesticated in Sudan. Maize was domesticated by Indigenous peoples of the Americas in southern Mexico about 9,000 years ago.

In the 20th century, cereal productivity was greatly increased by the Green Revolution. This increase in production has acompanied a growing international trade, with some countrys producing large portions of the cereal supply for other countries.

This demo uses highlights to show spelling errors, review comments, and the location of other people working in the document. Highlight wrappers are used for hover/tap popups and caret indicators.

Demo Credits