Code Block

The Code block lets you embed custom HTML, CSS, and JavaScript into your lessons. Use it to build interactive elements, custom visualizations, or any content that goes beyond the standard block types.

Modes

The Code block has three modes:

Blocks mode

The default mode. Combines nested content blocks (text, images, etc.) with custom CSS and JavaScript. Use this when you want to add interactivity to standard content.

HTML mode

Separate editors for HTML, CSS, and JavaScript. Write code in each tab and see it rendered in the course player. Use this for fully custom interactive elements.

Snippet mode

Paste a complete HTML document. Slate automatically splits it into HTML, CSS, and JavaScript components. Use this when copying code from an external tool or template.

Editor features

The code editor includes:

• Syntax highlighting for HTML, CSS, and JavaScript
• Auto-formatting (js-beautify)
• Copy to clipboard
• Download as .html file
• Character count

AI generation

Click Generate with AI to describe what you want to build in plain language. Slate generates a complete, self-contained HTML snippet. Code generation costs 100 AI credits.

jQuery

Enable the jQuery toggle to load the jQuery library in your code block. When enabled, you can use $ and jQuery in your JavaScript.

Theme variables

Your code has access to CSS variables from the course theme:

• --primary-color, --hover-color - brand colors
• --border-radius - corner rounding
• --text-color, --text-muted - text colors
• --bg-light, --bg-muted - background colors
• --border-color - border color
• --success-color, --error-color - status colors

These variables adapt automatically to the course theme.

Security sandbox

Code blocks run in an isolated container. Your JavaScript has access to container (the block’s DOM element) but cannot access document, window, fetch, localStorage, or other browser APIs outside the block. Use container.querySelector() instead of document.querySelector() to target elements within your block.