# Rendering code in user prompts on Chat UI

## Overview

This documentation explains how to include code snippets in **your own messages** in Chat. The Chat UI renders user prompts as Markdown — wrap code in backticks to display it correctly.

## Who is it for

This feature is designed for:

- **Developers** sharing a function, command, or config snippet.
- **Analysts** pasting SQL or other programming language script fragments.
- **Anyone** asking a question that references specific code or syntax.

## Benefits

- **Readability**: Code is shown in a monospace font, distinct from normal text.
- **Accuracy**: Special characters (e.g. `<`, `>`, `&`) inside code fences are preserved.
- **Clarity**: Multi-line blocks stay structured instead of breaking across lines.

## Use Cases

- Ask about a bug by pasting the relevant function.
- Share a shell command or API request.
- Include a short variable name or flag inline in a sentence.

## Supported code syntax

Use standard Markdown backtick formatting only:

- **Inline code**: use a pair of single backticks ```code```
  
  Example: Use the `console.log()` function to debug.

- **Code block**: use a pair of triple backticks on their own lines
  
  Example:
  
  
  js
  
  
  ```
  function greet(name) {
  return `Hello, ${name}!`;
  }
  ```

**Optional:** Add a language name after the opening fence for syntax highlighting, e.g. ``````python```.

## Step-by-Step Guide

To render code in your Chat prompt, use Markdown backtick syntax.

### Key Points

1. **Inline code**:
   - Wrap short snippets in a pair of single backticks: ```myVariable```.  
2. **Code blocks**:
   - Open with ````````` on its own line, paste your code, then close with ````````` on a new line.
3. **Special characters**:
   - Keep `<`, `>`, and `&` inside backticks so they display correctly.

## Examples

### Inline command

```
Run `npm install` and then `npm start`.
```

### Single-line code

```
What does `const x = arr.filter(n => n > 0);` do?
```

### Multi-line block

````
Explain the following code:
```
SELECT id, name
FROM users
WHERE active = true;
```
````

### Code with angle brackets

```
Why does this fail? `<div class="item">` is not closing properly.
```

### Code block with language tag

````
```python
def add(a, b):
    return a + b
```
````

## Tips & Tricks

- Put the opening ````````` and closing ````````` on **separate lines** for multi-line blocks.
- Paste code as-is inside the fences — you do not need to escape characters inside a code block.
- For very long blocks, consider attaching a file instead of pasting the full source.

## Limitations

Code is only rendered reliably when you use the backtick formatting above. If you paste code as plain text (without backticks), correct rendering **cannot be guaranteed** — formatting, line breaks, and special characters may appear wrong.

- **No backticks**: code may look like normal text or special characters may be altered.
- **Unclosed fences**: the rest of the message may be treated as code.
- **Mixed formatting**: inconsistent use of single vs triple backticks can produce unexpected results.