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.