# Customizing text output
## Elevate plain text with Markdown
Our chatbot messages are now equipped with Markdown support, allowing for seamless plain text formatting to enhance the visual appeal and clarity of your conversations.
Use markdown on input to craft the output in chatbot bubbles.
With this feature, you have the power to emphasize key points through **bold** or *italicized* text, create structured lists, format tables for organized data presentation, and even embed clickable links, images, or GIFs to enrich the user experience. Whether you're conveying information, adding a touch of style, or guiding users through a more interactive dialogue, our Markdown support ensures that your chatbot messages are not only informative but also visually engaging.
{% hint style="info" %}
**Wondering what Markdown is?** \
It's a simple markup language that allows you to format plain text. Here's a handy cheat sheet recommended by our linguists :point\_right: [Markdown Cheat Sheet](https://www.markdownguide.org/cheat-sheet/)! :point\_left: Make sure to add it to your bookmarks.
{% endhint %}
Elevate the communication experience with the flexibility and versatility that Markdown brings to plain text formatting in our chatbot messages: Bold text
Just select the text and press CTRL + B!
\
Or, using Markdown format, making text **bold** is achieved using double asterisks (\*\*). Simply wrap the desired text with these symbols to apply bold formatting.
Here's a quick guide:
{% code title="Copy this exemple" %}
```
I want the following text to be **bold**.
```
{% endcode %}
## Italic text
Just select the text and press CTRL + I!
\
Or, to apply *italic* formatting to text in Markdown, you can use single asterisks (\*). Simply enclose the desired text with these symbols to render it in italics.
Here's a straightforward guide:
{% code title="Copy this example" overflow="wrap" %}
```
This text is normal, but *this text will appear italicized.*
```
{% endcode %}
Underscored text
Just select the text and press CTRL + U!
Striketrough text
Adding a ~~strikethrough~~ effect to text in Markdown is a straightforward process. To implement strikethrough formatting, use two tilde characters (\~\~) before and after the text you want to strike through.
Here's a simple example:
{% code title="Example to copy" overflow="wrap" %}
```
~~This text will appear with a strikethrough.~~
```
{% endcode %}
Ordered list
Markdown makes it easy to organize content into **ordered lists**. Follow these simple steps to create a numbered list:
1. Start each list item with a number followed by a period (1., 2., 3., ...).
2. Leave a space after the period.
3. Write the text for each list item.
Here's an example:
{% code title="Example to copy" overflow="wrap" %}
```
My list:
1. First item
2. Second item
3. Third item
```
{% endcode %}
You can also create nested ordered lists by indenting **the nested list** items. \
For instance:
{% code title="Example to copy" overflow="wrap" %}
```
My list:
1. First item
1. Nested item 1
2. Nested item 2
2. Second item
3. Third item
```
{% endcode %}
Unordered list (bullet points)
Markdown provides a simple syntax for generating **unordered (bulleted) lists**. Follow these steps to create a list of items with bullet points:
* Start each list item with an asterisk (\*), plus sign (+), or a hyphen (-).
* Leave a space after the asterisk, plus sign, or hyphen.
* Write the text for each list item.
Here's an example using hyphens:
{% code title="Example to copy" overflow="wrap" %}
```
My list:
- First item
- Second item
- Third item
```
{% endcode %}
However, you can mix using an asterisk, a plus sign and a hyphen within a single list. The output will always be rendered as bullets:
{% code title="Example to copy" overflow="wrap" %}
```
My list:
- First item
+ Second item
* Third item
```
{% endcode %}
To create **nested unordered lists**, indent the nested list items:
My list:
- First item
- Second item
- Third item
- Nested item
- Nestem item
Checklist
Markdown allows you to create **checklists** easily. Follow these steps to include checklists in chatbot messages:
1. Use square brackets `[]` for an unchecked item and `[x]` for a checked item.
2. Place the brackets at the beginning of a line, followed by a space and the task description.
Here's an example of a simple checklist:
You can also nest checklists to create hierarchical structures:
{% code title="Example to copy" overflow="wrap" %}
```
- [ ] Main Task
- [ ] Subtask 1
- [x] Subtask 2 (completed)
- [ ] Sub-subtask
```
{% endcode %}
Clickable link
In Markdown, generating **clickable links** is a fundamental feature. Follow these steps to include hyperlinks in your text:
1. Surround the anchor text you want to link with square brackets \[].
2. Immediately follow the square brackets with the URL enclosed in parentheses ().
Here's a simple example:
{% code title="General format" overflow="wrap" %}
```
[Text you want to show in chat buble](https://www.examplehyperlink.com)
```
{% endcode %}
{% code title="Example to copy" %}
```
To learn more about Born Digital, click [here](https://borndigital.ai/)
```
{% endcode %}
What you might not know is, that you can add a title to your link for additional information when users hover over it. Insert the title inside double quotes:
{% code title="Example to copy" overflow="wrap" %}
```
To learn more about Born Digital, click [here](https://borndigital.ai/ "This will lead you to Born Digital website")
```
{% endcode %}
Embedded image/gif
Enhance the visual appeal of your chatbot messages by seamlessly incorporating **images or GIFs.** Follow these steps to insert multimedia elements:
1. Use an exclamation mark `!` to initiate the image syntax.
2. Enclose alternative text for accessibility within square brackets `[]`.
3. Follow the square brackets with the image or GIF URL enclosed in parentheses `()`.
Here's a basic example for an image:
{% code title="General format" overflow="wrap" %}
```
```
{% endcode %}
{% code title="Example to copy" overflow="wrap" %}
```
```
{% endcode %}
In the rendered output, the alt text will be displayed if the image cannot be loaded, and clicking on the image will open the specified URL.
For a GIF:
{% code title="General format" overflow="wrap" %}
```
```
{% endcode %}
:exclamation:**Ensure that the URLs point to the correct location of your images or GIFs.** Always copy and paste URLs of the image/gif itself (right click >> Copy image URL).
You can also include optional attributes, such as width and height, to control the size of the displayed media:
{% code title="General format" overflow="wrap" %}
```
```
{% endcode %}
This sets the image dimensions to 300 pixels in width and 200 pixels in height.
Code block
To create **a code block** in Markdown, you can use backticks (\`) to enclose the code.
Here's how you can do it:
#### Inline Code
For inline code, wrap your code with a single backtick on both sides:
Here is some `inline code`.
In the rendered output, the text "inline code" will appear in a monospaced font.
####
#### Multi-Line Code Blocks
For multi-line code blocks, use triple backticks (\`\`\`) before and after the code block.
{% code title="Example to copy" overflow="wrap" %}
````
```
a = "Hello world!"
print(a)
```
````
{% endcode %}
Table
Markdown provides a simple syntax for **creating tables.** Follow these steps to include tables in your chatbot messages:
1. Separate columns using vertical bars `|`.
2. Use hyphens `-` in the second line to denote the table's header row.
3. Separate each cell's content with vertical bars `|`.
4. Adjust the number of hyphens in the header row to match the number of columns.
Here's an example of a basic table:
{% code title="Example to copy" overflow="wrap" %}
```
| Header 1 | Header 2 | Header 3 |
| ---------|--------- | ---------|
| Content 1| Content 2| Content 3|
| Content 4| Content 5| Content 6|
```
{% endcode %}
You can also align the content within the cells by using colons `:`. For example, to centre-align text in the second column:
{% code title="Example to copy" overflow="wrap" %}
```
| Left-aligned | Center-aligned | Right-aligned |
| :----------- |:--------------:| -------------:|
| Content 1 | Content 2 | Content 3 |
```
{% endcode %}
Horizontal divider
Markdown allows you to insert **horizontal dividers** to visually separate sections of your content. Follow these steps to add a horizontal rule:
1. Use three hyphens `---`, three asterisks `***`, or three underscores `___`.
Here's a simple example using hyphens:
{% code title="Example to copy" overflow="wrap" %}
```
Here's the text that's gonna be above the divider.
---
And this is gonna be below the horizontal divider.
```
{% endcode %}
Feel free to choose any of the three options (`---`, `***`, or `___`) for horizontal dividers, depending on your preference.
Footnote
Markdown supports the creation of footnotes to provide additional information or references. Follow these steps to include footnotes in your chatbot messages. This is useful for longer messages with several paragraphs of text:
1. Use a caret `[^]` followed by a unique identifier to mark the position for the footnote reference in the text.
2. At the end of your document or section, add the footnote content with the same identifier inside square brackets and a colon.
Here's an example:
{% code title="Example to copy" %}
```
This is a sentence with a footnote[^1].
[^1]: Here is the additional information or reference for the footnote.
```
{% endcode %}
Emoji
In chatbot output, we support emojis as Unicode characters. Just copy them in the Text input window in MSG NODE.
{% code title="Example to copy" %}
```
Hello, I am your AI assistant! 😊
```
{% endcode %}
Tip: Browse [Emojipedia](https://emojipedia.org/) the find the right smiley face that will brighten your chatbot's messages :heart\_eyes::robot::sparkles:
\
Or, using Markdown format, making text **bold** is achieved using double asterisks (\*\*). Simply wrap the desired text with these symbols to apply bold formatting.
Here's a quick guide:
{% code title="Copy this exemple" %}
```
I want the following text to be **bold**.
```
{% endcode %}
## 
\
Or, to apply *italic* formatting to text in Markdown, you can use single asterisks (\*). Simply enclose the desired text with these symbols to render it in italics.
Here's a straightforward guide:
{% code title="Copy this example" overflow="wrap" %}
```
This text is normal, but *this text will appear italicized.*
```
{% endcode %}
You can also create nested ordered lists by indenting **the nested list** items. \
For instance:
{% code title="Example to copy" overflow="wrap" %}
```
My list:
1. First item
1. Nested item 1
2. Nested item 2
2. Second item
3. Third item
```
{% endcode %}
To create **nested unordered lists**, indent the nested list items:
What you might not know is, that you can add a title to your link for additional information when users hover over it. Insert the title inside double quotes:
{% code title="Example to copy" overflow="wrap" %}
```
To learn more about Born Digital, click [here](https://borndigital.ai/ "This will lead you to Born Digital website")
```
{% endcode %}
For a GIF:
{% code title="General format" overflow="wrap" %}
```
```
{% endcode %}
:exclamation:**Ensure that the URLs point to the correct location of your images or GIFs.** Always copy and paste URLs of the image/gif itself (right click >> Copy image URL).
You can also include optional attributes, such as width and height, to control the size of the displayed media:
{% code title="General format" overflow="wrap" %}
```
```
{% endcode %}
This sets the image dimensions to 300 pixels in width and 200 pixels in height.
Tip: Browse [Emojipedia](https://emojipedia.org/) the find the right smiley face that will brighten your chatbot's messages :heart\_eyes::robot::sparkles: