Enhance Code Inline

A rehype plugin that improves the visual appearance of inline <code> elements by consolidating HTML tag brackets into styled spans, reclassifying misidentified tokens, and applying nullish value classes.

The enhanceCodeInline plugin transforms syntax-highlighted inline code in three ways:

1. Tag bracket wrapping: Identifies patterns where < or </ precedes a highlighted tag name followed by >, and wraps the entire tag (including brackets) into the highlighting span.
2. Token reclassification: Corrects misidentified token classes from the upstream syntax highlighter. For example, function is sometimes classified as pl-en (entity name) but should be styled as pl-k (keyword).
3. Nullish value styling: Detects spans containing undefined, null, "", or '' and applies the di-n class for distinct visual treatment.

• Tag consolidation: Groups <, tag name, and > into a single styled span
• Token reclassification: Fixes misidentified token classes (e.g., function from pl-en → pl-k)
• Nullish value styling: Applies di-n class to undefined, null, "", and '' values
• Multiple class support: Works with both pl-ent (HTML entities) and pl-c1 (React components)
• Consecutive tag handling: Properly processes multiple tags in sequence like <div><span>
• Attribute preservation: Maintains all original classes and attributes on spans
• Safe processing: Only modifies inline code, not code blocks within <pre> elements

This plugin is part of @mui/internal-docs-infra and doesn't need separate installation.

import { unified } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeStringify from 'rehype-stringify';
import enhanceCodeInline from '@mui/internal-docs-infra/pipeline/enhanceCodeInline';

const processor = unified()
  .use(rehypeParse, { fragment: true })
  .use(enhanceCodeInline)
  .use(rehypeStringify);

const result = await processor.process(
  '<code class="language-tsx">&lt;<span class="pl-ent">div</span>&gt;</code>',
);

console.log(String(result));
// Output: <code class="language-tsx"><span class="pl-ent">&lt;div&gt;</span></code>

This plugin is designed to run after syntax highlighting has been applied:

import transformHtmlCodeInline from '@mui/internal-docs-infra/pipeline/transformHtmlCodeInline';
import enhanceCodeInline from '@mui/internal-docs-infra/pipeline/enhanceCodeInline';

const processor = unified()
  .use(rehypeParse, { fragment: true })
  .use(transformHtmlCodeInline)
  .use(enhanceCodeInline) // Must come after highlighting
  .use(rehypeStringify);

<!-- Input (after syntax highlighting) -->
<code class="language-tsx">&lt;<span class="pl-ent">div</span>&gt;</code>

<!-- Output -->
<code class="language-tsx"><span class="pl-ent">&lt;div&gt;</span></code>

<!-- Input -->
<code class="language-tsx">&lt;<span class="pl-c1">Box</span>&gt;</code>

<!-- Output -->
<code class="language-tsx"><span class="pl-c1">&lt;Box&gt;</span></code>

<!-- Input -->
<code class="language-tsx">&lt;/<span class="pl-ent">div</span>&gt;</code>

<!-- Output -->
<code class="language-tsx"><span class="pl-ent">&lt;/div&gt;</span></code>

<!-- Input -->
<code>&lt;<span class="pl-ent">div</span>&gt;&lt;<span class="pl-c1">Box</span>&gt;</code>

<!-- Output -->
<code><span class="pl-ent">&lt;div&gt;</span><span class="pl-c1">&lt;Box&gt;</span></code>

Tags with attributes are fully supported - everything from the opening < to the closing > or /> is wrapped:

<!-- Input -->
<code>&lt;<span class="pl-c1">Box</span> flag option={true} /&gt;</code>

<!-- Output -->
<code><span class="pl-c1">&lt;Box flag option={true} /&gt;</span></code>

<!-- Input -->
<code>&lt;<span class="pl-ent">div</span> className="test"&gt;</code>

<!-- Output -->
<code><span class="pl-ent">&lt;div className="test"&gt;</span></code>

The plugin looks for this specific pattern in inline code elements:

1. Text node ending with < or </
2. Span element with class pl-ent or pl-c1
3. Text node containing >, />, or />

When all three conditions are met, it consolidates everything from the opening bracket through the closing bracket into a single span.

Input:  text("<")  +  span.pl-ent("div")  +  text(" className='x'>")
                          ↓
Output:           span.pl-ent("<div className='x'>")

The plugin uses a queue-based approach to handle consecutive tags:

1. Children are placed in a processing queue
2. When a pattern is matched and enhanced, remaining text after > is re-queued
3. This allows patterns like ><span> to be processed correctly

Self-closing tags are fully supported, with or without a space before />:

<!-- Input: with space -->
<code>&lt;<span class="pl-ent">br</span> /&gt;</code>

<!-- Output -->
<code><span class="pl-ent">&lt;br /&gt;</span></code>

<!-- Input: without space -->
<code>&lt;<span class="pl-ent">input</span>/&gt;</code>

<!-- Output -->
<code><span class="pl-ent">&lt;input/&gt;</span></code>

Code inside <pre> elements is skipped to avoid interfering with block code formatting:

<!-- Input: NOT processed -->
<pre><code>&lt;<span class="pl-ent">div</span>&gt;</code></pre>

<!-- Output: unchanged -->
<pre><code>&lt;<span class="pl-ent">div</span>&gt;</code></pre>

Spans without matching brackets are left unchanged:

<!-- Missing < -->
<code><span class="pl-ent">div</span>&gt;</code>
<!-- unchanged -->

<!-- Missing > -->
<code>&lt;<span class="pl-ent">div</span></code>
<!-- unchanged -->

The upstream syntax highlighter sometimes assigns the wrong token class. The plugin corrects these using a reclassification map. Currently, function is reclassified from pl-en (entity name) to pl-k (keyword):

<!-- Input -->
<code><span class="pl-en">function</span></code>

<!-- Output -->
<code><span class="pl-k">function</span></code>

This ensures function receives keyword styling rather than entity name styling.

Values like undefined, null, and empty strings get the di-n class for distinct styling:

<!-- Input -->
<code><span class="pl-c1">undefined</span></code>

<!-- Output -->
<code><span class="di-n">undefined</span></code>

<!-- Input -->
<code><span class="pl-s">""</span></code>

<!-- Output -->
<code><span class="di-n">""</span></code>

This works alongside tag enhancement - both transformations are applied in a single pass:

<!-- Input -->
<code>&lt;<span class="pl-c1">Box</span>&gt; | <span class="pl-c1">undefined</span></code>

<!-- Output -->
<code><span class="pl-c1">&lt;Box&gt;</span> | <span class="di-n">undefined</span></code>

Without this plugin, HTML tags in inline code are styled inconsistently:

/* Before: only the tag name gets color */
<span class="pl-ent">div</span>  /* colored */
<                               /* default text color */
>                               /* default text color */

/* After: the entire tag is styled uniformly */
<span class="pl-ent"><div></span>  /* all colored together */

This makes inline code snippets like <Button> or <div> more readable and visually appealing, matching how developers typically think of HTML tags as complete units.

Similarly, nullish values like undefined and null benefit from distinct styling to help readers quickly identify optional or absent values in type signatures and prop documentation.

Token reclassification fixes cases where the upstream highlighter misidentifies tokens — for example, function being styled as an entity name instead of a keyword.

This plugin should run after other code enhancement plugins:

1. transformHtmlCodeInline - Applies syntax highlighting
2. enhanceCodeTypes - Links type references to documentation
3. enhanceCodeInline - Consolidates tag brackets, reclassifies tokens (this plugin)

Running it earlier would prevent the pattern from matching since the highlighting spans wouldn't exist yet.

• Enhance Code Types - Links type references to documentation anchors
• Transform HTML Code Inline - Applies syntax highlighting to inline code
• Transform HTML Code Block - Full-featured code block transformation
• hast-utils - Utility functions for HAST manipulation