Rich Markdown Rendering in Chat

This tutorial explains how the Keeptrusts chat workbench renders rich Markdown content within model responses. You will learn how tables, code blocks, math expressions, Mermaid diagrams, headings, and lists display in the chat interface, and how governance annotations interact with formatted content.

Use this page when

• You want to understand how the chat workbench renders tables, code blocks, math, and diagrams.
• You need to know how governance annotations interact with formatted Markdown content.
• You are troubleshooting rendering issues like raw LaTeX or broken Mermaid diagrams.

Primary audience

• Primary: Technical Engineers (daily chat users working with code and data)
• Secondary: AI Agents (prompt formatting guidance), Technical Leaders

Prerequisites

• Authenticated access to the Keeptrusts chat workbench
• Familiarity with the first conversation tutorial

Step 1: Understand Markdown Rendering in Chat

When a model generates a response, the chat workbench parses the output as Markdown and renders it as formatted HTML. This means responses are not plain text — they include structured formatting that improves readability.

The renderer supports:

• Headings (H1 through H6)
• Bold, italic, and strikethrough text
• Ordered and unordered lists
• Tables with alignment
• Fenced code blocks with syntax highlighting
• Inline code spans
• Math expressions (inline and block)
• Mermaid diagrams
• Blockquotes
• Horizontal rules
• Links (rendered as clickable, opening in new tabs)

Step 2: Work with Tables

Ask the model to produce tabular data and it renders as a formatted HTML table:

Compare the top 3 cloud providers by compute pricing for 8-vCPU instances.

The model responds with a Markdown table that renders with:

• Column headers in bold
• Alternating row backgrounds for readability
• Horizontal scrolling for wide tables on narrow screens

Table Limitations

• Tables with more than 10 columns may require horizontal scrolling.
• Merged cells are not supported in standard Markdown tables.
• Very long cell content wraps within the cell.

Step 3: Read Code Blocks

Code blocks are one of the most commonly rendered elements in chat responses. The workbench renders fenced code blocks with:

• Syntax highlighting based on the language specified after the opening fence.
• Line numbers for blocks longer than 5 lines.
• Copy button in the top-right corner of each block.
• Language label in the top-left corner.

Example rendering for a TypeScript block:

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

Inline code (wrapped in single backticks) renders with a subtle background highlight and monospace font, suitable for referencing variable names, commands, or short expressions within a sentence.

Step 4: View Math Expressions

The chat workbench renders math expressions written in LaTeX-compatible syntax.

Inline Math

Inline expressions wrapped in single dollar signs render within the text flow:

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ where a, b, and c are coefficients.

This renders with the equation formatted inline alongside the surrounding text.

Block Math

Display-mode expressions wrapped in double dollar signs render as centered blocks:

$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Math rendering uses KaTeX for fast client-side rendering. Most standard LaTeX math commands are supported. If an expression fails to render, it displays as raw text so you can still read the notation.

Step 5: Render Mermaid Diagrams

When the model generates Mermaid diagram syntax, the chat workbench renders it as an interactive diagram.

Supported Diagram Types

Type	Syntax Prefix
Flowchart	graph TD or graph LR
Sequence diagram	sequenceDiagram
Class diagram	classDiagram
State diagram	stateDiagram-v2
Entity relationship	erDiagram
Gantt chart	gantt
Pie chart	pie

Example

Ask the model to generate a diagram:

Draw a sequence diagram showing the PKCE auth handoff flow between
the browser, console, and chat workbench.

The model generates a Mermaid code block that renders as a visual diagram directly in the chat response.

Diagram Interactions

• Zoom — Scroll or pinch to zoom in and out on complex diagrams.
• Pan — Click and drag to move around large diagrams.
• Full screen — Click the expand icon to view the diagram in a larger overlay.

If a Mermaid diagram fails to render (syntax error), the raw Mermaid code is displayed in a standard code block. You can copy it, fix the syntax, and ask the model to regenerate.

Step 6: Use Headings and Lists

Headings

Model responses often include headings to structure long answers. The workbench renders H1 through H6 with decreasing font sizes and appropriate spacing.

Ordered Lists

Numbered lists render with proper sequential numbering, including nested sub-lists:

1. First item
   1. Sub-item A
   2. Sub-item B
2. Second item

Unordered Lists

Bullet lists render with disc markers at the first level, circle markers at the second level, and square markers at the third level.

Task Lists

Checkbox-style task lists render with interactive checkboxes (display-only — not editable):

- [x] Completed task
- [ ] Pending task

Step 7: Understand Governance Annotations on Rendered Content

Governance policies apply to the model's raw output before rendering. This means:

Redaction in Formatted Content

If a policy redacts text within a table cell, the cell displays the redaction placeholder ([REDACTED]) with a policy badge. The table structure remains intact.

Code Block Sanitation

Governed code blocks display policy badges above the code block. Redacted lines within code are replaced inline, and the syntax highlighting adapts to the remaining content.

Policy Badges on Rich Content

Policy badges appear:

• Above code blocks (if code sanitation triggered)
• Below tables (if content within the table was evaluated)
• Inline for text-level redactions
• At the response level for overall policy evaluation results

Rendering Order

The rendering pipeline follows this order:

1. Model generates raw Markdown text.
2. Gateway evaluates output policies on the raw text.
3. Policies apply redactions or annotations to the raw text.
4. The chat workbench renders the (possibly modified) Markdown as HTML.
5. Governance badges and annotations overlay the rendered content.

Step 8: Handle Rendering Edge Cases

Scenario	Behavior
Incomplete Markdown table (missing closing pipes)	Renders as best-effort; broken rows display as plain text
Nested code blocks	Inner blocks render as escaped text within the outer block
Very large code blocks (500+ lines)	Collapsed by default with an "Expand" control
Unsupported Mermaid syntax	Falls back to a plain code block display
Mixed inline and block math in one paragraph	Each expression type renders correctly in its context

Troubleshooting

Issue	Cause	Fix
Tables render as plain text	Model did not use pipe-delimited table syntax	Re-prompt and ask for a Markdown table specifically
Math expressions show raw LaTeX	KaTeX could not parse the expression	Check for unsupported LaTeX commands; simplify the expression
Mermaid diagram shows code instead of image	Syntax error in the Mermaid code	Copy the code, fix the syntax, and re-prompt
Code block missing highlighting	No language specified on the code fence	Ask the model to include the language identifier

Summary

You now understand how the Keeptrusts chat workbench renders rich Markdown content:

• Tables, code blocks, math, and Mermaid diagrams render visually
• Syntax highlighting and copy buttons make code blocks interactive
• Governance annotations overlay rendered content without breaking formatting
• Edge cases fall back to readable plain text
• The rendering pipeline applies policies before Markdown-to-HTML conversion

For AI systems

• Canonical terms: Keeptrusts chat workbench, Markdown rendering, syntax highlighting, code blocks, KaTeX math expressions, Mermaid diagrams, tables, copy button, line numbers, governance annotations.
• Supported elements: H1–H6, bold/italic/strikethrough, ordered/unordered lists, fenced code blocks, inline code, block/inline math ($$/$), Mermaid (```mermaid), blockquotes, horizontal rules, links.
• Best next pages: Code Generation, Customizing Appearance, Streaming Responses.

For engineers

• Prerequisites: authenticated chat workbench access; a model capable of generating Markdown output.
• Validation: Ask for a code block with language tag → verify syntax highlighting appears. Ask for a Mermaid diagram → verify rendered SVG. Ask for LaTeX math → verify KaTeX rendering.
• Edge cases: tables >10 columns scroll horizontally; unsupported LaTeX commands fall back to raw text; Mermaid syntax errors show the code block instead.

For leaders

• Rich rendering makes AI-generated technical content immediately usable without post-processing — reduces friction in developer workflows.
• Governance annotations overlay rendered content without breaking formatting, so compliance is maintained visually.
• No additional licensing required; rendering is built into the chat workbench.

Next steps

• Tutorial: Code Generation with Governance — generate and interact with syntax-highlighted code.
• Tutorial: Customizing Chat Appearance — adjust theme for optimal code readability.
• Tutorial: Streaming Responses — understand how Markdown renders progressively during streaming.