Skip to main content
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

1

Add a new block

Click the + button and select Code.
2

Choose a language

Select the programming language from the dropdown at the top of the code block. This enables syntax highlighting for that language.
3

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:
LanguageLanguageLanguageLanguage
JavaScriptTypeScriptPythonHTML
CSSJSONSQLBash
GoRustJavaC
C++RubyPHPSwift
KotlinYAMLXMLPlain Text
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.
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:
FormatRendering
PDFMonospace font, no syntax coloring
HTMLSyntax highlighted with Prism.js
MarkdownFenced code block with language identifier
PresentationDedicated code slide with Prism.js highlighting
AI VideoAI 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.
Yes. Click anywhere in the code block to edit its content. You can also change the language at any time using the dropdown.
Line numbers are not shown in the editor, but they appear in some export formats (HTML, presentation).
Yes. Select the code text and use Cmd+C / Ctrl+C to copy it to your clipboard.
Use Plain Text mode. The code will display correctly in monospace font — it simply will not have color-coded syntax highlighting.
There is no hard character limit. However, very large code blocks (1000+ lines) may affect editor performance and are not recommended for tutorials.