Skip to content
Foliosodev
Sign in Get started
Menu
On this page

Writing pages

Code blocks

Code blocks hold syntax-highlighted code with line numbers, a language picker and a copy button. This page covers inserting them, choosing a language, indenting, and the defaults you can set.

Insert a code block

Any of these works:

  • Click Code block on the toolbar.
  • Type / at the start of a line and choose Code block.
  • Type three backticks, optionally followed by a language, then a space or Enter. For example, type ```php and press Enter. Three tildes (~~~) work too.
  • Press Ctrl Alt C (⌘ Option C on a Mac).

A new block starts in your default language. See Set your defaults.

To use inline code inside a sentence instead, wrap it in single backticks or press Ctrl E. See Formatting text.

Choose the language

Pick the language from the menu at the top left of the block. The block is highlighted as soon as you choose.

Languages in the menu
Plain text, TypeScript, JavaScript, PHP, Python, Go, Rust, Bash, SQL, HTML, CSS, YAML, JSON, Dockerfile

When you start a block by typing a fence, common short names are understood:

You type Language
js JavaScript
ts TypeScript
py Python
sh, shell, zsh, shellscript Bash
yml YAML
docker Dockerfile

You can type a language that isn't in the menu, such as ```ruby. The block keeps it, shows it in the menu by name, and highlights it where Folioso recognises the language. Otherwise it's shown as plain text. The same applies to code you paste from sites such as GitHub that label their code blocks with a language.

Plain text turns highlighting off.

Write and indent code

Inside a code block:

Key What it does
Tab Inserts spaces at the cursor. With several lines selected, indents every one.
Shift Tab Removes one level of indentation from the current or selected lines.
Enter Starts a new line in the block.
Enter three times at the end Leaves the block and starts a new paragraph below it.
Down arrow on the last line Leaves the block, onto the line below it.

The number of spaces per Tab is your Tab Size setting.

The / block menu, the # page-link picker and the @ mention picker don't open inside code, so you can type #include or @decorator freely.

Copy and move a block

  • Copy: hover over the block and click Copy at the top right. The button shows a tick when the code is on your clipboard. Readers who can't edit the page can copy too.
  • Move: hover over the block, then press and hold Drag to move beside the copy button and drag the block to a new place on the page.

Set your defaults

Your code block defaults are personal settings. They apply to every page you open, and don't change what other people see.

  1. Click Settings at the bottom of the sidebar.
  2. Under Editor Preferences, choose:
    • Default Code Language: the language new code blocks start in. Plain text means no highlighting.
    • Tab Size: 2 or 4 spaces per Tab.
    • Line Numbers: whether code blocks show line numbers.

Until you change them, blocks start as plain text, Tab inserts 4 spaces and line numbers are on. Changes save automatically. See Preferences.

Code blocks elsewhere

  • Export as Markdown writes each code block as a fenced block with its language, ready for a README.
  • PDF exports, shared pages and public links show the same highlighting.
  • Search covers the code in your blocks, so you can find a page by a function or command name. See Search.