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.

Headings

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

Text Formatting

Bold

Format:

**Text**

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

Text

</div> </div>

Italic

Format:

*Text*

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

Text

</div> </div>

Bold and Italic

Format:

***Text***

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

Text

</div> </div>

Strikethrough

Format:

~~Text~~

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

~~Text~~

</div> </div>

Lists

Unordered Lists

Format:

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

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

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

</div> </div>

Ordered Lists

Format:

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

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

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

</div> </div>

Task Lists

Format:

- [x] Completed task
- [ ] Pending task

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

Completed task
Pending task

</div> </div>

Code

Inlince Code

Format:

This is `inline code`.

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

This is inline code.

</div> </div>

Code Block

Format:

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

Note: Please remove \ from the syntax.

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

javascript

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

</div> </div>

Block Quotes

Format:

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

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

Single level quote

Nested quote

Deep nested quote

</div> </div>

Links and Images

Links

Format:

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

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

Link Text

</div> </div>

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)

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

</div> </div>

Tables

Format:

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

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

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

</div> </div>

Horizontal Rules

Format:

--- 
OR
___
OR
***

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

</div> </div>

HTML Content

Format:

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

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

<div style = {{ color: 'blue'}}> Colored text </div> <table> <tr> <td>HTML Table</td> </tr> </table> </div> </div>

Footnotes

Format:

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

[^1]: This is the footnote.

</div> <div style = {{ width:'20%' }} > </div> <div style = {{ width:'40%' }} >

Result:

Here's a sentence with a footnote¹.

</div> </div>

This is the footnote. ↩