Code Blocks

Code blocks let you display syntax-highlighted code in your lessons. While primarily useful for programming language courses, they also serve as a clear way to show structured text, command examples, or technical content.

Inserting a Code Block

Type /code in the editor or click the code button in the toolbar. A dropdown at the top of the code block lets you choose the programming language (50+ supported, including Python, JavaScript, TypeScript, HTML, CSS, SQL, JSON, YAML, Bash, and more). Syntax highlighting applies automatically based on the selected language.

Syntax Highlighting

The editor ships with two highlighting engines:

• Prism -- fast, lightweight, handles most common languages
• Shiki -- higher-fidelity highlighting with VS Code themes

The engine is selected automatically. Both produce clear, readable code with colored keywords, strings, comments, and operators.

Code Block Features

• Line numbers -- toggle line numbers on or off
• Copy button -- a one-click button to copy the code to clipboard (visible to both teachers and students)
• Language label -- the selected language name appears in the corner of the block
• Scrolling -- long code blocks scroll horizontally rather than wrapping, keeping formatting intact

Use Cases for Language Teachers

While code blocks are mainly for programming, they can also be used to display:

• Example command-line instructions for language tools
• JSON or structured data examples in technical language courses
• Formatted template structures (e.g., email formats, letter formats)

Frequently Asked Questions

Can students edit code in a code block?

No. Code blocks are read-only for students. They are a display element. If you need students to write code, use an essay block with appropriate instructions.

Can I highlight specific lines?

Line highlighting is not currently supported, but you can use comments within the code or SpecialText in surrounding paragraphs to draw attention to specific sections.

What if my language is not listed?

Choose "Plain text" from the language selector. The code will display without syntax highlighting but will still have the code block formatting.