Markdown

DataLens lets you use the Markdown markup language in the 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
• Highlighting text
• Text color
• Lists
  • Simple unordered list
  • Nested unordered list
  • Simple ordered list
  • Nested ordered list
• Tables
• Cuts
• Tabs
• Links
• Code formatting
  • Inline code snippet
  • Code block
• Image
• Emoji
• Mermaid diagrams

HeadersHeaders

You can use four levels of headings in the widget.
Use # to mark up headings.

Syntax example:

# Level 1 heading
## Level 2 heading
### Level 3 heading
#### Level 4 heading

Highlighting textHighlighting text

Use formatting to highlight the key points in your text:

• Use ** on both sides for bold:

  This text is **bold**.
  

• Use _ on both sides for italics:

  This text is _italic_.
  

• For bold and italics together, use **_ or _** on both sides:

  This text is _**bold and italic**_.
  This text is **_bold and italic_**.
  

• To underline text, add ++ on both sides:

  This text is ++underlined++.
  

• To strikethrough text, add ~~ on both sides:

  This text is ~~strikethrough~~.
  

• Subscript

  For _subscript, add ~ on both sides:

  This text is in ~subscript~.
  

• Superscript

  For ^superscript, add ^ on both sides:

  This text is in ^superscript^.
  

• For monospaced text, add ## on both sides:

  This text is ##monospaced##.
  

• For a highlight, add == on both sides:

  This text is ==highlighted==.
  

Text colorText 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:

This text is {green}green.

will be displayed as:

This text is green.

ListsLists

You can use multiple list types to arrange the data on the dashboard.

Simple unordered listSimple unordered list

To make an unordered bulleted list, use *, -, or +.

For example, the following markup:

* Item 1
* Item 2
* Item 3

will be displayed as:

• Item 1
• Item 2
• Item 3

Nested unordered listNested unordered list

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:

- Item 1
   - Item A
   - Item B
- Item 2

will be displayed as:

• Item 1
  • Item A
  • Item B
• Item 2

Simple ordered listSimple ordered list

To make an ordered list, use numbers with a . or ).

For example, the following markup:

1. First item
1. Second item
1. Third item

will be displayed as:

1. First item
2. Second item
3. Third item

Nested ordered listNested ordered list

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:

1. First item
   1. Nested item
   1. Nested item
1. Second item

will be displayed as:

1. First item

   1.1. Nested item
   
   1.2. Nested item

2. Second item

TablesTables

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:

Left-aligned | Right-aligned | Centered
:--- | ---: | :---:
Text | Text | Text

will be displayed as:

To add a line break or a more complex element (such as a list or code block) to a table cell, use an alternative markup:

#|
|| **Header_1** | **Header_2** ||
|| Text | Text ||
|#

Sample markup with line breaks and a list:

#|
||Text
in two lines
|
- Item 1
- Item 2
- Item 3
- Item 4||
|#

CutsCuts

Use cuts to hide content, e.g., additional information or long blocks of code.

For example, the following markup:

{% cut "`cut` title" %}

Content displayed on click.

{% endcut %}

will be displayed as:

TabsTabs

Use tabs for mutually exclusive sections. For example, to separate instructions for different operating systems.

For example, the following markup:

{% 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:

If you want an element to be expanded by default, add the {selected} attribute to it.

For example, the following markup:

{% list tabs %}

- Tab 1 name

  Tab 1 text

- Tab 2 name {selected}

  The item will be expanded by default.

- Tab 3 name

  Tab 3 text

{% endlist %}

will be displayed as:

LinksLinks

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 formattingCode formatting

You can use inline code snippets or code blocks.

Inline code snippetInline code snippet

Use ` to format an inline code snippet.

For example, the following markup:

A sentence with a `code snippet`.

will be displayed as:

A sentence with a code snippet.

Code blockCode block

Use triple ` and the appropriate programming language name to format your snippet as a code block.

For example, the following markup:

    ```kotlin
    val a: Int = 1
    ```

will be displayed as a highlighted Kotlin code snippet:

val a: Int = 1

ImageImage

You can add images of any format.

To add an image, paste the following code in the widget:

![alt text](https://link_to_image "Text for tip on hover" =100x200)

EmojiEmoji

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:

Emoji :smiley:.

will be displayed as:

Emoji 😀.

Mermaid diagramsMermaid diagrams

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:

B

C

D

See the Mermaid documentation for details.