• View
• Edit
• History
• Attach
• Print
• Backlinks

Highlight Text (HTML5 <mark> tag)

Questions answered by this recipe

How can I use HTML5's <mark> tag to display highlighted text in my pages?

Description

Use HTML5's <mark> tag to display highlighted text.

HTML5 introduced a new <mark> tag for "highlighting" text. From the W3C:

This recipe allows you to highlight text using markup like this:

  ''''highlighted text''''

Installation

Add these lines in your config.php file:

## HTML5 <mark> tag (highlight text)
## ''''text'''' -> <mark>text</mark>
Markup("''''",">'''''","/''''(.*?)''''/",'<mark>$1</mark>');

Configuration

Configuration isn't necessary. Modern browsers will highlight with a yellow background.

You can style the appearance any way you wish. You can do it in config.php and/or in a CSS stylesheet.

Here's a config.php example that simply changes the background color to a lighter yellow:

## HTML5 <mark> tag (highlight text)
## ''''text'''' -> <mark>text</mark>
Markup("''''",">'''''","/''''(.*?)''''/",'<mark>$1</mark>');

## Style for <mark> tag
$HTMLStylesFmt['mark'] = " mark { background-color: #fff9c6; } ";

Here's a stylesheet example that sets both the background color and the text color.

/* Highlighted text */
mark { background-color: #fff9c6; color: black; }

Usage

displays as

Notes

• Should something like this be added to the core? (I think so.)
• Could the <mark> tag be used to underline text rather than the (usually) semantically-incorrect <ins> tag?-}
• I don't know what happens if the DOCTYPE isn't HTML5.
• My browser(s) display black text on a yellow background by default. The brightness of the yellow color varies.
• This should be cross-browser compatible. I'm not sure of that, however.
• Please note: Markup with 4 apostrophes is incompatible with '''''very strong''''' (bold italics) in Wiki core.
  • I've updated the markup rule, please test and report. --Petko March 02, 2019, at 05:24 AM
  • Works fine now, thanks. -- Siegfried March 02, 2019.

Change log / Release notes

• 2016-09-01 - Initial release

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also

• Underline Text recipe that adds underlining with the <u> tag

Contributors

• Hagan Fox - I discovered the <mark> tag while trying to figure out how to underline with using the <ins> tag, which is not the right way to "underline".

Comments

See discussion at HighlightText-Talk?