Resolved

Markdown text segments render as flat single-color without syntax highlighting

Python
Markdown
Syntax Highlighting
Video Rendering
Text Processing
Pygments
Frontend
UI/UX

Video renderer treated non-code markdown segments as plain text with no visual hierarchy | Code blocks had rich Pygments tokenization while headings, labels, and lists appeared monotonous

Issue

Markdown content in generated videos lacked visual differentiation, rendering as monotonous single-color blocks (green) without semantic hierarchy. This undermined readability, as headings, labels, bold/italic text, and inline code were indistinguishable from body text, creating poor visual contrast compared to syntax-highlighted code blocks.

Culprit

The video rendering system treated all non-code text uniformly, applying a single default color (#d5ff80) and bypassing semantic analysis entirely. Key limitations included:

  • No markdown-specific tokenization to distinguish syntax elements.
  • Lack of detection for patterns like ‘Label:’ prefixes or heading levels.
  • Hardcoded color application without a structured color mapping system.
  • Text segments were processed outside the code tokenization pipeline.

Solution

A dual-mode syntax highlighting system was implemented to:

  • Tokenize markdown content using a custom color scheme for headings, labels, bold/italic text, and inline code.
  • Detect semantic patterns (e.g., ‘Label: Value’) and apply distinct styling (turquoise for labels).
  • Integrate text segments into the tokenization pipeline, mirroring the treatment of code blocks.
  • Optimize rendering performance by adjusting frame rates, TTS speed, and font sizing for visual clarity and stability.

This transformation improved markdown content visualization, creating a cohesive visual hierarchy equivalent to code blocks while preserving performance.