Highlight Text (HTML5 <mark> tag)

Summary: Use HTML5 <mark> tag to highlight text.
Version: 2016-09-01
Prerequisites: HTML5
Status: Beta
Maintainer: HaganFox
License: N/A
Categories: Markup, PHP55, PHP72
Users: (view? / edit)

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:

"The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context."

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; }
Note: Styles set by $HTMLStylesFmt in config.php will override styles in a stylesheet. (See PmWiki.WikiCascades.)

Usage

Example:
This shows ''''highlighted text'''' in a sentence.

displays as

This shows highlighted text in a sentence.

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.

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

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?

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.