Markdown
Visualization for rendering Markdown, a simplified markup language.
It supports GitHub Flavored Markdown (GFM), except for inline raw HTML, certain plugins, and Yandex Flavored Markdown features.
Charts are rendered using the @diplodoc/transform library. For more information, see the relevant Diplodoc article.
Available markup components
Structure on the Prepare tab
Executing the Prepare tab should result in exporting the Markdown rendering data.
Available methods
-
Editor.getParams(): Returns an object with normalized parameters. -
Editor.getLoadedData(): Returns an object with data requested on the Sources tab.
Example
// generating text
const inline = 'To insert inline code, wrap it in backticks'
+ '`<html class="ie no-js">`.';
const text = `
# H1 heading
## H2 heading
### H3 heading
#### H4 heading
${inline}
`;
// exporting the data for rendering
module.exports = {
markdown: text
};
Markdown markup
Headings
To create a heading, use the (#) character, for example:
# 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
To make text bold, wrap it in double asterisks:
This text is **bold**.
To make text italic, wrap it in underscores:
This text is _italic_.
To make text bold and italic, use both double asterisks and underscores:
This text is _**bold and italic**_.
This text is **_bold and italic_**.
To apply strikethrough formatting to text, wrap it in double tildes (~~):
This text is ~~strikethrough~~.
To make text underlined, wrap it in double pluses (++):
This text is ++underlined++.
To create a subscript, wrap the text in tilde characters (~):
This text is in ~subscript~.
To create a superscript, wrap the text in (^) characters:
This text is in ^superscript^.
To make text monospaced, wrap it in (##) characters:
This text is ##monospaced##.
To highlight text, wrap it in double equal characters (==):
This text is ==highlighted==.
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:
This text is {green}green.
will be displayed as:
This text is green.
Lists
Unordered list
You can format an unordered (bulleted) list using an asterisk (*), hyphen (-), or plus sign (+). For example, the following Markdown markup:
- 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:
- Item 1
- Item A
- Item B
- Item 2
will be displayed as:
- Item 1
- Item A
- Item B
- Item 2
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:
- Item 1
- Item 2
- 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 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:
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.
Cuts
Use cuts to hide certain content, e.g., additional information or large blocks of code.
Markup:
{% cut "Cut title" %}
Content displayed on click.
{% endcut %}
will be displayed as:
Cut title
Content displayed on click.
Tabs
Use tabs for mutually exclusive sections, e.g., to separate instructions for different operating systems.
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:
Tab 1 text
- You can use lists.
- And other markup.
Tab 2 text
If you want an item to be expanded by default, add the {selected} attribute to it:
Markup:
{% 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:
Tab 1 text
This item will be expanded by default.
Tab 3 text
Accordion
An accordion allows you to collapse or expand content, which is helpful when you need to organize large amounts of information.
Markup:
{% 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:
Item 1 content.
Item 2 content.
Item 3 content.
If you want an item to be expanded by default, add the {selected} attribute to it:
Markup:
{% 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:
Item 1 content.
This item will be expanded by default.
Item 3 content.
Links
The Markdown syntax for an embedded link consists of the [link text] and (URL)` :
[DataLens](https://datalens.ru)
Inserting code
In Markdown, you can both embed code snippets in a clause and place them between clauses as separate blocks.
const a = 10;
This insert is converted to a highlighted code.
const a = 10;
<html class="ie no-js"> inline code.
To insert inline code, wrap it in backticks: `<html class="ie no-js">`.
Line break
To add a line break in a paragraph, use two spaces (⋅⋅) at the end of a line.
Tooltips
Tooltips allow you to display term definitions when clicking a term. Definitions are linked to their respective terms using a term key. Markup:
[*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
Currently, you can only use tooltips in code blocks that do not specify a language.
Images
![alt text](https://yastatic.net/q/logoaas/v2/DataLens.svg "Text for tip on hover" =100x200)
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:
Emoji :smiley:.
will be displayed as:
Emoji 😀.
Mermaid diagrams
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 the Mermaid documentation for details.
Note
When using Mermaid, keep the following limitations in mind:
- There is no HTML support.
- You cannot use the
classattribute 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).