Skip to main content
Craft’s Code Editor lets you create, edit, and display code directly inside your documents. It supports over 30 programming languages, offers syntax highlighting for most of them, and provides a clean, reliable experience for technical writing and documentation. Code editor overview Code editor fullscreen mode

​
Inserting a Code Block

Add a code block anywhere in your document using one of these methods:
  • Type /code and select Insert Code Block
  • Choose Code Block from the Insert menu in the right sidebar
  • Type three backticks ``` to insert a code block
Inserting a code block

​
Changing the Language

Set the programming language for proper syntax highlighting:
1
Click on the three-dot menu (⋯) at the top right corner of the block.
2
Click on Select Language (the coding icon).
3
Choose a different language from the list.
4
Highlighting updates immediately for supported languages.
Selecting a programming language

​
Customizing the Theme

Change the visual appearance of your code blocks:
1
Click on the three-dot menu (⋯) at the top right corner of the block.
2
Click on Select Theme (the brush icon).
3
Choose your preferred theme from the list.
Selecting a code theme

​
Key Features

The Code Editor includes:
  • Craft AI Assistant integration - Work on your code directly with AI
  • Full screen mode - Focus on code without distractions
  • No character limit - Long code samples are fully supported
  • Line wrapping - Better readability for long lines
  • Improved stability - Past issues with disappearing code blocks resolved
  • Clean, redesigned full-screen mode - Enhanced experience on Mac
  • Automatic saving - In the full-screen editor on Mac, iPhone, and iPad, changes save automatically as you type and when you close the editor. There’s no separate save step.
  • Close with Esc - With a keyboard on Mac, iPad, or iPhone, press Esc to stop editing, then press Esc again to close the full-screen editor.

​
Limitations

The Code Editor is still evolving. Keep these behaviors in mind:
  • Math formulas: You cannot convert a code block into a math formula using the language selector. Math formulas must be inserted explicitly using /formula or the Insert sidebar. See Math Formulas for details.
  • Fixed height: Code blocks in the document view have a fixed height and do not scroll. This prevents conflicts between page scrolling and block scrolling.
  • No syntax highlighting for these languages: Ada, Dart, Haskell, Julia, Matlab, Objective-C, Perl, Prolog, Scala, VB.NET
  • No auto-complete: Code auto-complete features (like automatically adding closing tags) are not supported, as they’re not part of Runestone, the basis for our Code Editor.
  • Performance on older devices: Performance may be affected on less powerful devices if many code blocks are added to the same page, although overall performance has been significantly improved.
  • Spellcheck: Spellcheck behavior is controlled by Safari or system settings, not by Craft.
The Craft AI Assistant can work directly with your code blocks, helping you debug, explain, or refactor code without leaving your document.