Skip to content

Commit 010dc71

Browse files
docs: add Syntax Highlighting Modes section (#5698)
1 parent 9fd6bc1 commit 010dc71

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed

README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -513,6 +513,62 @@ In order to inform `swagger-editor@5` npm package that I require it to use my sp
513513

514514
- [Plug points](./docs/customization/plug-points/README.md)
515515

516+
#### Syntax Highlighting Modes
517+
518+
SwaggerEditor supports two syntax highlighting modes for the Monaco editor:
519+
520+
1. **Simplified Mode (default)** - Regex-based syntax highlighting using Monaco's Monarch tokenizer
521+
2. **ApiDOM Mode** - Semantic token highlighting provided by ApiDOM Language Service
522+
523+
The simplified mode is enabled by default. If you need more sophisticated semantic highlighting, you can enable ApiDOM mode.
524+
525+
**Using Simplified Mode (default):**
526+
527+
```js
528+
import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';
529+
530+
// Default behavior - uses simplified syntax highlighting
531+
const plugins = [
532+
EditorMonacoLanguageApiDOMPlugin,
533+
// ... other plugins
534+
];
535+
```
536+
537+
**Enabling ApiDOM Mode:**
538+
539+
```js
540+
import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';
541+
542+
// Enable ApiDOM semantic token highlighting
543+
const plugins = [
544+
EditorMonacoLanguageApiDOMPlugin({ useApiDOMSyntaxHighlighting: true }),
545+
// ... other plugins
546+
];
547+
```
548+
549+
**Visual Differences:**
550+
551+
The two modes produce different syntax highlighting appearances:
552+
553+
- **Simplified mode**:
554+
- Uses regex-based Monarch tokenizer for syntax coloring
555+
- Keywords, strings, numbers, and booleans each have distinct colors
556+
- Does not colorize bracket pairs (brackets are styled as part of the overall token)
557+
- Color scheme defined by theme token rules: `plain.keyword`, `plain.value.string`, `plain.value.number`, `plain.value.boolean`
558+
559+
- **ApiDOM mode**:
560+
- Uses semantic token analysis from ApiDOM Language Service
561+
- Provides context-aware token coloring based on specification structure
562+
- Enables bracket pair colorization (semantic tokens don't include bracket information, so editor's bracket colorization feature is enabled)
563+
- Color scheme uses ApiDOM-specific token types with more granular semantic categories
564+
565+
Both modes support:
566+
- OpenAPI 2.0, 3.0, 3.1
567+
- AsyncAPI 2.x, 3.x
568+
- JSON and YAML syntax
569+
- Specification extensions (x- prefixed fields)
570+
- Inline JSON objects and arrays
571+
516572
### Environment Variables
517573
518574
It is possible to use an environment variable to specify a local JSON/YAML file or a remote URL for SwaggerEditor to load on startup.

0 commit comments

Comments
 (0)