---
metadata:
- name: generator
content: Diplodoc Platform v5.63.0
alternate:
- en/dashboard/markdown
- ru/dashboard/markdown
- href: en/dashboard/markdown.md
type: text/markdown
title: Markdown version
csp:
- script-src:
- https://mc.yandex.ru
img-src:
- https://mc.yandex.ru
connect-src:
- https://mc.yandex.ru
- wss://mc.yandex.ru
child-src:
- 'blob:'
- https://mc.yandex.ru
frame-src:
- 'blob:'
- https://mc.yandex.ru
frame-ancestors:
- 'blob:'
- https://mc.yandex.ru
title: Markdown in DataLens On-premises
description: In this tutorial, you will learn how to use Markdown in DataLens On-premises.
canonical: en/dashboard/markdown.html
vcsPath: en/dashboard/markdown.md
---
# Markdown in DataLens On-premises
DataLens lets you use the Markdown markup language in the [Text](./widget.md#text) widget on the dashboard.
You can insert explanatory text, links, tables, images, or use formatting to highlight key points.
In text widgets, you can use the following elements:
* [Headers](#headings)
* [Highlighting text](#emphasizing)
* [Text color](#text-color)
* [Lists](#lists)
* [Simple unordered list](#unordered-list)
* [Nested unordered list](#unordered-sublist)
* [Simple ordered list](#ordered-list)
* [Nested ordered list](#ordered-sublist)
* [Tables](#tables)
* [Cuts](#cuts)
* [Tabs](#tabs)
* [Links](#links)
* [Code formatting](#code)
* [Inline code snippet](#inline-code)
* [Code block](#codeblock)
* [Image](#image)
* [Emoji](#emoji)
* [Mermaid diagrams](#mermaid)
## Headings {#headings}
You can use four levels of headings in the widget.
Use `#` to mark up headings.
Syntax example:
```markdown
# Level 1 heading
## Level 2 heading
### Level 3 heading
#### Level 4 heading
```
## Highlighting text {#emphasizing}
Use formatting to highlight the key points in your text:
* Use `**` on both sides for **bold**:
```markdown
This text is **bold**.
```
* Use `_` on both sides for _italics_:
```markdown
This text is _italic_.
```
* For _**bold and italics**_ together, use `**_` or `_**` on both sides:
```markdown
This text is _**bold and italic**_.
This text is **_bold and italic_**.
```
* To underline text, add `++` on both sides:
```markdown
This text is ++underlined++.
```
* To ~~strikethrough~~ text, add `~~` on both sides:
```markdown
This text is ~~strikethrough~~.
```
* Subscript
For subscript, add `~` on both sides:
```markdown
This text is in ~subscript~.
```
* Superscript
For ^superscript^, add `^` on both sides:
```markdown
This text is in ^superscript^.
```
* For monospaced text, add `##` on both sides:
```markdown
This text is ##monospaced##.
```
* For a highlight, add `==` on both sides:
```markdown
This text is ==highlighted==.
```
## Text color {#text-color}
You can set the text color this way: `{color}(text)`. The following colors are supported:
* gray
* yellow
* orange
* red
* green
* blue
* violet
For example, the following markup:
```markdown
This text is {green}green.
```
will be displayed as:
This text is green.
## Lists {#lists}
You can use multiple list types to arrange the data on the dashboard.
### Simple unordered list {#unordered-list}
To make an unordered bulleted list, use `*`, `-`, or `+`.
For example, the following markup:
```markdown
* Item 1
* Item 2
* Item 3
```
will be displayed as:
* Item 1
* Item 2
* Item 3
### Nested unordered list {#unordered-sublist}
To make a nested unordered list, add an indent for the lines with the nested list items. The indent can be from two to five spaces.
For example, the following markup:
```markdown
- Item 1
- Item A
- Item B
- Item 2
```
will be displayed as:
* Item 1
* Item A
* Item B
* Item 2
### Simple ordered list {#ordered-list}
To make an ordered list, use numbers with a `.` or `)`.
For example, the following markup:
```markdown
1. Item 1
1. Item 2
1. Item 3
```
will be displayed as:
1. Item 1
1. Item 2
1. Item 3
### Nested ordered list {#ordered-sublist}
To make a nested ordered list, add an indent for the lines with the nested list items. The indent can be from three to six spaces.
For example, the following markup:
```markdown
1. Item 1
1. Nested item
1. Nested item
1. Item 2
```
will be displayed as:
1. Item 1
1.1. Nested item
1.2. Nested item
1. Item 2
## Tables {#tables}
A table consists of a single row with headers, a separator row, and rows with data.
Each table row consists of cells that are separated from each other by `|`.
In the separator row cells, only `-` and `:` can be used. The colon (`:`) is used at the beginning, end, or on both sides of the separator row cell content to indicate left, right, or center alignment of text in the column, respectively.
A table should be separated from the surrounding text with empty lines.
For example, the following markup:
```markdown
Left-aligned | Right-aligned | Centered
:--- | ---: | :---:
Text | Text | Text
```
will be displayed as:
Left-aligned | Right-aligned | Centered
:--- | ---: | :---:
Text | Text | Text
To add a line break or a more complex element, e.g., a list or code block, to a table cell, use an alternative markup:
```
#|
|| **Heading1** | **Heading2** ||
|| Text | Text ||
|#
```
Example of a markup with line breaks and a list:
```
#|
||Text
in two rows
|
- Item 1
- Item 2
- Item 3
- Item 4||
|#
```
## Cuts {#cuts}
Use cuts to hide content, e.g., additional information or long code blocks.
For example, the following markup:
```markdown
{% cut "Cut title" %}
Content displayed on click.
{% endcut %}
```
will be displayed as:
{% cut "Cut title" %}
Content displayed on click.
{% endcut %}
## Tabs {#tabs}
Use tabs for mutually exclusive sections, e.g., to separate instructions for different operating systems.
For example, the following markup:
```markdown
{% list tabs %}
- Tab 1 name
Tab 1 text
* You can use lists.
* And **other** markup.
- Tab 2 name
Tab 2 text
{% endlist %}
```
will be displayed as:
{% list tabs %}
- Tab 1 name
Tab 1 text
* You can use lists.
* And **other** markup.
- Tab 2 name
Tab 2 text
{% endlist %}
If you want an item to be expanded by default, add the `{selected}` attribute to it.
For example, the following markup:
```markdown
{% list tabs %}
- Tab 1 name
Tab 1 text
- Tab 2 name {selected}
This item will be expanded by default.
- Tab 3 name
Tab 3 text
{% endlist %}
```
will be displayed as:
{% list tabs %}
- Tab 1 name
Tab 1 text
- Tab 2 name {selected}
This item will be expanded by default.
- Tab 3 name
Tab 3 text
{% endlist %}
## Links {#links}
You can use links to enter information related to the dashboard or charts.
For example, you can add links to other dashboards and specify data sources.
A link consists of two parts:
* `[text]`: Link text.
* `(link)`: URL or path to the referenced file.
For example, the following markup:
will be displayed as:
## Code formatting {#code}
You can use inline code snippets or code blocks.
### Inline code snippet {#inline-code}
Use ` to format an inline code snippet.
For example, the following markup:
```markdown
A sentence with a `code snippet`.
```
will be displayed as:
A sentence with a `code snippet`.
### Code block {#codeblock}
Use triple ` and the appropriate programming language name to format your snippet as a code block.
For example, the following markup:
```markdown
```kotlin
val a: Int = 1
```
```
will be displayed as a highlighted Kotlin code snippet:
```kotlin
val a: Int = 1
```
## Image {#image}
You can add images of any format.
To add an image, paste the following code in the widget:
```markdown
![alt text](https://link_to_image "Text for tip on hover" =100x200)
```
## Emoji {#emoji}
To add an emoji, enter a keyword and add `:` on both sides. You can see the list of available keywords in the visual editor.
For example, the following markup:
```markdown
Emoji :smiley:.
```
will be displayed as:
Emoji 😀.
## Mermaid diagrams {#mermaid}
Mermaid is a library for creating diagrams and flowcharts in a browser using an easy-to-use markup language. It allows you to create diagrams using a syntax similar to Markdown.
Mermaid has many built-in templates and functions for creating various types of diagrams, such as flowcharts, graphs, trees, Gantt charts, mind maps, and C4 diagrams.
Using text definitions, you can set a description of the structure, which is then converted into a diagram. For example, the following markup:
```mermaid
graph TD;
A-->B
A-->C
B-->D
C-->D
```
will be displayed as:
See [this Mermaid guide](https://mermaid.js.org/intro/) for details.
{% note info %}
When using Mermaid, keep the following limitations in mind:
* There is no HTML support.
* You cannot use the `class` attribute to style diagrams.
* You cannot use CSS variables for colors.
* Markdown inside diagram sections is only partially supported (e.g., links do not work).
{% endnote %}