Code blocks

For source code, config files and terminal commands, where characters and spaces must stay exactly as typed. Shown in a gray box with a monospace font.

createEditor('#editor', {
  toolbar: 'heading | bold code | codeBlock | undo redo',
});

How to use

• The codeBlock button or Ctrl+Shift+C turns the paragraph at the caret (or the selected paragraphs) into a code block, one line per paragraph.
• Inside a code block the button turns each line back into a paragraph. Backspace at the very start does too.
• Enter adds a line. Enter on an empty last line leaves the block.
• Tab inserts two spaces.
• On an empty line, type / and pick "Code block".
• The selection bubble toolbar does not show inside code blocks.

Choosing a language

With the caret in a code block, a bar shows below it. The language you pick goes on <code> as class="language-…". The editor does not color the code; a highlighter on the reading page (Prism, highlight.js and the like) uses that class. The bar’s close button turns the block back into paragraphs.

Code inside a sentence

For a word or a short command, use the code button (Ctrl+E). With markdownShortcuts on, typing `code` in backticks works too. Markdown ``` fences come in through Markdown paste.

Saved HTML

<pre><code class="language-js">const editor = createEditor('#editor', {
  toolbar: 'board',
});</code></pre>

editor.exec('codeBlock');         // add / remove
editor.exec('codeBlock', 'php');  // add with a language
editor.exec('code');              // inline code

Presets

codeBlock is under ⋯ in the board and full presets. code (inline) is only in full.

Options