Recently, I was replying to a question by a DummyTech.com visitor about how to remove highlights from a Microsoft Word document. I wanted to visually demonstrate the various types of highlights that can be applied to text and paragraph in my tutorial so had to figure out a way to highlight text in WordPress. Unlike Microsoft Word, the WordPress editing toolbar doesn’t come with a highlight button.
How to Highlight Text in WordPress
There are several plugins that can take care of highlighting for you, however, I am not going to ask you to install any of those plugins. The reason being, these plugins are not so popular and are likely not to be updated often. So, you might have comparability issues which can often break down your WordPress installation.
You can highlight using CSS, but that too is not very suitable for novice WordPress bloggers. So, don’t worry, I am not going to ask you to edit any code either.
The easiest and the simplest way of adding highlights in WordPress is to use the <mark> tag. The mark tag is a fancy way of saying highlight in HTML. HTML5 also supports this tag and it is compatible with the latest versions of Chrome, Firefox, Internet Explorer, Safari and Opera. Here are the instructions for adding this tag to highlight text in WordPress:
- Click on the beginning of the text you want to highlight.
- From the WordPress text editing toolbar, click on the Text tab located on the top right corner (next to Visual).
- Type in <mark> where you want to the highlighting to start.
- Type in </mark> where you want the highlighting to end.
- Click on the Visual tab and you will see the highlighted text.
So, if I wanted to highlight “THIS BLOCK OF TEXT IS HIGHLIGHTED”, I would go to the Text tab and enter the mark tags as follows: <mark>THIS BLOCK OF TEXT IS HIGHLIGHTED</mark>. This will results in THIS BLOCK OF TEXT IS HIGHLIGHTED. As you can see, the text within the mark tags are highlighted. There you go, this is the simplest way to highlight text in WordPress.
How to Change the Default Color of the Highlighted Text in WorPress
By default, the browsers will use yellow color to highlight the text when mark tags are used. However, under certain circumstances, you might want to change the color to something else. You can do this by adding CSS code to your style.css file. Some themes also allow you to add your own CSS code by going to Appearance > Edit CSS.
To change the default color, use the following CSS code:
mark {
background-color: red;
}
This will change the background color of the highlight to red.
