> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-en/conversations/web-chat/markdown-rendering.md).

# Markdown Rendering

This article introduces the message content rendering optimization features in the WebChat window, making AI Assistant responses clearer and easier to read.

## What Is Message Content Rendering?

Message content rendering refers to how WebChat converts the AI Assistant's text responses into the visual presentation that users see. AI Assistant responses may include:

* **Plain text**: General text descriptions
* **Markdown formatting**: Headers, lists, bold, italics, and other formatting
* **Code blocks**: Code examples or commands
* **Tables**: Structured data presentation
* **Links**: External links or reference materials

Good rendering makes this content easier to read and understand.

## Optimization Items

### 1. Fully Upgraded Markdown Rendering Engine

WebChat now uses an enhanced Markdown rendering engine that supports richer formatting and more precise rendering.

#### Supported Markdown Formats

| Format Type     | Syntax Example                | Rendering Description                            |
| --------------- | ----------------------------- | ------------------------------------------------ |
| **Headers**     | `# Heading 1`, `## Heading 2` | Clear heading hierarchy for content segmentation |
| **Bold**        | `**bold text**`               | Emphasizes key content                           |
| **Italic**      | `*italic text*`               | Secondary emphasis or supplementary notes        |
| **Lists**       | `- Item 1`, `1. Item 1`       | Ordered or unordered lists                       |
| **Inline code** | `` `code` ``                  | Inline code or commands                          |
| **Code blocks** | ` ```code``` `                | Multi-line code with syntax highlighting support |
| **Tables**      | `\| Column 1 \| Column 2 \|`  | Structured data display                          |
| **Links**       | `[link text](URL)`            | Clickable hyperlinks                             |
| **Blockquotes** | `> quote content`             | Quotations or special notes                      |

### 2. Dark Mode Visual Optimization

When end users' devices use a dark theme, WebChat automatically adjusts the visual presentation of message content to ensure clarity and readability on dark backgrounds.

#### Dark Mode Adjustments

1. **Text and background contrast**: Automatically adjusts text color for clear display on dark backgrounds
2. **Message feedback buttons**: Adjusts button colors and borders to remain visible in dark mode
3. **Table visuals**: Adjusts table borders and background colors for improved readability
4. **Blockquote backgrounds**: Adjusts blockquote background tones to differentiate from the main content

### 3. Streaming Rendering Performance Improvements

WebChat uses real-time streaming to display AI Assistant responses, so users don't need to wait for the full response to be generated. This update optimizes streaming rendering performance:

* **Faster rendering**: Markdown formatting renders more quickly, reducing perceived latency
* **Improved smoothness**: Text appears character by character more smoothly, with no noticeable lag
* **Format accuracy**: Markdown formatting renders correctly even during the streaming process

{% hint style="success" %} Users can see the already-generated content in real time while the AI Assistant is still composing its response, without waiting for the complete answer. {% endhint %}

## Practical Use Cases

### 💻 Technical Documentation Assistant

**Scenario**: When developers ask for code examples, the AI Assistant provides responses with code blocks.

**Optimization Effects**:

* Code blocks support syntax highlighting for easier reading
* Code displays clearly in dark mode
* Developers can directly copy and use the code

**Example Response**:

````
Here's an example of reading a CSV file in Python:

```python
import pandas as pd

df = pd.read_csv('data.csv')
print(df.head())
````

This code reads a CSV file and displays the first 5 rows.

```

### 📊 Data Analysis Assistant

**Scenario**:
Users ask for sales data analysis results, and the AI Assistant presents them in table format.

**Optimization Effects**:
* Tables are clearly formatted with aligned columns
* Table borders and background colors adapt to dark mode
* Large datasets remain readable

**Example Response**:
```

Here are the top three selling products this quarter:

| Product Name | Units Sold | Revenue  |
| ------------ | ---------- | -------- |
| Product A    | 1,250      | $125,000 |
| Product B    | 980        | $98,000  |
| Product C    | 856        | $85,600  |

Sales data as of the 20th of this month.

```

### 📚 Teaching Assistant

**Scenario**:
Students ask about learning steps, and the AI Assistant explains using an ordered list.

**Optimization Effects**:
* List items are clearly numbered
* Heading hierarchy is distinct, making step order easy to follow
* Key content is emphasized with bold text

**Example Response**:
```

## Recommended Steps for Learning Python

1. **Basic Syntax**
   * Variables and data types
   * Conditionals and loops
2. **Advanced Concepts**
   * Functions and modules
   * Object-oriented programming
3. **Hands-on Practice**
   * Complete small projects
   * Contribute to open source

Each step is recommended to take 2-3 weeks of study.

```

## Administrator Settings

### Markdown Rendering Settings

WebChat's Markdown rendering is enabled by default. If your use case doesn't require Markdown formatting, you can adjust it in the settings:

1. Go to "Publish" → "WebChat Settings"
2. Find the "Message Rendering" settings section
3. Select the rendering mode:
   * **Full Markdown**: Supports all Markdown formats (default)
   * **Basic formatting**: Supports only bold, italic, and links
   * **Plain text**: No formatting rendered

### Dark Mode Settings

Dark mode activates automatically based on user device settings. If you want WebChat to use a fixed light or dark theme:

1. Go to "Publish" → "WebChat Settings"
2. Find the "Appearance" settings section
3. Select the theme mode:
   * **Auto**: Based on user device settings (default)
   * **Light**: Always use the light theme
   * **Dark**: Always use the dark theme

<div data-gb-custom-block data-tag="hint" data-style='info'>

For detailed WebChat appearance settings, refer to: [Connect Chat Platform: Website](website.md)

</div>

## Performance Impact

### Rendering Performance

Performance impact of the optimized Markdown rendering engine:

* **Load time**: First load increases by approximately 0.1-0.2 seconds (virtually unnoticeable)
* **Memory usage**: Increases by approximately 1-2 MB (minimal impact on modern browsers)
* **Rendering speed**: Approximately 30% faster compared to the previous version

### Compatibility

The optimized rendering engine supports the following browsers:

* Chrome / Edge (version 90+)
* Firefox (version 88+)
* Safari (version 14+)
* Mobile browsers (iOS Safari, Android Chrome)

<div data-gb-custom-block data-tag="hint" data-style='warning'>

Older browser versions may not correctly display some Markdown formats. It is recommended to prompt users to update their browsers.

</div>

## FAQ

### Q1: Why doesn't my AI Assistant's response have formatting?

Possible causes:
* The AI Assistant is not using Markdown syntax
* Markdown rendering is disabled
* The browser version is too old

### Q2: What if some content is hard to read in dark mode?

Try the following:
1. Clear the browser cache
2. Refresh the page
3. Ensure you are using the latest browser version

### Q3: Can I customize the syntax highlighting colors for code blocks?

Currently, syntax highlighting colors are fixed. Future versions may support customization.

### Q4: How is long table content displayed?

Tables automatically support horizontal scrolling to ensure complete content display without affecting the layout of other content.

### Q5: Will rendering optimization affect display on mobile devices?

No. Rendering optimization has been adapted for mobile devices to ensure clear display on small screens as well.
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-en/conversations/web-chat/markdown-rendering.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.