Day 2: Automated Markdown-to-Web Content Engine

1. Technical Requirements for AI Course Content

Rendering technical AI engineering documentation requires far more than basic Markdown (markdown -> html):

1. KaTeX LaTeX Math Equations:
   • Inline math: $W_0 \in \mathbb{R}^{d \times k}$
   • Display equations: $\mathcal{L}_{\text{DPO}}(\theta; \pi_{\text{ref}}) = -\mathbb{E}_{(x, y_w, y_l)} \left[ \log \sigma \left( \beta \log \frac{\pi_\theta(y_w \mid x)}{\pi_{\text{ref}}(y_w \mid x)} - \beta \log \frac{\pi_\theta(y_l \mid x)}{\pi_{\text{ref}}(y_l \mid x)} \right) \right]$
2. Mermaid Architectural Diagrams:
   • Fenced code blocks (mermaid ... ) must be intercepted and wrapped in <div class="mermaid"> for client-side SVG rendering.
3. GitHub-Style Alerts:
   • > [!NOTE], > [!TIP], > [!WARNING], > [!CAUTION] must render into styled alert callout boxes.
4. Interactive Code Fences:
   • Syntax-highlighted code blocks with language tags (python, bash, json) and "Copy Code" pills.
5. Dynamic Table of Contents (TOC):
   • Extracted hierarchical headings (h2, h3) with auto-generated anchor links for in-page navigation.

2. Security: XSS Sanitization & Safe Rendering

When rendering user-facing content from markdown, raw <script> tags, malicious javascript: URI links, or onload handlers must be neutralized. A robust engine sanitizes all incoming HTML while preserving valid SVG diagrams, code fences, and LaTeX math spans.

In Simple English: Rendering Math (KaTeX) + Blocking Security XSS Attacks

In Web Markdown Engines, raw text passes through a clean pipeline:

1. Parse Markdown headings/tables (remark) -> parse $...$ math formulas (remark-math -> rehype-katex) -> sanitize HTML tags (XSS Defense)!
2. Why Sanitization Matters: If you render user-submitted Markdown or AI outputs via raw dangerouslySetInnerHTML, an attacker can inject <script>stealCookies()</script>! Always sanitize or compile cleanly via safe React AST nodes (react-markdown).