---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.5
  - property: og:type
    content: article
  - property: article:section
    content: Работать с задачами
  - property: og:title
    content: Блочное форматирование
  - property: article:tag
    content: Сборник инструкций
alternate:
  - https://yandex.com.tr/support/tracker/en/wysiwyg/block-format.md
  - href: en/wysiwyg/block-format.md
    type: text/markdown
    title: Markdown version
  - href: ../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/support/tracker/en/llms.txt


[//]: # (Исходники yfmeditor/ хранятся в документации Yandex Wiki)

# Block formatting

You can add quotes, notes, collapsible text, custom-designed blocks, or clusters with multiple cells to an issue description or comment.

<!-- source: en/yfmeditor/block-format.md -->
In the visual editor, you can drag and drop blocks and other elements (like paragraphs and headings) to rearrange them or create nested structures. To move the block, hover over it and drag the ![](../yfmeditor/icons/moving.svg)</svg> icon on the left side.

You can use other markup elements inside the block formating elements.

To add a block to a page, select one or more paragraphs and use the toolbar buttons or keyboard shortcuts:

| Block | Toolbar button | Windows shortcuts | MacOS shortcuts |
--- | --- | --- | ---
| Comment | ![](../yfmeditor/icons/note.svg)</svg> | **Ctrl** + **Shift** + **8** | **⌘** + **⌥** + **8** |
| Cut | ![](../yfmeditor/icons/cut.svg)</svg> | **Ctrl** + **Shift** + **7** | **⌘** + **⌥** + **7** |
| Tabs | ![](../yfmeditor/icons/tabs.svg)</svg> | — | — |
| Quote | ![](../yfmeditor/icons/quote.svg)</svg> | **Ctrl** + **>** | **⌘** + **>** |
| Formatting block | ![](../yfmeditor/icons/block.svg) | — | — |
| Section | ![](../yfmeditor/icons/section.svg)</svg> | — | — |
<!-- endsource: en/yfmeditor/block-format.md -->

## Note {#note}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a note, click ![](../yfmeditor/icons/note.svg)</svg> **Note** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. In the menu under the block, select a note type:
        - ![](../yfmeditor/icons/note-info.svg)</svg> **Note**
        - ![](../yfmeditor/icons/note-tip.svg)</svg> **Tip**
        - ![](../yfmeditor/icons/note-warning.svg)</svg> **Warning**
        - ![](../yfmeditor/icons/note-alert.svg)</svg> **Alert**

    1. Enter the note title and text. Use other text formatting elements.

    1. To delete a block, click ![](../_assets/svg/delete.svg)</svg> in the menu under the block.

- Markdown markup

    To add a **Note** block, insert code in the following format into the text:

    ```
    {% note <note_type> "Heading" %}

    Add content for the note

    {% endnote %}
    ```

    - Specify the note type:

        - `{% note info "" %}`: Note.

        - `{% note warning "" %}`: Warning.

        - `{% note alert "" %}`: Alert.

        - `{% note tip "" %}`: Tip.

    - To change the text of the default title, add a custom title in quotation marks (`""`) after the specified type.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Cut {#cut}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a cut, click ![](../yfmeditor/icons/cut.svg)</svg> **Cut** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. Enter the cut title and text. Use other text formatting elements.

    1. To collapse or expand a cut, click ![](../yfmeditor/icons/show.svg)</svg>.

- Markdown markup

    To add a **Cut** block:

    1. Make sure there is an empty line before the block.

    2. Add markup in the following format:

        ```
        {% cut "Cut title" %}

        Content that appears when users click on it.

        {% endcut %}
        ```

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Tabs {#tabs}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a block with tabs to the page, click ![](../yfmeditor/icons/tabs.svg)</svg> **Tabs** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. To add a new tab, click ![](../_assets/svg/add-icon.svg)</svg> in the list of tabs.

    1. To delete a tab, click ![](../yfmeditor/icons/delete-line.svg)</svg> to the right of its title.

    1. To switch to another tab, click its title.

    1. Add content to tabs by using other text formatting elements.

- Markdown markup

    To add a **Tabs** block, insert code in the following format into the text:

    ```
    {% list tabs %}

    - First tab title

        First tab text

    - Second tab title

        Second tab text

    {% endlist %}
    ```

    Make an indent of 2–4 spaces before the tab text and press the **Tab** key.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Quote {#quote}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a quote, click ![](../yfmeditor/icons/quote.svg)</svg> **Quote** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also add formatting elements [using your keyboard](https://yandex.com.tr/support/tracker/en/user/markup.md#keyboard) or through the quick access menu: type `/` and select an item from the list. {#keyboard}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. Use other text formatting elements inside quotes.

    1. Separate the quote from the other text with an empty line.

- Markdown markup

    ```
    > To display a quote, use this character.
    >>To create a nested quote, add two such characters at the beginning of the paragraph.
    ```

    - To create a quote, use the character `>`.

    - To create a nested quote, insert the `>>` characters at the start of the paragraph.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Formatting block {#design-block}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a formatting block, click ![](../yfmeditor/icons/block.svg) **Formatting block** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. To set up rules for a formatting block, click ![](../_assets/svg/settings.svg)</svg> in the top right corner of the block:

        - **Alignment**: Position of the block relative to the other page content:
        - **None**: No alignment. The block will be fixed to the left side of the page, and no other content will appear on the same line.
        - **Left**: Left-aligned.
        - **Center**: Centered.
        - **Right**: Right-aligned.

        - **Width**: Block width in pixels (px).

        - **Indents**: Padding between the border and block content.

        - **Border type**: Border layout:
        - **None**: No border.
        - **Solid**: Solid line.
        - **Dashed**: Dashed line.

        - **Border size**: Border thickness.

        - **Border color**: Color of the border:
        - **Info**: Blue.
        - **Tip**: Green.
        - **Warning**: Orange.
        - **Alert**: Red.

- Markdown markup

    To add a formatting block, insert code in the following format into the text:

    ```
    {% block align=center width=1000 padding=xs border=solid borderSize=m borderColor=warning %}

    Text inside the block

    {% endblock %}
    ```

    Block parameters:

    - `align`: Position of the block relative to the other page content. Optional.

        Possible values:
        - `left`: Left-aligned.
        - `center`: Centered.
        - `right`: Right-aligned.

    - `width`: Block width in pixels (px). Optional.

    - `padding`: Internal indent between the border and block content. Optional.

        Possible values:
        - `xs`: 4 px
        - `s`: 8 px
        - `m`: 12 px
        - `l`: 16 px
        - `xl`: 20 px

    - `border`: Border layout. Optional.

        Possible values:
        - `solid`: Solid line.
        - `dashed`: Dashed line.

    - `borderSize`: Border thickness.

        Possible values:
        - `xs`: 1 px
        - `s`: 2 px
        - `m`: 4 px
        - `l`: 6 px

    - `borderColor`: Border color. If not specified, the border will be black.

        Possible values:
        - `info`: Blue.
        - `tip`: Green.
        - `warning`: Orange.
        - `alert`: Red.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Section {#layout}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a section and split a part of your page into multiple cells, click ![](../yfmeditor/icons/section.svg)</svg> **Section** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. To add a new cell, click the space with the ![](../_assets/svg/add-icon.svg)</svg> icon between two existing cells. You can use other markup elements of the new editor inside the cell.

    1. To change the cell width, click ![](../_assets/svg/actions.svg)</svg> in the top right corner of the cell and update the **Width** field value.

    1. To delete a cell, in its top right corner, click ![](../_assets/svg/actions.svg)</svg> → ![](../_assets/svg/delete.svg)</svg> **Delete cell**.

    1. To change display mode for all cells at once, click any cell. This opens a menu where you can:

        - Set the number and size of cells using one of the four templates:
            - ![](../yfmeditor/icons/section-two-cells.svg)</svg> **Two cells**
            - ![](../yfmeditor/icons/section-big-right.svg)</svg> **Large on the right**
            - ![](../yfmeditor/icons/section-big-left.svg)</svg> **Large on the left**
            - ![](../yfmeditor/icons/section-three-cells.svg)</svg> **Three cells**

        - Align the cells block relative to the other page content:
        - ![](../yfmeditor/icons/section-three-cells.svg)</svg> **Entire section left-aligned**
        - ![](../yfmeditor/icons/section-all-center.svg)</svg> **Entire section centered**
        - ![](../yfmeditor/icons/section-all-right.svg)</svg> **Entire section right-aligned**

        - Click ![](../_assets/svg/delete.svg)</svg> to delete a section.

- Markdown markup

    To add a section, insert code in the following format into the text:

    ```
    {% layout gap=l cols=auto justify=start %}

    {% block col=3 %}

    First cell content

    {% endblock %}

    {% block col=7 %}

    Second cell content

    {% endblock %}

    {% block col=1 %}

    Third cell content

    {% endblock %}

    {% endlayout %}
    ```

    Block parameters:

    - By default, sections are stretched at full page width. To change the block alignment, specify the `cols=auto` and `justify=` parameters for `layout` with the following values:
        - `start`: Left-aligned.
        - `center`: Centered.
        - `end`: Right-aligned.

    - To add a cell, insert its opening tag `{% block %}` and its closing tag `{% endblock %}` between the main tags.

    - For `block`, set the cell width `col=` to a value between 1 and 12.

    - Make sure there is at least one-line indent between the cell tags and content.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->