BB Code Enhancements - Highlight BBCode - Highlights text with a yellow box (BB Code)

This is a simple bbcode to highlight text with a yellow box. You can of course change the color to your needs.

This has been confirmed working in the latest releases of IE, FF, Chrome, Safari, and Opera.

Demo: here.

Add a new BBCode

Title: Highlight
BB Code Tag Name: hl
Replacement:

<span style="background-color:yellow;color:black;">{param}</span>

OR
Replacement:

<span class="highlight">{param}</span>

(Thanks to Boofo who pointed this out, you may want to use the second option if you have a custom skin, it may look better. Best to try both and see which you prefer.)
Example: [hl]This is a highlight test[/hl]
Description: This highlights selected text.
Use Option: No
Button Image: (optional)

Remove Tag If Empty: Yes
All Disable Options: No

The above implementation fixes the color of the highlight at yellow and the text black for easy use. If you prefer you may also install it with a variable highlight color. If you prefer to have the user choose the highlight color then instead add the following:

Title: Highlight
BB Code Tag Name: hl
Replacement:

<span style="background-color:{option};color:black;">{param}</span>

Example: [hl="cyan"]This is a highlight test[/hl]
Description: This highlights selected text.
Use Option: Yes
Button Image: (optional)

Remove Tag If Empty: Yes
All Disable Options: No

You can use standard color names in the option such as red, blue, green, yellow, etc...
You can also use hex color codes preceded by the # sign for exact colors, such as #0000FF
Click here for common hex color codes.

Please mark as installed if you use this.

Check My Profile for other BB Code enhancements. They work on all versions.

Screenshot:

[Toorak Times]

Originally Posted by cstreater

Has anyone noticed that highlight is a built in BBCode in 4.x, but for some reason they didn't include a button for it?

Code is [highlight]

I wonder what else is hidden in the WYSIWYG???

[Webmist]

I've expanded on this with:

<span class="highlighter" style="background-color:{option};">{param}</span>

added this to the additional.css file:
.highlighter {padding-top: 2px; padding-left: 5px; border: 2px solid #333333; color: #333333;}

You could even make a duplicate (i.e. hl16) and add font size 16px to the CSS by changing .highlighter to .hl16.