Basic Examples
This page demonstrates the basic usage of Monaco Editor Vue3 components, including common use cases for the single-file editor and diff editor.
Diff Editor
The DiffEditor is used to compare two versions of code, supporting side-by-side display and highlighting changes.
Key Features:
- Side-by-side diff comparison
- Highlighting of added, deleted, and modified content
- Syntax highlighting for various programming languages
- Responsive layout
JavaScript / TypeScript Editor
Full support for JavaScript and TypeScript syntax highlighting, intelligent suggestions, and error checking.
Key Features:
- Syntax highlighting and auto-completion
- Real-time error checking
- Code formatting
- Smart refactoring suggestions
Configuration Explanation
The above examples use a unified editor configuration:
| Option | Value | Description |
|---|---|---|
colorDecorators | true | Enable color decorators for CSS preview |
lineHeight | 24 | Set line height to 24px |
tabSize | 2 | Set tab to 2 spaces |
automaticLayout | true | Enable automatic layout adjustment |
lineNumbers | 'on' | Show line numbers |
folding | true | Enable code folding |
matchBrackets | 'always' | Always highlight matching brackets |
scrollBeyondLastLine | false | Prevent scrolling beyond the last line |
For more options, see the Monaco Editor official docs.
JSON Editor
Optimized for editing JSON data, providing syntax validation, formatting, and folding features.
Key Features:
- JSON syntax validation and error hints
- Auto-formatting and beautification
- Folding for objects and arrays
- Smart bracket matching
CSS / Less / Sass Editor
Supports modern CSS preprocessors, with property suggestions and color preview features.
Key Features:
- CSS property suggestions
- Color value preview and selector
- Less/Sass syntax support
- Auto-completion for CSS selectors
HTML / Handlebars / Razor Editor
Supports HTML and template engines, with tag completion and attribute suggestions.
Key Features:
- HTML tag and attribute auto-completion
- Template syntax highlighting (Handlebars, Razor)
- Auto-indentation for nested tags
- Real-time HTML validation
SQL Editor
Professional SQL query editor supporting multiple database dialects.
Key Features:
- SQL keyword highlighting
- Table and field name suggestions
- Query syntax validation
- Support for multiple database dialects