Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
Sometimes bold isn’t enough.
If you want a paragraph or part of a sentence to stand out, nothing works better than a bright highlight.
In this brief tutorial, you’ll learn three different ways you can highlgiht text with the WordPress Gutenberg editor.
How to highlight text
The first method requires editing HTML, but it’s probably the style you’re looking for.
The following two methods can be implemented entirely through the normal editor options.
1. Use the “mark” HTML element
There is a mark HTML element specifically made to markup text with a highlight. Here’s an example of how it looks.
The style depends on the browser or even your current WordPress theme, but 99% of the time, it gives the text a yellow background as if marked with a traditional highlighter.
One advantage of this technique is that it works for all block elements, so it’s not restricted to paragraph blocks only.
To add this effect to your text, start by selecting the block with the text you want to highlight. Then click the Options button and select the Edit as HTML option.
Inside the paragraph element, you’re going to wrap the text you want to highlight with the mark tags. To do this, place “<mark>” directly before the text and “</mark>” directly after. The only difference is the forward slash in the second tag. Make sure not to skip that, or you’ll end up highlighting the whole post!
For example, if I want to highlight the words “example text” in the paragraph featured below, here’s how I would do that:
After you’re done, you can open the options menu again and click Edit visually to revert to the normal view.
This technique is a bit tedious, but gives your text that classic highlight aesthetic you’re likely looking for.
While the mark element is good for changing the background color of a few words, there’s an even easier way to change the text color of selected words.
2. Change the text color
You can change the color of any text within a paragraph block using a built-in editor option.
To change the text color, select the paragraph and then highlight the words you want to edit. Next, click the dropdown arrow and select the Text color option.
You’ll see a few sample colors popup including a nice yellow shade. Click any color to apply.
One advantage of using this option instead of using mark elements is that you get full control over the color. This option is available for the text color, but there currently isn’t a way to add a custom background color for selected words.
That said, there is a simple way to change the text color and background color of an entire paragraph.
3. Change the background color
This last technique is great for creating “call outs” containing tips, warnings, or even a marketing call-to-action.
To give a paragraph block a background color, select it, and then click on the Color settings section in the sidebar. Inside, you’ll find a variety of color options for both the text and the background.
All you have to do is click a color to apply it. The custom colors option is available if you want to use a color picker or enter a hexadecimal color code.
The Text color option you just learned is good for editing individual words in a paragraph, but this block-level setting is much more efficient if you want to change the text color for an entire paragraph.
Master the WordPress editor
I hope the tips in this tutorial help you make even better content, but don’t stop here.
There’s a lot more to learn about the block editor that can help you make more effective and stylish content in less time.
If you’re new to WordPress, I’d recommend reading my guide on how to use the block editor effectively:
How to Use the WordPress Block Editor: The Essential Guide to Gutenberg
And if you’ve been a WP user for some time, I bet you can still find some handy design tips in my free 7-day email course:
FREE 7-day WordPress Mastery Email Course
Thanks for reading this tutorial on how to highlight text with WordPress, and please consider sharing it with the buttons below.
