Code Blocks
Code blocks let you include source code, terminal commands, configuration files, and other technical content in your tutorials. Code is displayed in a monospace font with syntax highlighting powered by Prism.js.
Creating a Code Block
- Add a new block — Click the + button and select Code.
- Choose a language — Select the programming language from the dropdown at the top of the code block. This enables syntax highlighting for that language.
- Write or paste code — Type or paste your code into the editor area. The code preserves whitespace, indentation, and line breaks exactly as entered.
Supported Languages
clarife supports syntax highlighting for 20 languages:
| Language | Language | Language | Language |
|---|---|---|---|
| JavaScript | TypeScript | Python | HTML |
| CSS | JSON | SQL | Bash |
| Go | Rust | Java | C |
| C++ | Ruby | PHP | Swift |
| Kotlin | YAML | XML | Plain Text |
ℹ️ Info: Select Plain Text (the default) if your language is not listed. The code will be displayed in a monospace font without highlighting.
Overflow Warning
If the code content exceeds the visible area of the block, a warning indicator appears at the top of the code block. This alerts you that some code is hidden below the fold. Long code blocks scroll vertically within the editor.
💡 Tip: Keep code snippets focused and short — ideally under 30 lines. If you need to show a large file, consider splitting it into multiple code blocks with explanatory text between them.
Code in Exports
Code blocks are preserved across all export formats:
| Format | Rendering |
|---|---|
| Monospace font, no syntax coloring | |
| HTML | Syntax highlighted with Prism.js |
| Markdown | Fenced code block with language identifier |
| Presentation | Dedicated code slide with Prism.js highlighting |
| AI Video | AI can generate a "code" visual slide showing your snippet |
Code in AI Video
When generating an AI video from a document that contains code blocks, the AI scenario generator can create dedicated code slides. These slides display your code with Prism.js syntax highlighting in a purple-themed visual layout, making technical content visually engaging in video form.
Can I edit code after adding it?
Yes. Click anywhere in the code block to edit its content. You can also change the language at any time using the dropdown.
Does the code block support line numbers?
Line numbers are not shown in the editor, but they appear in some export formats (HTML, presentation).
Can I copy code from the block?
Yes. Select the code text and use Cmd+C / Ctrl+C to copy it to your clipboard.
What happens if my language is not supported?
Use Plain Text mode. The code will display correctly in monospace font — it simply will not have color-coded syntax highlighting.
Is there a size limit for code blocks?
There is no hard character limit. However, very large code blocks (1000+ lines) may affect editor performance and are not recommended for tutorials.