Skip to main content

Highlight

Highlight text with HTML <mark> tag, but there are some features that should be explained.

Default

index.html
Lorem ipsum <mark>dolor sit amet</mark>, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

Inline

By adding .inline class to the <mark> it will not break the line and highlight will have a different style, This is so cool for highlighting words in a sentence.

index.html
<mark class="inline">Lorem ipsum</mark> dolor sit amet, consectetuer <mark class="inline">adipiscing</mark> elit. Donec
odio. Quisque volutpat mattis eros. mattis eros.

Customization

You can customize highlights text and background color with color setter classes.

index.html
<mark class="inline style-green">Lorem ipsum</mark> dolor sit amet, consectetuer
<mark class="inline style-red">adipiscing</mark> elit.

<br />

Donec odio. Quisque volutpat mattis eros. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit
amet orci.
<mark class="style-purple">
Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in,
pharetra a, ultricies in, diam. Sed arcu. Cras consequat.Donec nec justo eget felis facilisis fermentum. Aliquam
porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus,
tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.
</mark>
Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.