Last Updated on: December 1st, 2016
This tutorial will tell you, step-by-step, how you can highlight specific text in your blog posts, and provide you with 4 different methods on how to do this.
Pick the method you like best!
Highlighting text by using code (methods 1 and 2, below) is something I learned from Dear Blogger, AKA Greg Narayan. (He was my first freelancing client… and he taught me a lot!)
As a self-proclaimed non-techie, I thought this would be difficult to learn, but it wasn’t as hard as I thought.
As long as you know the difference between the Visual Editor and the Text Editor, you’ll be able to highlight some text, too!
Most people generally work in the Visual Editor because it makes things easy to see.
They don’t want to see the “behind-the-scenes” happenings. They just want things to look nice.
For example, when I bolded the above sentence and the words “Visual Editor,” I did not see the behind-the-scenes insertion of the <strong> opening and closing tags. That’s because I’m currently writing this in the Visual Editor.
However, if I was writing it in the Text Editor, I would have. 😉
Now I’ll tell you how I added the yellow highlighter to the above text.
Steps to Follow to Highlight Text: Method 1
Step 1: Switch to the Text Editor
This simply involves clicking the tab that says Text.
Step 2: Find the text in your post that you want to highlight and insert the following piece of code below it.
Note that I’ve made things easy for you — you can simply copy the code from this blog post. (If you’re wondering how I did this, I used a special plugin called SyntaxHighlighter Evolved. Greg told me about this, too.) 🙂
Here is the code you need:[html]<span style=”background-color: #f9eb20;”>;THE TEXT YOU WANT TO HIGHLIGHT<</span>[/html]
Step 3: Using your mouse, highlight the text that you want to highlight, then right-click and choose the CUT option.
This is the easy part.
Step 4: Inside the piece of code you just inserted, use your mouse to highlight the text that says THE TEXT YOU WANT TO HIGHLIGHT and then right-click and choose the PASTE option.
Step 5: Click back to the Visual Editor to see the awesome results. Your selected text will now be highlighted in yellow.
You can preview this by saving your post and then clicking the Preview Post option.
Method 2: The Easier Way to Highlight Your Text
This method might be easier for you to understand.
Simply insert the opening part of the code before the text that you want highlighted and then insert the closing part of the code after it.
The opening part of the code:[html]<span style=”background-color: #f9eb20;”>[/html]
The closing part of the code:[html]</span>[/html]
Note that you don’t need to understand coding in order to do this!
I don’t understand code. It’s all Greek to me! However, I was able to follow these simple steps in order to highlight text whenever I want to.
(Note: You should also insert Tweetables into your blog posts… like I just did. I am using a plugin called TweetDis (aff link) which you can buy, or you can also use the Click to Tweet plugin, which is free. And if you have a free blog (on WordPress.com), you can use 10 Easy Steps to Inserting a “Click to Tweet” link in your blog posts!)
Method 3: Use Plugins
If you are not blogging on a free platform and are using self-hosted WordPress, you might want to use a plugin to help you.
Here are some that will do the trick:
- CKEditor For WordPress (This plugin replaces your default editor with one that will give you the option to highlight text. It can do a few other neat things, too.)
- RAD Text Highlighter (This plugin lets you put the text you’d like to highlight in between two shortcode brackets, and it then automatically highlights the text.)
- Shortcodes Ultimate (This plugin lets you create tabs, buttons, boxes, sliders, responsive videos and much, much more.)
Method 4: Edit Your CSS
If you are technically adept at editing CSS, you can follow the steps outlined in either this post OR this post to help you. (I won’t pretend to tell you that I understand this method because I don’t.) However, the steps are clear in both of these posts and pretty much tell you the same steps to follow.
I’m not techie, so I don’t do this.
Changing the Color of Your Highlighter
If you don’t like yellow and want a different color (or want a different shade of yellow), all you have to do is find the code, called the “hex code,” for the color you want.
The hex code consists of some numbers and letters. Simply replace your preferred hex code in the code you inserted. You’ll notice that the yellow color is denoted by e5ed09.
You can find other colors by using a hex code generator.
This is the best color generator I have found. You need to scroll down to Point #3 on the page to find the color wheel. You’ll be able to see the code at the bottom.
Here’s a picture that will help you:
Now that you know how to highlight text in your blog posts and are able to select the colors you want to use, you will be able to highlight text in your blog posts. I hope you have fun with it. Just don’t overdo it.
You should only highlight really important points or points that you want to stand out from the rest.
I’d appreciate if you shared this post to help me get the word out about this new website. Thanks!
Also, don’t forget to grab your free ebook: 20 Blog Post Must-Haves. A link will be sent to you once this form has been submitted!
~Lorraine Reguly, freelance writer and editor for hire, and owner of Wording Well.