If you are seeking the highlight text button in the WordPress block editor, unluckily there is no option available. But don’t worry, in today’s tutorial, we will give you a lot of simple methods to easily highlight text in WordPress.
When do you need to highlight text?
In some situations, you would like to emphasize some important information to attract the readers’ attention. Highlighting text is considered the best way to make your crucial content more outstanding. In addition, it also enhances the readers’ experience to the next level. However, by default, the new block editor of WordPress doesn’t include a highlight option. For this reason, we collected many easiest methods to help you handle this issue. Now, let’s dive into the following methods to find your favorite way.
How to highlight text in WordPress in Gutenberg?
Method 1: Using Advanced Editor Tools plugin
This is one of the easiest methods to help you highlight text in WordPress without touching any single line of code.
Initially, in order to use this method, you need to install this plugin. Just go to Plugins > Add New and then use the search bar to find the ” Advanced Editor Tools” plugin. Quickly click on the Install Now button and Activate it.
After you have installed the plugin yet, it will automatically add more formatting options and enhance the functionality in the WordPress block editor.
Once you want to highlight some text, simply choose the text that you want to modify and then click on the drop-down arrow on the toolbar to open more formatting options.
You will see the “Mark” option. When you click on this option, it will immediately highlight the text by using the default colors. Ans this color will depend on your WordPress Theme colors.
Now, your selected text is being highlighted in action. This was so easy, wasn’t it?
Method 2: Using HTML tags to highlight text in WordPress
This method is suitable for those who don’t often highlight text in WordPress. By using this way, you don’t need to install any additional plugins and however, it requires you have a little bit of coding knowledge.
Firstly, you need to go to the paragraph that contains the text you want to highlight. Then, click on the three-dot menu in the block toolbar.
Now you need to choose the “Edit as HTML” option.
After that, you will see your paragraph text being in HTML format. You just need to wrap the text you want to highlight inside the <mark> and </mark> tags like this.
<mark>highlighted text</mark>
For example, we are going to highlight the “Korean restaurant” text. We will wrap the text inside the <mark> and </mark> tags as the screenshot below.
Now, you need to click on the three-dot menu again and choose Edit Visually option to switch back to the visual mode.
Immediately, you will switch back to the visual mode and you will see your selected text highlighted.
Keep in your mind that the color of the highlighted text will depend on your WordPress theme.
However, there is a way that allows you to change it by adding your own custom CSS.
In order to change the highlighted color, you need to go to the Appearance > Customize page to open the theme customizer. From here, click on the Additional CSS tab that is displayed at the bottom of the left column.
Here you can paste your custom CSS. You can use the following CSS code:
mark {
background-color: #ffd4a1;
}
You can refer to the list of good HTML color codes in the table below to apply to your website.
| Colors | Hex codes |
| Green | #32cd32 |
| Yellow | #ffff00 |
| Flourescent Yellow | #ccff00 |
| Light Pink | #FFB6C1 |
| Light Blue | #87cefa |
| Purple | #800080 |
| Red | #FF0000 |
Summary
Highlighting text can be an efficient method to emphasize your content on your blog. However, you shouldn’t overdo it, otherwise, it will confuse your readers. Hopefully, this article gave you many useful methods to help you easily highlight text in WordPress. In case that you have any questions, please leave a comment below. We will support you as soon as possible.
Additionally, don’t miss a wide range of Free WordPress Themes on our website. If you want to make a new appearance for your site, let’s visit and get one.
- How to place menu items in helix joomla 5 ? - December 14, 2024
- How to reduce the size of helix 2 layout ? - December 14, 2024
- What’s J4 starter template and how to use it - December 3, 2024
Recent Comments