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.

Edit HTML view for text highlight
  • Save
switch to HTML view where you want text highlight

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>
Adding mark tag in HTML view for text highlight
  • Save
wrap the word with <mark> & </mark> tag

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.

switch to edit visually option
  • Save
switch to Edit visually to see changes

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.

Text highlight in WordPress (preview)
  • Save
Preview of text highlight in WordPress

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;
}
CSS code for text highlight in WordPress
  • Save
Here you can change text highlight color

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

In this video, I will show you how to highlight text in both Gutenberg and Elementor editor in WordPress.

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.

How to Highlight text in Elementor
  • Save
<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)

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I currently share top-notch information related to Blogging, SEO, etc. If you want to start a blog easily and create a fortune out of it, then you will love key2Blogging. You can learn more on the about us page.

2 thoughts on “How to Highlight text in WordPress. (without Plugin)”

  1. Hi Abhishek,

    Your tutorial is great and easy to understand. Up till this point, many bloggers are still struggling with the WordPress Gutenberg features. So, your tutorial is timely and helpful.
    Thanks for sharing!

    Reply

Leave a Comment

0 Shares
Copy link