Markdown & LaTeX Rendering
Rich text formatting with Streamdown—math, code, diagrams, and more in AI explanations
Overview
Starting in v1.5.0, Quanta uses Streamdown for markdown and LaTeX rendering in AI explanations. The previous KaTeX-only setup is replaced with broader formatting support: syntax-highlighted code blocks, Mermaid diagrams, tables, task lists, and full GitHub Flavored Markdown.
Streamdown Integration
Streamdown is a modern markdown renderer with built-in streaming for progressive AI responses.
Supported Formatting
LaTeX Mathematics
Render math with standard LaTeX syntax:
Use single dollar signs for inline math: $E=mc^2$ renders as
Ideal for short expressions in text.
Use double dollar signs for block equations:
$$
\int_{a}^{b} f(x) \, dx = F(b) - F(a)
$$Renders as centered block math.
Examples:
- Quadratic formula:
$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$ - Pythagorean theorem:
$a^2 + b^2 = c^2$ - Summation:
$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$
Enhanced AI Awareness
The AI now knows it can use LaTeX for mathematical explanations. It will automatically format formulas for better readability.
Syntax-Highlighted Code
Streamdown supports 100+ programming languages with syntax highlighting:
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)const factorial = (n) => {
return n <= 1 ? 1 : n * factorial(n - 1);
};SELECT users.name, COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id
GROUP BY users.id;Supported Languages:
- Programming: Python, JavaScript, TypeScript, Java, C++, C#, Go, Rust, Ruby, PHP
- Web: HTML, CSS, JSX, Vue, Svelte
- Data: SQL, JSON, YAML, XML
- Shell: Bash, PowerShell, Zsh
- And 100+ more!
Mermaid Diagrams
Create diagrams directly in AI explanations:
The AI can use Mermaid diagrams to provide visual explanations for complex concepts, workflows, and system architectures.
GitHub Flavored Markdown
Full support for GFM including:
Tables
Create structured data displays for comparisons and reference information.
Task Lists
Use checkboxes for step-by-step instructions and checklists in explanations.
Strikethrough
Format text with strikethrough for corrections and emphasis.
Autolinks
URLs automatically become clickable links for easy reference access.
Table Example:
| Feature | Supported | Notes |
|---------|-----------|-------|
| LaTeX | ✅ | Inline and block |
| Code | ✅ | 100+ languages |
| Diagrams | ✅ | Mermaid charts |Task List Example:
- [x] Completed step
- [ ] Pending step
- [ ] Future stepReact-Based Markdown Injection
Quanta uses a React-based injection system to render markdown and LaTeX directly in quiz elements:
Performance Note
React-based rendering is lightweight and performant, but very complex diagrams may take a moment to render on initial page load.
Streaming Support
Streamdown includes built-in streaming for progressive markdown rendering:
How It Works:
- AI begins generating response
- Markdown chunks stream to Quanta
- Content renders progressively as it arrives
- User sees explanations build in real-time
Benefits:
- Faster perceived performance - see content immediately
- Better UX - watch explanations develop naturally
- Efficient rendering - no waiting for complete response
Progressive rendering is most noticeable with longer, detailed explanations.
AI Rendering Awareness
The AI has been enhanced with detailed knowledge of rendering capabilities:
What the AI Knows:
- It can use LaTeX for all mathematical notation
- 100+ programming languages are supported for code blocks
- Mermaid diagrams are available for visual explanations
- Tables, task lists, and GFM features work consistently
- Content renders cleanly in the extension
Impact:
- Better explanations - AI uses appropriate formatting
- Clearer communication - Visual aids when helpful
- Professional presentation - Properly formatted technical content
Example
If you ask about a sorting algorithm, the AI might provide:
- Python code with syntax highlighting
- A flowchart Mermaid diagram
- Complexity analysis with LaTeX notation
- A comparison table of different algorithms
Comparison: Streamdown vs KaTeX
v1.4.4 and earlier:
- ✅ LaTeX math rendering
- ❌ No code syntax highlighting
- ❌ No Mermaid diagrams
- ❌ Limited markdown support
- ❌ No streaming capability
v1.5.0 and later:
- ✅ LaTeX math rendering
- ✅ Syntax-highlighted code (100+ languages)
- ✅ Mermaid diagrams
- ✅ Full GitHub Flavored Markdown
- ✅ Built-in streaming support
- ✅ React-based injection system
Best Practices
Ask for Visual Aids
Request diagrams or flowcharts for complex questions. The AI can generate Mermaid diagrams.
Expect Formatted Math
Math-heavy questions receive LaTeX formatting automatically.
Request Code Examples
Ask for code snippets—they render with syntax highlighting.
Use Detailed Prompts
Mention if you want specific formatting (e.g., "explain with a diagram" or "show code examples").
Troubleshooting
Technical Details
Renderer: Streamdown (modern markdown renderer)
Math Engine: LaTeX via Streamdown
Code Highlighting: 100+ language support
Diagram Engine: Mermaid.js integration
Markdown Flavor: GitHub Flavored Markdown (GFM)
Injection: React-based component system
Streaming: Built-in progressive rendering
Next Steps
- Combine rich formatting with Answer Vault community answers
- Use with AI Providers for best explanation quality
- Learn about Session Memory for contextual formatted responses
Last updated on