ToolJet/docs/versioned_docs/version-3.0.0-LTS/widgets/chat/markdown.md

id	title
markdown	Supported Markdown Syntax

In ToolJet, the Chat Component supports Markdown formatting for both responses and messages. This can be used enhance text formatting using Markdown syntax, making conversations more readable and structured.

Supported Markdown Syntax

Headings

<div style = {{ width:'200px' }}> Heading	<div style = {{ width:'200px' }}> Format
H1	# Heading
H2	## Heading
H3	### Heading
H4	#### Heading
H5	##### Heading
H6	###### Heading

Text Formatting

Bold

Format:

**Text**

Result:

Text

Italic

Format:

*Text*

Result:

Text

Bold and Italic

Format:

***Text***

Result:

Text

Strikethrough

Format:

~~Text~~

Result:

Text

Lists

Unordered Lists

Format:

- Item 1
- Item 2
  - Nested Item 2.1
  - Nested Item 2.2

Result:

• Item 1
• Item 2
  • Nested Item 2.1
  • Nested Item 2.2

Ordered Lists

Format:

1. First Item
2. Second Item
   1. Nested Item 2.1
   2. Nested Item 2.2

Result:

1. First Item
2. Second Item
   1. Nested Item 2.1
   2. Nested Item 2.2

Task Lists

Format:

- [x] Completed task
- [ ] Pending task

Result:

• Completed task
• Pending task

Code

Inlince Code

Format:

This is `inline code`.

Result:

This is inline code.

Code Block

Format:

\```javascript
const hello = "world";
console.log(hello);
\```

Note: Please remove \ from the syntax.

Result:

const hello = "world";
console.log(hello);

Block Quotes

Format:

> Single level quote
>> Nested quote
>>> Deep nested quote

Result:

Single level quote

Nested quote

Deep nested quote

Links and Images

Links

Format:

[Link Text](https://example.com)

Result:

Link Text

Image

Format:

![Image Alt Text](https://images.unsplash.com/photo-1509966756634-9c23dd6e6815?q=80&w=3176&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

Result:

Tables

Format:

| Header 1 | Header 2 |
|-----------|-----------|
| Cell 1    | Cell 2    |
| Cell 3    | Cell 4    |

Result:

Header 1	Header 2
Cell 1	Cell 2
Cell 3	Cell 4

Horizontal Rules

Format:

--- 
OR
___
OR
***

Result:

---

HTML Content

Format:

<div style="color: blue;">
  Colored text
</div>
<table>
  <tr>
    <td>HTML Table</td>
  </tr>
</table>

Result:

Colored text

HTML Table

Footnotes

Format:

Here's a sentence with a footnote[^1].

[^1]: This is the footnote.

Result:

Here's a sentence with a footnote¹.

---

1. This is the footnote. ↩︎