Text Highlighting

Mark important text with a highlight effect using the ==text== syntax

Text Highlighting

The highlight extension lets you mark important text using the ==text== syntax. It renders using the HTML5 <mark> element, providing semantic meaning for highlighted content.

Basic Syntax

I like this approach. It seems to be working now. It will be saved on refresh.

Wrap text in double equals signs == to highlight it:

This is ==very important== information.
Markdown

Result: This is very important information.

Examples

Multiple Highlights

Highlight multiple terms in the same paragraph:

Learn ==HTML==, ==CSS==, and ==JavaScript==.
Markdown

Result: Learn HTML, CSS, and JavaScript.

In Headings

Highlight key words in headings:

## This is an ==Important== Heading
Markdown

In Lists

Draw attention to specific list items:

  • First important point
  • Normal point
  • Another important point

In Blockquotes

Emphasize key parts of quotations:

Remember: Always validate user input!

Combined with Other Formatting

Highlights work alongside bold, italic, and other formatting:

This is **bold**, ==highlighted==, and *italic* text.
Markdown

Result: This is bold, highlighted, and italic text.

Use Cases

Key Concepts

Highlight key terms and definitions when introducing new concepts to help learners identify important vocabulary.

Important Instructions

Use highlighting for critical steps in tutorials:

  1. First, install the dependencies
  2. Configure the environment variables
  3. Run the development server
  4. Do not skip the build step

Code Explanations

When explaining code, highlight the relevant parts:

The map() function transforms each element and returns a new array.

Study Materials

Create effective study notes:

  • Photosynthesis converts sunlight into chemical energy
  • The mitochondria is the powerhouse of the cell
  • Variables declared with const are block-scoped and cannot be reassigned

Warnings and Notes

Warning: This operation cannot be undone!

Note: Make sure to save your work before proceeding.

Comparison with Other Formatting

Syntax HTML Purpose Visual
*italic* <em> Emphasis italic
**bold** <strong> Strong importance bold
==highlight== <mark> Reference/notation highlight
~~strikethrough~~ <del> Deletion strikethrough

When to Use Each

  • Bold - For strong importance or key terms in running text
  • Italic - For emphasis, titles, or introducing terms
  • Highlight - For marking text for reference, drawing attention, or notation
  • Strikethrough - For deleted or outdated content

Styling

The highlight uses the HTML5 <mark> element with a custom class:

<mark class="highlight">text content</mark>
HTML

Default styling provides a yellow background that works in both light and dark modes. You can customize with CSS:

mark.highlight {
    background-color: #ffeb3b;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}
CSS

Accessibility

The <mark> element provides semantic meaning:

  • Screen Readers - Recognized by assistive technology
  • Semantic HTML - Conveys purpose, not just appearance
  • Color Independence - Meaning comes from the element, not just color
  • Print Friendly - Renders appropriately when printed

Browser Support

The <mark> element is supported in all modern browsers:

Browser Version
Chrome 7+
Firefox 4+
Safari 5.1+
Edge All versions
Opera 11+

Syntax Reference

==highlighted text==
Markdown
  • Wrap text in double equals signs ==
  • Works inline with other text
  • Cannot span multiple lines
  • Empty highlights (====) are not rendered

Tips

  1. Use sparingly - Too many highlights reduce their effectiveness
  2. Be consistent - Use for the same purpose throughout your content
  3. Combine thoughtfully - Works with bold/italic but don't overdo it
  4. Consider context - Best for educational content and documentation
  • Bold/Italic - For standard text emphasis
  • Badges - For status indicators and labels
  • Asides - For callout boxes with more content
  • Spoilers - For hiding text until revealed
Back to Markdown Features