ContextQMD
Back to Notesnook

Code blocks

docs/help/contents/rich-text-editor/code-blocks.md

3.4.10-android5.5 KB
Original Source

Code blocks

A code block keeps code as code: monospaced, syntax highlighted, indentation preserved, and never touched by spellcheck or autocorrect. Insert one from the toolbar's + button, with Ctrl+Shift+C, or by typing ``` on an empty line.

Insert a code block

  1. Place the cursor on an empty line.
  2. Click the + (Insert) button in the toolbar.
  3. Choose Code block.

You can also press Ctrl+Shift+C (⌘+Shift+C on macOS). If you press it with text selected, the selected text becomes the code block's contents, line breaks and all. Pressing it again while the cursor is inside a code block turns the block back into normal paragraphs.

Type ``` instead <PlanTag plan="essential"/>

On an empty line, type three backticks followed by a space or Enter — ``` — and the line becomes a code block. Add a language name straight after the backticks to set the language at the same time: ```javascript. The name has to be plain lowercase letters, so ```c++ and ```objective-c won't trigger it — pick those from the language menu instead. Three tildes (~~~) work the same way.

::: info Markdown shortcuts need to be enabled. Typing ``` relies on Markdown shortcuts. They are off by default on web and desktop — turn on {{mardownShortcuts}} in {{settings}} → {{customization}} → {{editor}} first. On mobile they are on by default. The toolbar button and Ctrl+Shift+C work on every plan.

:::

Choose the language

Every code block has a language button in the bar along its bottom edge showing the current language. The default is Plaintext until you change the language once.

  1. Click the language name at the bottom of the code block.
  2. Type in the {{searchLanguages}} box to filter the list — it matches both language names and their aliases (searching js finds JavaScript).
  3. Click the language you want, or press Enter to take the first result.

There are 297 languages to choose from, each highlighted with its own grammar.

::: tip The last language becomes the default The language you pick is remembered on that device and used for every code block you create afterwards, so you only have to set your usual language once.

:::

<!-- TODO: screenshot — the language picker with the search languages field -->

Read the line and column indicator

The bar along the bottom of a code block shows Line 1, Column 1 for wherever the cursor is. When you select code, the count of selected characters is appended — Line 4, Column 12 (37 selected).

Switch between spaces and tabs

Next to the line indicator is a button reading Spaces: 2 or Tabs: 2 — this is the {{toggleIndentationMode}} control.

  1. Click (or tap) the {{spaces}} / {{tabs}} button.
  2. Every indented line in that block is rewritten to use the other character.

The setting is per code block, so one block can use tabs while another uses spaces. Inside a block, Tab inserts one indent level at the cursor, or indents every line when you have several selected, and Shift+Tab removes one level from the start of each selected line.

Copy a code block

Once a code block has content, a {{copy}} button appears in its bottom bar. Click it and the label changes to {{copied}} for a second. It copies the code only — no surrounding note text.

Paste code from VS Code or GitHub

Paste code copied out of VS Code or from a GitHub file view and Notesnook creates a code block for it automatically, using the language the source reported. Indentation is normalized to the block's own indentation settings, and carriage returns are stripped.

Short single-line snippets are treated as inline code instead of a full block. Pasting into an existing code block always inserts plain text, so highlighting stays intact.

::: tip Leaving a code block Press Enter three times at the end of a block, or press the down arrow at the very bottom of the last block in a note, and the cursor moves out into a new paragraph. Ctrl+A inside a code block selects that block's code rather than the whole note.

:::