Markdown

DataLens позволяет использовать язык разметки Markdown в виджете Текст на дашборде.
Вы можете разместить поясняющий текст, ссылки, таблицу, изображение или выделить значимые моменты с помощью форматирования.

В текстовых виджетах вы можете использовать следующие элементы:

• Заголовки
• Выделение текста
• Цвет текста
• Списки
  • Простой неупорядоченный список
  • Вложенный неупорядоченный список
  • Простой упорядоченный список
  • Вложенный упорядоченный список
• Таблицы
• Каты
• Табы
• Ссылки
• Оформление кода
  • Фрагмент кода как часть предложения
  • Фрагмент кода отдельным блоком
• Изображение
• Эмодзи
• Диаграммы Mermaid

ЗаголовкиЗаголовки

Вы можете использовать четыре уровня заголовков в виджете.
Для обозначения заголовка используется символ #.

Пример синтаксиса:

# Заголовок 1 уровня
## Заголовок 2 уровня
### Заголовок 3 уровня
#### Заголовок 4 уровня

Выделение текстаВыделение текста

Вы можете выделить важное в тексте с помощью форматирования:

• Чтобы выделить текст полужирным шрифтом, добавьте с двух сторон **:

  Этот текст выделен **полужирным шрифтом**.
  

• Чтобы выделить текст курсивом, добавьте с двух сторон _:

  Этот текст выделен _курсивом_.
  

• Чтобы выделить текст полужирным шрифтом и курсивом, добавьте с двух сторон **_ или _**:

  Этот текст выделен _**полужирным шрифтом и курсивом**_.
  Этот текст выделен **_полужирным шрифтом и курсивом_**.
  

• Чтобы подчеркнуть текст, добавьте с двух сторон ++:

  Этот текст ++подчеркнутый++.
  

• Чтобы зачеркнуть текст, добавьте с двух сторон ~~:

  Этот текст ~~зачеркнутый~~.
  

• Нижний регистр

  Чтобы вывести текст в _нижнем регистре, добавьте с двух сторон ~:

  Этот текст в ~нижнем~ регистре.
  

• Верхний регистр

  Чтобы вывести текст в ^{верхнем} регистре, добавьте с двух сторон ^:

  Этот текст в ^верхнем^ регистре.
  

• Чтобы вывести моноширинный текст, добавьте с двух сторон ##:

  Этот текст ##моноширинный##.
  

• Чтобы вывести выделенный текст, добавьте с двух сторон ==:

  Этот текст ==выделенный==.
  

Цвет текстаЦвет текста

Вы можете задать цвет текста с помощью форматирования: {цвет}(текст). Поддерживаются следующие значения цвета:

• gray — серый;
• yellow — желтый;
• orange — оранжевый;
• red — красный;
• green — зеленый;
• blue — синий;
• violet — фиолетовый.

Например, следующая разметка:

Этот текст {green}(зеленого) цвета.

будет отображаться так:

Этот текст зеленого цвета.

СпискиСписки

Вы можете использовать несколько вариантов списков для структурирования информации на дашборде.

Простой неупорядоченный списокПростой неупорядоченный список

Чтобы оформить неупорядоченный маркированный список, используйте символы *, - или +.

Например, следующая разметка:

* Элемент 1
* Элемент 2
* Элемент 3

будет отображаться так:

• Элемент 1
• Элемент 2
• Элемент 3

Вложенный неупорядоченный списокВложенный неупорядоченный список

Чтобы оформить вложенный неупорядоченный список, добавьте отступ в начале строк с элементами вложенного списка. Допустимый размер отступа — от двух до пяти пробелов.

Например, следующая разметка:

- Элемент 1
   - Элемент A
   - Элемент B
- Элемент 2

будет отображаться так:

• Элемент 1
  • Элемент A
  • Элемент B
• Элемент 2

Простой упорядоченный списокПростой упорядоченный список

Чтобы оформить упорядоченный список, используйте цифры с символом . или ).

Например, следующая разметка:

1. Первый пункт
1. Второй пункт
1. Третий пункт

будет отображаться так:

1. Первый пункт
2. Второй пункт
3. Третий пункт

Вложенный упорядоченный списокВложенный упорядоченный список

Чтобы оформить вложенный упорядоченный список, добавьте отступ в начале строк с элементами вложенного списка. Допустимый размер отступа — от трех до шести пробелов.

Например, следующая разметка:

1. Первый пункт
   1. Вложенный пункт
   1. Вложенный пункт
1. Второй пункт

будет отображаться так:

1. Первый пункт

   1.1. Вложенный пункт
   
   1.2. Вложенный пункт

2. Второй пункт

ТаблицыТаблицы

Таблица состоит из одной строки с заголовками, разделительной строки и строк с данными.

Каждая строка таблицы состоит из ячеек, отделенных друг от друга символами |.

В ячейках разделительной строки используются только символ - и символ :. Символ : ставится в начале, в конце или с обеих сторон содержимого ячейки разделительной строки, чтобы обозначить выравнивания текста в соответствующем столбце по левой стороне, по правой стороне или по центру соответственно.

Таблицу нужно отделять от предшествующего и последующего текста пустыми строками.

Например, следующая разметка:

По левому краю | По правому краю | По центру
:--- | ---: | :---:
Текст | Текст | Текст

будет отображаться так:

Если необходимо добавить в ячейку таблицы перенос строки или более сложный элемент (например, список или блок кода), воспользуйтесь альтернативной разметкой:

#|
|| **Заголовок1** | **Заголовок2** ||
|| Текст | Текст ||
|#

Пример разметки с переносами и списком:

#|
||Текст
на двух строчках
|
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4||
|#

См. подробнее в документации YFM.

КатыКаты

Используйте каты, чтобы скрыть часть контента. Например, дополнительную информацию или длинные блоки кода.

Например, следующая разметка:

{% cut "Заголовок ката" %}

Контент, который отобразится по нажатию.

{% endcut %}

будет отображаться так:

ТабыТабы

Используйте табы для взаимоисключающих разделов. Например, чтобы разделить инструкции для разных ОС.

Например, следующая разметка:

{% list tabs %}

- Название таба 1

  Текст таба 1.

  * Можно использовать списки.
  * И **другую** разметку.

- Название таба 2

  Текст таба 2.

{% endlist %}

будет отображаться так:

Если нужно, чтобы элемент был раскрыт по умолчанию, добавьте к нему атрибут {selected}:

Например, следующая разметка:

{% list tabs %}

- Название таба 1

  Текст таба 1.

- Название таба 2 {selected}

  Пункт будет открыт по умолчанию.

- Название таба 3

  Текст таба 3.

{% endlist %}

будет отображаться так:

СсылкиСсылки

С помощью ссылок вы можете указать информацию, которые имеет отношение к дашборду или чартам.
Например, добавить ссылки на другие дашборды, указать источники данных.

Ссылка состоит из двух частей:

• [текст] — текст ссылки.
• (ссылка) — URL или путь до файла, на который делается ссылка.

Например, следующая разметка:

[ссылка на yandex.ru](https://yandex.ru).

будет отображаться так:

ссылка на yandex.ru.

Оформление кодаОформление кода

Фрагмент кода можно оформить как часть предложения или как отдельный блок.

Фрагмент кода как часть предложенияФрагмент кода как часть предложения

Чтобы оформить фрагмент кода как часть предложения, используйте символ `.

Например, следующая разметка:

Предложение с `фрагментом кода`.

будет отображаться так:

Предложение с фрагментом кода.

Фрагмент кода отдельным блокомФрагмент кода отдельным блоком

Чтобы оформить фрагмент кода как отдельный блок, используйте утроенный символ ` и имя соответствующего языка программирования.

Например, следующая разметка:

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

будет отображаться как фрагмент кода на языке Kotlin с подсветкой:

val a: Int = 1

ИзображениеИзображение

В виджет можно добавлять изображения, размещенные в хранилище Yandex Object Storage. С тарифами сервиса можно ознакомиться в разделе Правила тарификации для Object Storage. Изображения из внешних источников не поддерживаются.

Поддерживается добавление изображений любого формата по ссылкам на объекты вида https://storage.yandexcloud.net/<bucket>/<key>.

Для загрузки изображения из Object Storage в виджет:

1. Откройте консоль управления.

2. В левом верхнем углу нажмите значок и выберите сервис Object Storage.

3. Создайте бакет.

4. Загрузите изображение в бакет.

5. Перейдите в полученный объект и нажмите кнопку Получить ссылку.

6. Укажите время жизни для ссылки и скопируйте ее.

   Важно

   По истечении указанного времени жизни изображение станет недоступным (максимально — 30 дней).

7. Откройте дашборд в сервисе DataLens и создайте виджет Текст.

8. Вставьте в виджет следующий код:

   ![alt text](https://ссылка_на_изображение "Текст для подсказки при наведении" =100x200)
   

ЭмодзиЭмодзи

Чтобы добавить эмодзи, введите ключевое слово и добавьте с двух сторон :. Список доступных ключевых слов можно посмотреть в визуальном редакторе.

Например, следующая разметка:

Эмодзи :smiley:.

будет отображаться так:

Эмодзи 😀.

Диаграммы MermaidДиаграммы Mermaid

Mermaid — это библиотека для создания диаграмм и блок-схем в браузере с помощью простого языка разметки. Она позволяет создавать диаграммы, используя синтаксис, похожий на Markdown.

Библиотека имеет множество встроенных шаблонов и функций для создания различных типов диаграмм, например: блок-схемы, графы, деревья, диаграммы Ганта, mind-карты, C4-диаграммы.

С помощью текстовых определений задается описание структуры, которое преобразуется в диаграмму. Например, следующая разметка:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

будет отображаться как:

См. подробнее в документации Mermaid.