Header Hierarchy Enhancement Demo

Resize window to see mobile vs desktop behavior. Each approach shows H4 → H5 → H6 nesting.

❌ CURRENT (Baseline)
The problem: H5 looks like body text, H6 is nearly invisible. No visual hierarchy cue.
[LOG-047] - Implementation Details

The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

A: Rainbow Left Borders
Desktop: Indented left borders like Indent Rainbow
Mobile: Flat borders + chevron prefix (› for H5, » for H6)
[LOG-047] - Implementation Details

The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

B: Colored Top Bars + Level Badge
Desktop & Mobile: Same behavior. Top border + small "H4/H5/H6" badge on right.
No indentation = zero horizontal space cost.
[LOG-047] - Implementation Details

The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

C: Pill Prefix Badges
Desktop & Mobile: Inline colored pill showing level (§4, §5, §6).
Inspired by GitHub issue labels. Minimal space, clear hierarchy.
[LOG-047] - Implementation Details

The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

D: True Indent Rainbow (VS Code Style)
Desktop: Stacked vertical colored lines showing full hierarchy depth.
Mobile: Gradient top border (purple|teal|gold segments).
[LOG-047] - Implementation Details

The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

✅ E: Hybrid Simple (Recommended)
Best balance: Colored underline (clear boundary) + subtle background fade + left border for H5/H6.
Mobile: Same styling, just tighter spacing. No horizontal space lost.
Why: Underline = clear "header ends here". Color = hierarchy. Left border = depth cue without heavy indent.
[LOG-047] - Implementation Details

The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

Desktop