Skip to main content

Highlight text

The [highlight-text] shortcode, in conjuction with [hl], allows pieces of text to be highlighted. Both a key and superscript numbering are provided. For screen readers, an option is available to provide text which will not be displayed but will be read out by screen readers, this can clarify the intended meaning behind the labelling.

Getting started

Wrapping text in a [highlight-text] tag sets up the layout and defining a key adds the key.

That's one thing Earthlings might learn to do, if they tried hard enough: Ignore the awful times and concentrate on the good ones.

- Kurt Vonnegut.

[highlight-text key="1:Nouns|2:Verbs"]
That's one thing Earthlings might learn to do, if they tried hard enough: Ignore the awful times and concentrate on the good ones.
- Kurt Vonnegut.
[/highlight-text]

Key

key="1:Item one|2:Item two|3:Item three"

To make a key, add a series of pairs. Each pair is separated by a pipe character - |. Inside each pair, a character and a label are separated by a colon charecter - :. It's recommended that numbers are used, but asterisks or similar symbols could be used.

Highlights

To highlight a piece of text, wrap the content in a [hl] shortcode. Add an id attribute that matches a character in the key, for the above example use 1, 2 or 3. An additional attribute, screen-reader can be added. This adds visually hidden text after the highlight that will be read by screen readers.

[hl id="1" screen-reader="Screen reader users, this is a noun."]Earthlings[/hl]

Note: the 'id' is only an instruction to WordPress. In the converted code it will become a class, so using the same id more than once isn't a validation problem.

Finished example

This example shows a full key, highlights and screen reader text.

That's one thing Earthlings might learn to do, if they tried hard enough: Ignore the awful times and concentrate on the good ones.

- Kurt Vonnegut

[highlight-text key="1:Nouns|2:Verbs|3:Adjectives" screen-reader="Screen reader users, this text uses visual highlights to indicate different parts of speech. Each highlight is explained for your convenience."]
<p>That's one thing [hl id="1" screen-reader="Screen reader users, this is a noun."]Earthlings[/hl] might [hl id="2" screen-reader="Screen reader users, this is a verb."]learn[/hl] to [hl id="2"]do[/hl], if they [hl id="2"]tried[/hl] hard enough: [hl id="2"]Ignore[/hl] the [hl id="3" screen-reader="Screen reader users, this is an adjective."]awful[/hl] [hl id="1"]times[/hl] and [hl id="2"]concentrate[/hl] on the [hl id="3"]good[/hl] [hl id="1"]ones[/hl].</p><p class="keep">- Kurt Vonnegut</p>
[/highlight-text]

One column option

To display the key above the content and allow the content to stretch the full width of its container, add one-column="true" to you shortcode:

That's one thing Earthlings might learn to do, if they tried hard enough: Ignore the awful times and concentrate on the good ones.

- Kurt Vonnegut

[highlight-text key="1:Nouns|2:Verbs|3:Adjectives" screen-reader="Screen reader users, this text uses visual highlights to indicate different parts of speech. Each highlight is explained for your convenience." one-column="true"]
<p>That's one thing [hl id="1" screen-reader="Screen reader users, this is a noun."]Earthlings[/hl] might [hl id="2" screen-reader="Screen reader users, this is a verb."]learn[/hl] to [hl id="2"]do[/hl], if they [hl id="2"]tried[/hl] hard enough: [hl id="2"]Ignore[/hl] the [hl id="3" screen-reader="Screen reader users, this is an adjective."]awful[/hl] [hl id="1"]times[/hl] and [hl id="2"]concentrate[/hl] on the [hl id="3"]good[/hl] [hl id="1"]ones[/hl].</p><p class="keep">- Kurt Vonnegut</p>
[/highlight-text]

Empty example

[highlight-text key="1:|2:|3:" screen-reader="Screen reader users, this text uses visual highlights to indicate different parts ofthe text. Each highlight is explained for your convenience."]
[hl id="1" screen-reader="Screen reader users, this is ."] [/hl]
[hl id="2" screen-reader="Screen reader users, this is ."] [/hl]
[hl id="3" screen-reader="Screen reader users, this is ."] [/hl]
[/highlight-text]

Colours:                  

Keywords