Highlight Text in HTML Webpages by <mark> Tag

In Markdown files, we can use markup == to wrap text to highlight the content. However, Jekyll (at least for Markdown renderer kramdown¹² which my website use) doesn’t support converting this markup syntax to the HTML element for highlighting, for example:

1
==This is highlighted text.==

==This is highlighted text.==

So, to make highlight the text in HTML webpages, we should use <mark> element³, whose basic syntax is like:

1
<mark>This is highlighted text.</mark>

This is highlighted text.

Based on it we can specify the style attribute to customize style:

1
<mark style="background:blue;color:white;font-weight:bold;padding:7px;border-radius:3px;">This is highlighted text.</mark>

This is highlighted text.

Of course, the same effect can be achieved by CSS style:

1
2
3
4
5
6
7
.mark-example {
    color: white;
    background-color: blue;
    font-weight: bold;
    padding: 7px;
    border-radius: 3px;
}

1
<mark class="mark-example">This is highlighted text.</mark>

This is highlighted text.

References