Code Editor Basics¶
When to use this page¶
Use this guide when you need to:
- make precise HTML/CSS/JavaScript edits,
- apply a safe edit-validate-publish workflow,
- recover quickly from problematic source-level changes.
When to use code editor¶
Use the code editor when visual editing is not enough and you need precise control of markup, styles, or scripts.
Best-fit use cases:
- Fine-grained HTML structure updates.
- CSS tweaks that are hard to express in visual tooling.
- Small JavaScript behavior updates in page or layout sections.
- Template and layout maintenance by technical editors.
The editor is Monaco-based (the same core editor used by VS Code), so you get syntax highlighting, code completion, and strong keyboard workflows.
Safe editing workflow¶
- Open the target content in draft mode when possible.
- Edit one logical section at a time.
- Save frequently (
Ctrl+S/Cmd+S) even when auto-save is enabled. - Preview the page in context before publishing.
- Publish only after verifying links, media, and responsive layout.
Tips:
- Use Emmet snippets for faster HTML/CSS authoring.
- Keep code blocks organized and readable.
- Prefer small, testable changes over large rewrites.
Validation steps¶
Before publish, validate:
- HTML structure renders correctly in preview.
- CSS changes do not break mobile/tablet layouts.
- JavaScript changes run without console errors.
- Links and images resolve correctly.
- Accessibility basics: headings order and image alt text.
Rollback strategy¶
If a change causes issues:
- Stop publishing new edits.
- Reopen the previous working version in editor history/version tools.
- Restore or copy back the known-good section.
- Re-test and publish the corrected version.
Keyboard shortcuts¶
File operations¶
| Shortcut | Action |
|---|---|
| Ctrl+S / Cmd+S | Save |
| Ctrl+F / Cmd+F | Find |
| Ctrl+H / Cmd+H | Find and replace |
| Ctrl+Z / Cmd+Z | Undo |
| Ctrl+Y / Cmd+Y | Redo |
Editing¶
| Shortcut | Action |
|---|---|
| Ctrl+C / Cmd+C | Copy |
| Ctrl+X / Cmd+X | Cut |
| Ctrl+V / Cmd+V | Paste |
| Ctrl+A / Cmd+A | Select all |
| Ctrl+/ / Cmd+/ | Toggle comment |
| Shift+Alt+A | Block comment |
| Shift+Alt+F | Format document |
| Tab | Indent |
| Shift+Tab | Un-indent |
Navigation¶
| Shortcut | Action |
|---|---|
| Ctrl+Home | Go to start of file |
| Ctrl+End | Go to end of file |
| Ctrl+G | Go to line number |
Multi-cursor¶
| Shortcut | Action |
|---|---|
| Alt+Click | Add cursor at click position |
| Ctrl+D | Select next occurrence of word |
| Ctrl+Shift+L | Select all occurrences |
| Alt+Shift+Down | Add cursor below |
| Alt+Shift+Up | Add cursor above |
Copilot inline assistance¶
The code editor supports AI-powered inline completions. When configured and enabled by an administrator, the editor displays ghost-text suggestions as you type; press Tab to accept the current suggestion.
The feature activates automatically at page load if the server is configured — no manual toggle is required.
- Inline completions are context-aware: the model receives the current language, the text before the cursor, and a small window of text after the cursor.
- Pressing Tab accepts the suggestion. Continuing to type dismisses it.
- If the server is temporarily unreachable at load time, the editor retries quietly and continues to function normally without completions.
For setup instructions and field descriptions, see Copilot Setup.
For diagnosing issues, see Copilot Troubleshooting.