Add ==highlight== Syntax Support to remark-gfm

[fazi-gondal]

@mikeal @rubys @isaacs @session-zz @fazi-gondal @wooorm

Feature Request: Add ==highlight== Syntax Support to remark-gfm

Problem:
The remark-gfm plugin does not natively support ==text== syntax for highlighting text (rendered as <mark> in HTML), unlike markdown-it with its highlight plugin. This creates inconsistency when migrating from Markdown-it or when users expect this common formatting option.

Desired Behavior:

• ==highlighted text== should render as <mark>highlighted text</mark>
• Should work alongside GFM features (tables, strikethrough, etc.)
• Should support nesting (e.g., ==**bold** highlight==)

Why This Matters:

1. User Expectations: Many Markdown users are familiar with ==text== from other parsers.
2. Consistency: Needed for projects migrating from markdown-it to remark.
3. Accessibility: Highlighting is useful for documentation, notes, and tutorials.

Proposed Solutions:

1. Add native support to remark-gfm (ideal for ecosystem consistency).
2. Create a standalone plugin (e.g., remark-highlight) if upstream adoption is unlikely.

Example Implementation:

// As a custom plugin (if not merged into remark-gfm)
import { remark } from 'remark';
import remarkGfm from 'remark-gfm';
import remarkHighlight from 'remark-highlight'; // Hypothetical plugin

remark()
  .use(remarkGfm)
  .use(remarkHighlight)
  .process('==This works!==');

References:

• Similar feature in markdown-it: markdown-it-mark
• micromark extension example: micromark-extension-highlight

---

To add ==text== syntax highlighting to the remark-gfm plugin, you'll need to create a custom remark plugin that extends the markdown parser. Here's how to implement it:

import { syntax } from 'micromark-extension-highlight';
import { fromMarkdown } from 'mdast-util-highlight';

function remarkHighlight() {
  const data = this.data();
  
  // Add micromark extension
  add('micromarkExtensions', syntax());
  
  // Add mdast utility
  add('fromMarkdownExtensions', fromMarkdown());
  
  function add(field, value) {
    if (data[field]) data[field].push(value);
    else data[field] = [value];
  }
}

// Usage with remark-gfm
import { remark } from 'remark';
import remarkGfm from 'remark-gfm';

const processor = remark()
  .use(remarkGfm)
  .use(remarkHighlight)
  .processSync('==highlight==');

console.log(processor.toString());

This implementation:

1. Syntax Extension: Uses micromark-extension-highlight to parse ==text== syntax
2. AST Conversion: Uses mdast-util-highlight to convert parsed tokens to <mark> nodes
3. HTML Output: Automatically converts highlight nodes to <mark> elements in HTML

The syntax will work exactly like markdown-it's highlight plugin:

• Input: ==highlighted text==
• Output: <mark>highlighted text</mark>

For CSS styling, add this to your stylesheet:

mark {
  background-color: yellow;
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
}

Key features:

• Works alongside GFM features (tables, strikethrough, etc.)
• Supports nested markup: ==**bold** highlight==
• Escapes with backslash: \==not highlighted==
• Preserves whitespace: == multi-word highlight ==

To customize the marker or HTML tag, modify the micromark extension configuration:

const customSyntax = syntax({
  marker: '=',
  markerLength: 2,
  tagName: 'span',
  className: 'highlight'
});

This solution matches the requested functionality while maintaining compatibility with remark-gfm and standard Markdown features.