How to Highlight text in WordPress. (without Plugin)

Do you want to Highlight text or paragraph in WordPress, then this article is definitely helpful to you.

Highlighting a text in a blog post is one of the way to draw reader’s attention to important information. It’s also helps readers skim through the article easily.

Here I will show you how you can highlight words or sentences in the default WordPress blog post editor (Gutenberg Editor) or any page builder like Elementor.

You can easily apply text highlighter using a simple CSS command in the text editor or you can add a special plugin for that. But I recommend you to use the manual method for text highlighting as it is the easiest way to do that and doesn’t require any plugin or deep technical knowledge.

Here we will be using the HTML ‘mark’ element in the blog post editor. In this way, you can easily get user attention to important parts of your blog post.

Steps to Highlight text in WordPress Gutenberg Editor

To manually highlight text in WordPress follow the below step.

Step-1: Go to WordPress dashboard and open a new or exiting post.

Step-2: Select the paragraph where you want to highlight text and click on the three-dot icon as in the below image.

Step-3: Now click on edit HTML section and wrap the text where you want highlight with <mark> & </mark> as shown here.

<mark>highlighted text</mark>

Step-4: Now again click on the three-dot icon and select Edit visually in the block toolbar. Now your WordPress block will change to the normal view and you will notice your selected text highlighted with yellow color.

The colour may vary depending on your theme but by default it will take yellow colour. You can change the highlighting colour by using a simple line of CSS code.

Step-5: To change the highlighting color, Go the WordPress dashboard and click on Appearance and then click on Customize option.

Here you will see an option called Additional CSS and click on it and paste the below code here.

mark {
background-color: #ffd4a1;
}

Here you can change the color of your choice by changing the color code (#ffd4a1) in the CSS code. You can select color codes from websites like HTMLcolorcodes.

Now save your CSS code to change the Highlight text color throughout your WordPress website.

If you don’t want to add HTML code for text highlight than you can add a plugin called Advanced Editor Tools and you will see an option to mark inside your WordPress editor.

But, You don’t need a plugin to achieve a very simple task. Now I will show you how you can highlight text in Elementor page builder.

Video Guide to add Text Highlight

How Highlight Text in Elementor

As of now Elementor doesn’t have any text highlight option by default. You have to add a single line of CSS code in the HTML section. Follow the below steps to achieve this.

Step-1: Open Elementor & select the text editor where you want to highlight text.

Step-2: Now switch to text option from visual as shown below.

Step-3: Now paste the CSS code just before the highlighted text and close the text with </span> tag.

<span style="background:#F7DC6F;"> Highlighted text Here </span>

Step-4: Now you can change the Highlight color by changing the HTML color code. (hex code).

Note: You can also use the <mark>Highlighted text here </mark> tag in Elementor just like Gutenberg and vice versa.

Conclusion

I hope you got the idea on how to highlight text in WordPress (Gutenberg & Elementor) editor. Here you need to remember a single line of CSS code and add it to the HTML section of the editor.

I hope you like this guide and for more interesting WordPress tricks signup, our weekly Newsletter and do share this article.

PS: How to add author box in Generatepress theme. (without Plugin)