How to Highlight Text in WordPress Posts [Gutenberg Editor]

Text formatting is important for an article to look better it also enhances user reading experience to the next level. But, when i tried to highlight a text in WordPress i found that WordPress doesn’t have a highlight option in the post editor by default. However, there is a very easy way to highlight text, that doesn’t require any new plugins or updates.

In this tutorial, you’ll learn a quick way to highlight text like this in the WordPress Gutenberg editor.

How to Highlight Text

As you all know that Since WordPress 5.0, they introduced a new feature called block editor. So since WordPress 5, we are using editable blocks for writing content in posts.

Select the block that contained the text for you to highlight and click on the three dots (more options) button.

Select Edit as HTML options

highlight text in wordpress

Now, find the text you want to highlight in the editor, and add <mark> before it and </mark> after it, like this:

highlight text in wordpress

Once you’ve added the HTML, switch back to the Visual view of the post editor. You’ll immediately see that the text is highlighted.

You can then publish the post, and the highlighted text will show on the post.

You may like : Add an Author Box in GeneratePress

Add Styling

The default style of mark tag is dark yellow background. I prefer to use a custom background color for my highlighted text to increase its look and feel.

include this CSS

mark {
    padding: 4px;
    font-weight: bold;
    background-color:#FAF3C4
}

This will make the highlighted text more catchy and will improve user experience. I choose light yellow shade as the default color to highlight, you can change to your preference.

If you want more colors add it using a class, see the below example.

See how these text looks when highlighted in blue or highlighted in yellow and highlighted in green.

To achieve this simply add a class to the mark tag and CSS to it <mark class="blue">Text will be highlighted in blue</mark>

Add CSS to Custom Class

mark {
    padding: 4px;
    font-weight: bold;
		background-color:#FAF3C4
}

mark.blue {
	background-color:#cee1ff;
}

mark.green {
	background-color:#d0f0bb;
}


mark.blue {
    background-color:#cee1ff;
}

mark.green {
    background-color:#d0f0bb;
}

Working Method

In above steps, we have added a text using the <mark> HTML tag.

The <mark> tag is an addition to the HTML5. The <mark> tag defines the text that should be marked or highlighted. Your browser then sees the mark element and styles it. This is why the text is highlighted right away.

While not every browser styles the mark element the same way, the text is clearly highlighted in each.

Conclusion

Thanks to the mark element added in HTML5, it’s incredibly easy to highlight text on any site.

Even if this was your first introduction to HTML, you’ll have no problem typing out those characters to highlight any text on your site.

If you have any queries about this post, please leave them in the comments section below.

Follow TechBiriyani on FacebookTwitter to get all the latest updates.

Leave a Comment