---
metadata:
- name: generator
content: Diplodoc Platform v5.63.0
alternate:
- en/charts/editor/widgets/markdown
- ru/charts/editor/widgets/markdown
- href: en/charts/editor/widgets/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: en/charts/editor/widgets/markdown.html
title: Markdown in Editor
description: In this article, you will learn about the Advanced chart widget.
vcsPath: en/charts/editor/widgets/markdown.md
---
# Markdown
Visualization for rendering Markdown, a simplified markup language.
It supports [GitHub Flavored Markdown (GFM)](https://github.github.com/gfm/), except for inline raw HTML, certain plugins, and [Yandex Flavored Markdown](https://diplodoc.com/docs/ru/index-yfm) features.
Сharts are rendered using the [@diplodoc/transform](https://www.npmjs.com/package/@diplodoc/transform) library. For more, see [this Diplodoc guide](https://diplodoc.com/docs/ru/tools/transform/).
## Available markup components {#about-markdown}
- [Structure on the Prepare tab](#prepare)
- [Markdown markup](#about-markdown)
- [Headers](#headers)
- [Styles](#text-styles)
- [Text color](#text-color)
- [Lists](#lists)
- [Unordered list](#unordered-list)
- [Ordered list](#ordered-list)
- [Tables](#tables)
- [Cuts](#cuts)
- [Tabs](#tabs)
- [Accordion](#accordion)
- [Links](#links)
- [Inserting code](#code)
- [Images](#images)
- [Emoji](#emoji)
- [Mermaid diagrams](#mermaid)
- [Tooltips](#term)
## Structure on the Prepare tab {#prepare}
Executing the **Prepare** tab should result in exporting the Markdown rendering data.
### Available methods {#available-methods}
* **`Editor.getParams()`**: Returns an object with normalized parameters.
* **`Editor.getLoadedData()`**: Returns an object with data requested on the **Sources** tab.
### Example {#example}
```js
// generating text
const inline = 'To insert inline code, wrap it in backticks'
+ '``.';
const text = `
# H1 heading
## H2 heading
### H3 heading
#### H4 heading
${inline}
`;
// exporting the data for rendering
module.exports = {
markdown: text
};
```
## Markdown markup {#about-markdown}
### Headings {#headers}
To create a heading, use the `#` sign, for example:
```markdown
# H1 heading
## H2 heading
### H3 heading
#### H4 heading
```
Use h1 as the page heading. For a section, use the h2 heading; for subsections, use the appropriate lower level headings. Make sure you maintain the nesting structure of headings.
### Styles {#text-styles}
To make text **bold**, wrap it in double asterisks:
```markdown
This text is **bold**.
```
To make text _italic_, wrap it in underscores:
```markdown
This text is _italic_.
```
To make text _**bold and italic**_, use both double asterisks and underscores:
```markdown
This text is _**bold and italic**_.
This text is **_bold and italic_**.
```
To apply ~~strikethrough~~ formatting to text, wrap it in double tildes (~~):
```markdown
This text is ~~strikethrough~~.
```
To make text underlined, wrap it in double pluses (++):
```markdown
This text is ++underlined++.
```
To create a subscript, wrap the text in tilde signs (~):
```markdown
This text is in ~subscript~.
```
To create a ^superscript^, wrap the text in `^` signs:
```markdown
This text is in ^superscript^.
```
To make text monospaced, wrap it in `##` signs:
```markdown
This text is ##monospaced##.
```
To highlight text, wrap it in double equal signs (==):
```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}
#### Unordered list {#unordered-list}
You can format an unordered (bulleted) list using an asterisk (*), hyphen (-), or plus sign (+). For example, the following Markdown markup:
```markdown
- Item 1
- Item 2
- Item 3
```
will be displayed as:
- Item 1
- Item 2
- Item 3
To make a list nested in another list, add an indent for child list items. Markup:
```markdown
- Item 1
- Item A
- Item B
- Item 2
```
will be displayed as:
- Item 1
- Item A
- Item B
- Item 2
#### Ordered list {#ordered-list}
You can format an ordered (step) list using corresponding numbers. Markup:
```
1. Item 1
1. Item 2
1. Item 3
```
will be displayed as:
1. Item 1
2. Item 2
3. Item 3
To make a list nested in another list, add an indent for child list items. Here is an example:
```
1. Item 1
1. Nested item
1. Nested item
1. Item 2
```
### Tables {#tables}
Tables are not included in the Markdown basic specification, but they are supported by GFM. You can create tables using the pipe character (`|`) and a hyphen (`-`). With hyphens, you can create a heading for each column. Pipe signs separate columns. To make sure a table is displayed properly, add an empty line before it.
Markup:
```markdown
Left-aligned column | Right-aligned column | Center-aligned column
:--- | ---: | :---:
Text | Text | Text
```
will be displayed as:
Left-aligned column | Right-aligned column | Center-aligned column
:--- | ---: | :---:
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||
|#
```
For more information, see [this YFM guide](https://ydocs.tech/ru/syntax/tables/multiline).
### Cuts {#cuts}
Use `cuts` to hide certain content, e.g., additional information or large blocks of code.
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.
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:
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 %}
### Accordion {#accordion}
An accordion allows you to collapse or expand content, which is helpful when you need to organize large amounts of information.
Markup:
```markdown
{% list tabs accordion %}
- Item 1 name
Item 1 content
- Item 2 name
Item 2 content
- Item 3 name
Item 3 content
{% endlist %}
```
will be displayed as:
{% list tabs accordion %}
- Item 1 name
Item 1 content
- Item 2 name
Item 2 content
- Item 3 name
Item 3 content
{% endlist %}
If you want an item to be expanded by default, add the {selected} attribute to it.
Markup:
```markdown
{% list tabs accordion %}
- Item 1 name
Item 1 content
- Item 2 name {selected}
This item will be expanded by default.
- Item 3 name
Item 3 content
{% endlist %}
```
will be displayed as:
{% list tabs accordion %}
- Item 1 name
Item 1 content
- Item 2 name {selected}
This item will be expanded by default.
- Item 3 name
Item 3 content
{% endlist %}
### Links {#links}
The Markdown syntax for an embedded link consists of the `[link text] and `(URL)` :
`[DataLens](https://datalens.ru)`
[DataLens](https://datalens.ru)
### Inserting code {#code}
In Markdown, you can both embed code snippets in a clause and place them between clauses as separate blocks.
```js
const a = 10;
```
This insert is converted to a highlighted code.
```js
const a = 10;
```
`` inline code.
```markdown
To insert inline code, wrap it in backticks: ``.
```
### Line break
To add a line break in a paragraph, use two spaces (⋅⋅) at the end of a line.
### Tooltips {#term}
Tooltips allow you to display term definitions when clicking a term. Definitions are linked to their respective terms using a term key. Markup:
```markdown
[*term_key]: Term definition which may include _basic_ markup:
* Lists
* Links
* Images, etc.
[Term](*term_key) used in the text.
```
will be displayed as:
`[Term](*term_key)` used in the text.
{% note info %}
Currently, you can only use tooltips in code blocks that do not specify a language.
{% endnote %}
### Images {#images}
```markdown
![alt text](https://yastatic.net/q/logoaas/v2/DataLens.svg "Text for tip on hover" =100x200)
```
### Emoji {#emoji}
To add an emoji, enter a keyword and wrap it in colons (:). 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 a simple 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. 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 supported in part (e.g., links do not work).
{% endnote %}
## Examples {#examples}
* [Markdown chart with parameterization](https://datalens.yandex/nvkfwnekf9xy9?tab=x6v#Markdown%20чарт%20с%20параметрами)
* [Mermaid diagrams and flowcharts](https://datalens.yandex/nvkfwnekf9xy9?tab=x6v#Markdown%20чарт%20c%20Mermaid-диаграммами)