---
metadata:
- name: generator
content: Diplodoc Platform v5.63.0
alternate:
- en/dashboard/markdown
- ru/dashboard/markdown
- href: ru/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
canonical: ru/dashboard/markdown.html
title: Markdown в DataLens On-premises
description: >-
Из статьи вы узнаете, как использовать язык разметки Markdown в DataLens
On-premises.
vcsPath: ru/dashboard/markdown.md
---
# Markdown в DataLens On-premises
DataLens позволяет использовать язык разметки Markdown в виджете [Текст](./widget.md#text) на дашборде.
Вы можете разместить поясняющий текст, ссылки, таблицу, изображение или выделить значимые моменты с помощью форматирования.
В текстовых виджетах вы можете использовать следующие элементы:
* [Заголовки](#headings)
* [Выделение текста](#emphasizing)
* [Цвет текста](#text-color)
* [Списки](#lists)
* [Простой неупорядоченный список](#unordered-list)
* [Вложенный неупорядоченный список](#unordered-sublist)
* [Простой упорядоченный список](#ordered-list)
* [Вложенный упорядоченный список](#ordered-sublist)
* [Таблицы](#tables)
* [Каты](#cuts)
* [Табы](#tabs)
* [Ссылки](#links)
* [Оформление кода](#code)
* [Фрагмент кода как часть предложения](#inline-code)
* [Фрагмент кода отдельным блоком](#codeblock)
* [Изображение](#image)
* [Эмодзи](#emoji)
* [Диаграммы Mermaid](#mermaid)
## Заголовки {#headings}
Вы можете использовать четыре уровня заголовков в виджете.
Для обозначения заголовка используется символ `#`.
Пример синтаксиса:
```markdown
# Заголовок 1 уровня
## Заголовок 2 уровня
### Заголовок 3 уровня
#### Заголовок 4 уровня
```
## Выделение текста {#emphasizing}
Вы можете выделить важное в тексте с помощью форматирования:
* Чтобы выделить текст **полужирным шрифтом**, добавьте с двух сторон `**`:
```markdown
Этот текст выделен **полужирным шрифтом**.
```
* Чтобы выделить текст _курсивом_, добавьте с двух сторон `_`:
```markdown
Этот текст выделен _курсивом_.
```
* Чтобы выделить текст _**полужирным шрифтом и курсивом**_, добавьте с двух сторон `**_` или `_**`:
```markdown
Этот текст выделен _**полужирным шрифтом и курсивом**_.
Этот текст выделен **_полужирным шрифтом и курсивом_**.
```
* Чтобы подчеркнуть текст, добавьте с двух сторон `++`:
```markdown
Этот текст ++подчеркнутый++.
```
* Чтобы ~~зачеркнуть~~ текст, добавьте с двух сторон `~~`:
```markdown
Этот текст ~~зачеркнутый~~.
```
* Нижний регистр
Чтобы вывести текст в нижнем регистре, добавьте с двух сторон `~`:
```markdown
Этот текст в ~нижнем~ регистре.
```
* Верхний регистр
Чтобы вывести текст в ^верхнем^ регистре, добавьте с двух сторон `^`:
```markdown
Этот текст в ^верхнем^ регистре.
```
* Чтобы вывести моноширинный текст, добавьте с двух сторон `##`:
```markdown
Этот текст ##моноширинный##.
```
* Чтобы вывести выделенный текст, добавьте с двух сторон `==`:
```markdown
Этот текст ==выделенный==.
```
## Цвет текста {#text-color}
Вы можете задать цвет текста с помощью форматирования: `{цвет}(текст)`. Поддерживаются следующие значения цвета:
* gray — серый;
* yellow — желтый;
* orange — оранжевый;
* red — красный;
* green — зеленый;
* blue — синий;
* violet — фиолетовый.
Например, следующая разметка:
```markdown
Этот текст {green}(зеленого) цвета.
```
будет отображаться так:
Этот текст зеленого цвета.
## Списки {#lists}
Вы можете использовать несколько вариантов списков для структурирования информации на дашборде.
### Простой неупорядоченный список {#unordered-list}
Чтобы оформить неупорядоченный маркированный список, используйте символы `*`, `-` или `+`.
Например, следующая разметка:
```markdown
* Элемент 1
* Элемент 2
* Элемент 3
```
будет отображаться так:
* Элемент 1
* Элемент 2
* Элемент 3
### Вложенный неупорядоченный список {#unordered-sublist}
Чтобы оформить вложенный неупорядоченный список, добавьте отступ в начале строк с элементами вложенного списка. Допустимый размер отступа — от двух до пяти пробелов.
Например, следующая разметка:
```markdown
- Элемент 1
- Элемент A
- Элемент B
- Элемент 2
```
будет отображаться так:
* Элемент 1
* Элемент A
* Элемент B
* Элемент 2
### Простой упорядоченный список {#ordered-list}
Чтобы оформить упорядоченный список, используйте цифры с символом `.` или `)`.
Например, следующая разметка:
```markdown
1. Первый пункт
1. Второй пункт
1. Третий пункт
```
будет отображаться так:
1. Первый пункт
1. Второй пункт
1. Третий пункт
### Вложенный упорядоченный список {#ordered-sublist}
Чтобы оформить вложенный упорядоченный список, добавьте отступ в начале строк с элементами вложенного списка. Допустимый размер отступа — от трех до шести пробелов.
Например, следующая разметка:
```markdown
1. Первый пункт
1. Вложенный пункт
1. Вложенный пункт
1. Второй пункт
```
будет отображаться так:
1. Первый пункт
1.1. Вложенный пункт
1.2. Вложенный пункт
1. Второй пункт
## Таблицы {#tables}
Таблица состоит из одной строки с заголовками, разделительной строки и строк с данными.
Каждая строка таблицы состоит из ячеек, отделенных друг от друга символами `|`.
В ячейках разделительной строки используются только символ `-` и символ `:`. Символ `:` ставится в начале, в конце или с обеих сторон содержимого ячейки разделительной строки, чтобы обозначить выравнивания текста в соответствующем столбце по левой стороне, по правой стороне или по центру соответственно.
Таблицу нужно отделять от предшествующего и последующего текста пустыми строками.
Например, следующая разметка:
```markdown
По левому краю | По правому краю | По центру
:--- | ---: | :---:
Текст | Текст | Текст
```
будет отображаться так:
По левому краю | По правому краю | По центру
:--- | ---: | :---:
Текст | Текст | Текст
Если необходимо добавить в ячейку таблицы перенос строки или более сложный элемент (например, список или блок кода), воспользуйтесь альтернативной разметкой:
```
#|
|| **Заголовок1** | **Заголовок2** ||
|| Текст | Текст ||
|#
```
Пример разметки с переносами и списком:
```
#|
||Текст
на двух строчках
|
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4||
|#
```
## Каты {#cuts}
Используйте каты, чтобы скрыть часть контента. Например, дополнительную информацию или длинные блоки кода.
Например, следующая разметка:
```markdown
{% cut "Заголовок ката" %}
Контент, который отобразится по нажатию.
{% endcut %}
```
будет отображаться так:
{% cut "Заголовок ката" %}
Контент, который отобразится по нажатию.
{% endcut %}
## Табы {#tabs}
Используйте табы для взаимоисключающих разделов. Например, чтобы разделить инструкции для разных ОС.
Например, следующая разметка:
```markdown
{% list tabs %}
- Название таба 1
Текст таба 1.
* Можно использовать списки.
* И **другую** разметку.
- Название таба 2
Текст таба 2.
{% endlist %}
```
будет отображаться так:
{% list tabs %}
- Название таба 1
Текст таба 1.
* Можно использовать списки.
* И **другую** разметку.
- Название таба 2
Текст таба 2.
{% endlist %}
Если нужно, чтобы элемент был раскрыт по умолчанию, добавьте к нему атрибут `{selected}`:
Например, следующая разметка:
```markdown
{% list tabs %}
- Название таба 1
Текст таба 1.
- Название таба 2 {selected}
Пункт будет открыт по умолчанию.
- Название таба 3
Текст таба 3.
{% endlist %}
```
будет отображаться так:
{% list tabs %}
- Название таба 1
Текст таба 1.
- Название таба 2 {selected}
Пункт будет открыт по умолчанию.
- Название таба 3
Текст таба 3.
{% endlist %}
## Ссылки {#links}
С помощью ссылок вы можете указать информацию, которые имеет отношение к дашборду или чартам.
Например, добавить ссылки на другие дашборды, указать источники данных.
Ссылка состоит из двух частей:
* `[текст]` — текст ссылки.
* `(ссылка)` — URL или путь до файла, на который делается ссылка.
Например, следующая разметка:
будет отображаться так:
## Оформление кода {#code}
Фрагмент кода можно оформить как часть предложения или как отдельный блок.
### Фрагмент кода как часть предложения {#inline-code}
Чтобы оформить фрагмент кода как часть предложения, используйте символ `.
Например, следующая разметка:
```markdown
Предложение с `фрагментом кода`.
```
будет отображаться так:
Предложение с `фрагментом кода`.
### Фрагмент кода отдельным блоком {#codeblock}
Чтобы оформить фрагмент кода как отдельный блок, используйте утроенный символ ` и имя соответствующего языка программирования.
Например, следующая разметка:
```markdown
```kotlin
val a: Int = 1
```
```
будет отображаться как фрагмент кода на языке Kotlin с подсветкой:
```kotlin
val a: Int = 1
```
## Изображение {#image}
Поддерживается добавление изображений любого формата.
Чтобы добавить изображение, вставьте в виджет следующий код:
```markdown
![alt text](https://ссылка_на_изображение "Текст для подсказки при наведении" =100x200)
```
## Эмодзи {#emoji}
Чтобы добавить эмодзи, введите ключевое слово и добавьте с двух сторон `:`. Список доступных ключевых слов можно посмотреть в визуальном редакторе.
Например, следующая разметка:
```markdown
Эмодзи :smiley:.
```
будет отображаться так:
Эмодзи 😀.
## Диаграммы Mermaid {#mermaid}
Mermaid — это библиотека для создания диаграмм и блок-схем в браузере с помощью простого языка разметки. Она позволяет создавать диаграммы, используя синтаксис, похожий на Markdown.
Библиотека имеет множество встроенных шаблонов и функций для создания различных типов диаграмм, например: блок-схемы, графы, деревья, диаграммы Ганта, mind-карты, C4-диаграммы.
С помощью текстовых определений задается описание структуры, которое преобразуется в диаграмму. Например, следующая разметка:
будет отображаться как:
Подробнее в [документации Mermaid](https://mermaid.js.org/intro/).
{% note info %}
При использовании Mermaid учитывайте следующие ограничения:
* отсутствует поддержка HTML;
* нельзя использовать атрибут `class` для стилизации диаграмм;
* нельзя использовать CSS-переменные для цветов;
* Markdown внутри блоков диаграмм поддерживается частично (например, не работают ссылки).
{% endnote %}