CodeEditor

ic.CodeEditor is a code editor built on CodeMirror 6. It supports syntax highlighting for MATLAB, JavaScript, Markdown, CSS, Typst, LaTeX, and plain text, along with the usual editor features: line numbers, bracket matching, code folding, find and replace, multiple cursors, and programmatic cursor/viewport control.

Language and read-only mode

Language sets the syntax grammar (MATLAB by default). ReadOnly prevents editing. Placeholder shows ghost text when the editor is empty.

Gutter and line display

LineNumbers toggles the gutter. HighlightActiveLine marks the line the cursor is on. LineWrapping wraps long lines instead of scrolling horizontally. ZebraStripes adds alternating backgrounds every N lines (set N with ZebraStripeStep). ShowStatusBar controls the bottom bar with cursor position and language.

Editing behavior

BracketMatching highlights the matching bracket when the cursor is next to one (on by default). CloseBrackets auto-inserts the closing bracket or quote. CodeFolding shows fold controls in the gutter for collapsible blocks (functions, if/for/switch in MATLAB, braces in JS/CSS). TabSize sets spaces per tab. FontSize overrides the font size in pixels (0 = default). AllowMultipleSelections enables Ctrl+Click for additional cursors. ScrollPastEnd lets you scroll past the last line.

Line annotations

HighlightedLines adds a background to the given line numbers. UneditableLines locks lines so the user cannot modify them (the lock sticks even if lines are inserted above or below). Rulers draws vertical lines at specific column positions. IndentGuides shows vertical guides connecting the start and end of MATLAB block structures (function/end, if/end, etc.). HighlightSelectionMatches marks all other occurrences of the currently selected text.

Search and replace

The editor has a built-in search bar. Open it with Ctrl+F / Cmd+F, or set ShowSearch = true from MATLAB. Ctrl+H / Cmd+H opens search with the replace row visible. If text is selected when search opens, it pre-fills the query. Supports case-sensitive matching and replace-all.

Height

Height accepts a pixel value or any CSS size string ("50vh", "calc(100% - 40px)"). The default is "100%", which fills the parent container.

Events

ValueChanged fires when the content changes, with the new text in evt.Data.value. SelectionChanged fires when the cursor moves, with the current line and column. FocusChanged fires on focus and blur with a boolean focused field.

Folding and navigation

foldAll() and unfoldAll() collapse or expand all foldable blocks (CodeFolding must be enabled). gotoLine(n) moves the cursor to line n. scrollToLine(n) scrolls to line n without moving the cursor. undo() and redo() do what you would expect.

Custom styling

Styling of the editor, including syntax colors, can be done by overriding the --ic-* CSS variables on .ic-ce. The editor reads these variables for everything (background, text, keywords, strings, gutter, cursor), so a single css.style call can retheme the whole component. For finer control, you can also target individual CodeMirror classes like .cm-gutters, .cm-activeLine, or .ic-ce__status.

editor = ic.CodeEditor();
editor.Value = "x = linspace(0, 2*pi, 100);";

% Override the theme variables on the root container.
% The editor reads --ic-* vars for all its colors,
% so this retargets everything at once.
editor.css.style(".ic-ce", ...
    "--ic-background",         "#1e1e2e", ...
    "--ic-foreground",          "#cdd6f4", ...
    "--ic-primary",             "#89b4fa", ...
    "--ic-secondary",           "#181825", ...
    "--ic-border",              "#313244", ...
    "--ic-muted-foreground",    "#6c7086", ...
    "--ic-success",             "#a6e3a1", ...
    "--ic-warning",             "#fab387", ...
    "--ic-info",                "#94e2d5", ...
    "--ic-destructive",         "#f38ba8", ...
    "--ic-ce-active-line",      "rgba(137, 180, 250, 0.08)", ...
    "--ic-ce-active-gutter",    "rgba(137, 180, 250, 0.10)", ...
    "border_radius",            "8px");

The main selectors you can target:

• .ic-ce — the outer container (border, background, border-radius)
• .cm-editor — the CodeMirror root (background)
• .cm-content — the text area (font color, font family, padding)
• .cm-gutters — the gutter panel (background, text color, border)
• .cm-activeLine — the highlighted current line
• .cm-cursor — the blinking caret (border-left-color)
• .cm-lineNumbers — line number digits
• .ic-ce__search — the floating search bar
• .ic-ce__status — the bottom status bar