How to Highlight Text in WordPress Posts

As you’ve found, WordPress doesn’t have a highlight option in the post editor. 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 post editor.

How to Highlight Text

The first step is to login to your site, and navigate to a post or page with text you want to highlight.

Once there, locate and click on the Text tab at the top-right of the editor.

switching the post editor to the text view

Switching to Text view allows you to add and edit HTML in the post. Don’t worry if you don’t know HTML – you don’t need to.

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

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 update/publish the post, and the highlighted text will show on the post.

some text highlighted in a post

How Does This Work?

In the steps above, you’ve added an HTML element to the post. More specifically, you’ve put some text into a “mark” element.

The mark element exists for, well, marking text that should be 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 your 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 want to learn more about HTML, check out HTML Dog.

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

Related Posts

4 Comments
  1. Hi,

    This is a super way to highlight text in WordPress. I wish I had found it when I started first.
    Is there a way to change the highlight colour from yellow to another colour. I would prefer red or green for my website.

    • Yea you can change the background color of all “mark” elements with the following CSS:

      mark {
        background-color: green;
      }

      If your theme adds a CSS section to the Customizer, you can add it there. Otherwise, activate the Simple Custom CSS plugin and use it to add the above CSS.

  2. Wow! This is one of the quickest way to highlight the tex. Thanks.

  3. Thanks .. great guide. was searching this since a long time

Comments are closed.