---
url: https://flip-chart.ru/knowledge-base/en/code-block.md
description: >-
  A code block in flip is an element for code snippets with syntax highlighting
  and line numbers: create it with the tool, by pasting from the clipboard or by
  uploading a file, choose the language, copy or download the code
---

# How to add a code block

A code block is an element for code snippets with syntax highlighting, line numbers and a monospaced font. It is handy for discussing a query, a configuration or an implementation example with your team right next to diagrams and notes

## How to add a code block

1. On the toolbar, select “Code block” or press the `` ` `` key

   If the tool is not on the toolbar, open “All tools” — it is in the “Essentials” section

2. Click the flip — a block with an open editor appears

3. Type or paste the code

4. Press Esc or click outside the block — the changes are saved

To change the code again, double-click the block. In the editor, the Tab key inserts two spaces, and the block grows taller as lines are added

![A code block with syntax highlighting and line numbers](/images/kb/code-block/1.png)

You can also create a block without the tool:

* Copy some code and paste it onto an empty spot on the flip — flip recognizes the code, creates a block and detects the language by itself. Fragments shorter than 10 characters and plain text are pasted as text
* Drag a code file onto the flip or add it with “Upload” — the language is detected from the extension, and the file name becomes the block title. If there are several files, a separate block is created for each one

## How to upload a Markdown or text file

When you upload a .md or .txt file, flip asks how to add it:

* “Create as document” — an editable document on the flip, see [Documents](/en/documents) for details
* “Create as code block” — the file contents as text
* “Create as file” — a view-only document. This option is offered for .txt files only

Pick the option you need and click “Select”. To close the window without importing, click “Cancel”

![Choosing how to add a text file](/images/kb/code-block/2.png)

## How to choose the language

Select the block and click “Language” in the menu above it. The available options are JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Ruby, Rust, PHP, Swift, Kotlin, SQL, HTML, CSS, Shell, JSON, Markdown, YAML, XML and Plain Text — the last one shows the code without highlighting

Highlighting is recalculated right after you choose, and the language name is shown in the block header. Until a language is chosen manually, flip detects it by itself when you change the code and leave the editor — including in a block created with the tool. If the language is detected incorrectly, choose it in the list. A language chosen manually does not change automatically as you keep editing

![The “Language” list in the code block menu](/images/kb/code-block/3.png)

## Line numbers, font size and title

* “Line numbers” — shows or hides the numbering. A new block has line numbers turned on
* “Font size” — changes the size of the code, and the block adjusts to the new size
* “Insert link” — adds a link to the block
* The title is shown above the block. Click it on a selected block to rename the block. If you leave the title empty, the default one comes back — “Code block” with a number

## How to collapse a long block

If a block has more than 20 lines, a “Collapse” button appears in it. A collapsed block shows the first 20 lines. Click “Show all” to display the whole code again

![A collapsed code block with the “Show all” button](/images/kb/code-block/4.png)

## How to copy or download the code

* Click the copy button inside the block — the whole code goes to the clipboard without the title and line numbers, even if the block is collapsed. A “Copied” notification appears. The button also works for members with view-only access
* Click “Download” in the block menu — the code is saved as a file: the name comes from the block title and the extension from the chosen language, for example .py for Python and .txt for Plain Text

## Limitations

* A block holds no more than 1500 lines. Only the first 1500 lines of a larger file are loaded
* The block title cannot be formatted: the font, style and color of the title do not change
* The menu with the language, font size, line numbers and download is available when a single block is selected