Insert Code Block

Release 3.3.0 and above.

The code block feature adds a dedicated block where you can write code within a document.

Through code blocks, you can express code clearly and readably when writing technical documents or development-related documents.

// synapeditor.config.js
{
  'editor.toolbar': [
    // ...
    'codeBlock' // Adds the code block button to the toolbar
    // ...
  ]
}

Insert code block

Applying Code Block Highlighting Theme CSS

When you apply the code highlighting plugin, calling getPublishingHtml() in the editor returns HTML in a form that can be highlighted.

Code block highlighting