0
# Language Support
1

2
The language support system provides syntax highlighting and language-specific features for 100+ programming languages through a comprehensive registry system.
3

4
## Capabilities
5

6
### EditorLanguageRegistry
7

8
Main registry for managing programming language support and syntax highlighting.
9

10
```typescript { .api }
11
/**
12
 * CodeMirror language registry
13
 * Supports 100+ programming languages with syntax highlighting
14
 */
15
class EditorLanguageRegistry implements IEditorLanguageRegistry {
16
  constructor();
17
  
18
  /**
19
   * Register a new language for CodeMirror
20
   */
21
  addLanguage(language: IEditorLanguage): void;
22
  
23
  /**
24
   * Ensure a language is available by name or specification
25
   * Returns promise that resolves when language is loaded
26
   */
27
  getLanguage(language: string | IEditorLanguage): Promise<IEditorLanguage | null>;
28
  
29
  /**
30
   * Get the raw list of available language specifications
31
   */
32
  getLanguages(): IEditorLanguage[];
33
  
34
  /**
35
   * Find language by MIME type
36
   */
37
  findByMIME(mime: string | readonly string[], strict?: boolean): IEditorLanguage | null;
38
  
39
  /**
40
   * Find language by name
41
   */
42
  findByName(name: string): IEditorLanguage | null;
43
  
44
  /**
45
   * Find language by file extension
46
   */
47
  findByExtension(ext: string | readonly string[]): IEditorLanguage | null;
48
  
49
  /**
50
   * Find language by filename pattern
51
   */
52
  findByFileName(name: string): IEditorLanguage | null;
53
  
54
  /**
55
   * Find best matching language by name or specification
56
   */
57
  findBest(language: string | IEditorLanguage, fallback?: boolean): IEditorLanguage | null;
58
  
59
  /**
60
   * Parse and style a code string with syntax highlighting
61
   */
62
  highlight(code: string, language: IEditorLanguage | null, el: HTMLElement): Promise<void>;
63
}
64
```
65

66
**Usage Examples:**
67

68
```typescript
69
import { EditorLanguageRegistry } from "@jupyterlab/codemirror";
70

71
// Create language registry
72
const languages = new EditorLanguageRegistry();
73

74
// Find language by MIME type
75
const pythonLang = languages.findByMIME('text/x-python');
76
const jsLang = languages.findByMIME('text/javascript');
77

78
// Find language by file extension
79
const tsLang = languages.findByExtension('.ts');
80
const pyLang = languages.findByExtension('.py');
81

82
// Find language by filename
83
const dockerLang = languages.findByFileName('Dockerfile');
84
const makeLang = languages.findByFileName('Makefile');
85

86
// Load language asynchronously
87
const language = await languages.getLanguage('python');
88
if (language) {
89
  console.log(`Loaded ${language.name} language`);
90
}
91

92
// Highlight code
93
const codeElement = document.createElement('pre');
94
const code = 'def hello():\n    print("Hello, World!")';
95
await languages.highlight(code, pythonLang, codeElement);
96
```
97

98
### Language Specification Interface
99

100
Interface defining how languages are configured and loaded.
101

102
```typescript { .api }
103
/**
104
 * Interface of a CodeMirror language specification
105
 */
106
interface IEditorLanguage {
107
  /**
108
   * Language name
109
   */
110
  readonly name: string;
111
  
112
  /**
113
   * Language displayed name (optional)
114
   */
115
  readonly displayName?: string;
116
  
117
  /**
118
   * Language name aliases (optional)
119
   */
120
  readonly alias?: readonly string[];
121
  
122
  /**
123
   * Language MIME types
124
   */
125
  readonly mime: string | readonly string[];
126
  
127
  /**
128
   * Language support loader (for lazy loading)
129
   */
130
  readonly load?: () => Promise<LanguageSupport>;
131
  
132
  /**
133
   * Supported file extensions (optional)
134
   */
135
  readonly extensions?: readonly string[];
136
  
137
  /**
138
   * Filename pattern supported by language (optional)
139
   */
140
  readonly filename?: RegExp;
141
  
142
  /**
143
   * CodeMirror language support (when loaded)
144
   */
145
  support?: LanguageSupport;
146
}
147
```
148

149
### Default Languages
150

151
The registry includes support for 100+ programming languages out of the box.
152

153
```typescript { .api }
154
/**
155
 * Get the default editor languages
156
 * Returns array of 100+ language definitions
157
 */
158
static getDefaultLanguages(translator?: ITranslator | null): ReadonlyArray<IEditorLanguage>;
159
```
160

161
**Language Categories:**
162

163
**Modern Languages:**
164
- C, C++, C#, Go, Rust, Swift, Kotlin, Dart
165
- JavaScript, TypeScript, JSX, TSX
166
- Python, Ruby, PHP, Java, Scala
167
- CSS, HTML, XML, JSON, YAML
168

169
**SQL Dialects:**
170
- CQL, MariaDB SQL, MS SQL, MySQL
171
- PLSQL, PostgreSQL, SQLite, StandardSQL
172

173
**Functional Languages:**
174
- Clojure, Erlang, Haskell, OCaml
175
- F#, Elm, Reason, PureScript
176

177
**Shell and Config:**
178
- Shell, PowerShell, Batch
179
- Properties, TOML, INI, Dockerfile
180

181
**Legacy Languages:**
182
- APL, Brainfuck, COBOL, Fortran
183
- Pascal, Smalltalk, VHDL, Verilog
184

185
**Markup Languages:**
186
- Markdown, LaTeX, reStructuredText
187
- AsciiDoc, Textile, MediaWiki
188

189
**Usage Examples:**
190

191
```typescript
192
import { EditorLanguageRegistry } from "@jupyterlab/codemirror";
193

194
// Get all default languages
195
const languages = EditorLanguageRegistry.getDefaultLanguages();
196

197
// Create registry with default languages
198
const registry = new EditorLanguageRegistry();
199
languages.forEach(lang => registry.addLanguage(lang));
200

201
// Find specific languages
202
const python = registry.findByName('python');
203
const typescript = registry.findByExtension('.ts');
204
const dockerfile = registry.findByFileName('Dockerfile');
205

206
console.log(`Found ${languages.length} languages`);
207
// Output: "Found 100+ languages"
208
```
209

210
### Custom Language Registration
211

212
Adding custom language support to the registry.
213

214
```typescript
215
import { LanguageSupport } from "@codemirror/language";
216

217
// Define custom language
218
const customLanguage: IEditorLanguage = {
219
  name: 'mylang',
220
  displayName: 'My Custom Language',
221
  mime: ['text/x-mylang', 'application/x-mylang'],
222
  extensions: ['.ml', '.mylang'],
223
  filename: /^\.mylangrc$/,
224
  alias: ['custom', 'mylang'],
225
  load: async () => {
226
    // Lazy load language support
227
    const { myLanguageSupport } = await import('./my-language-support');
228
    return myLanguageSupport();
229
  }
230
};
231

232
// Register custom language
233
registry.addLanguage(customLanguage);
234

235
// Use custom language
236
const myLang = registry.findByExtension('.ml');
237
const languageSupport = await registry.getLanguage('mylang');
238
```
239

240
### Legacy Mode Support
241

242
Support for CodeMirror 5 legacy modes.
243

244
```typescript { .api }
245
/**
246
 * Convert a CodeMirror 5 language parser to CodeMirror 6
247
 */
248
static legacy(parser: StreamParser<unknown>): LanguageSupport;
249
```
250

251
**Usage Example:**
252

253
```typescript
254
import { EditorLanguageRegistry } from "@jupyterlab/codemirror";
255
import { python } from "@codemirror/legacy-modes/mode/python";
256

257
// Convert legacy mode to CodeMirror 6
258
const pythonSupport = EditorLanguageRegistry.legacy(python);
259

260
// Create language with legacy support
261
const pythonLang: IEditorLanguage = {
262
  name: 'python-legacy',
263
  mime: 'text/x-python',
264
  support: pythonSupport,
265
  extensions: ['.py']
266
};
267

268
registry.addLanguage(pythonLang);
269
```
270

271
### Advanced Language Features
272

273
Complex language configuration and feature integration.
274

275
```typescript
276
// Language with conditional loading
277
const advancedLanguage: IEditorLanguage = {
278
  name: 'advanced-lang',
279
  displayName: 'Advanced Language',
280
  mime: ['text/x-advanced'],
281
  extensions: ['.adv'],
282
  load: async () => {
283
    // Load base language support
284
    const { baseLanguage } = await import('./base-language');
285
    
286
    // Load additional features conditionally
287
    const extensions = [];
288
    
289
    if (hasFeature('autocomplete')) {
290
      const { autocomplete } = await import('./lang-autocomplete');
291
      extensions.push(autocomplete);
292
    }
293
    
294
    if (hasFeature('linting')) {
295
      const { linter } = await import('./lang-linter');
296
      extensions.push(linter);
297
    }
298
    
299
    return new LanguageSupport(baseLanguage, extensions);
300
  }
301
};
302

303
// Multi-mode language (e.g., HTML with embedded JS/CSS)
304
const htmlLanguage: IEditorLanguage = {
305
  name: 'html-multi',
306
  mime: 'text/html',
307
  extensions: ['.html', '.htm'],
308
  load: async () => {
309
    const { html } = await import('@codemirror/lang-html');
310
    const { javascript } = await import('@codemirror/lang-javascript');
311
    const { css } = await import('@codemirror/lang-css');
312
    
313
    return html({
314
      nestedLanguages: {
315
        javascript: javascript(),
316
        css: css()
317
      }
318
    });
319
  }
320
};
321
```
322

323
### Language Detection
324

325
Automatic language detection based on various criteria.
326

327
```typescript
328
// Detect language from file path
329
function detectLanguage(filePath: string, registry: EditorLanguageRegistry): IEditorLanguage | null {
330
  // Try by filename first
331
  let language = registry.findByFileName(filePath);
332
  if (language) return language;
333
  
334
  // Try by extension
335
  const ext = filePath.split('.').pop();
336
  if (ext) {
337
    language = registry.findByExtension('.' + ext);
338
    if (language) return language;
339
  }
340
  
341
  return null;
342
}
343

344
// Detect from content
345
function detectFromContent(content: string, registry: EditorLanguageRegistry): IEditorLanguage | null {
346
  // Check for shebang
347
  if (content.startsWith('#!')) {
348
    const shebang = content.split('\n')[0];
349
    if (shebang.includes('python')) return registry.findByName('python');
350
    if (shebang.includes('node')) return registry.findByName('javascript');
351
    if (shebang.includes('bash')) return registry.findByName('shell');
352
  }
353
  
354
  // Check for common patterns
355
  if (content.includes('<!DOCTYPE html>')) return registry.findByName('html');
356
  if (content.includes('<?xml')) return registry.findByName('xml');
357
  
358
  return null;
359
}
360

361
// Usage
362
const detectedLang = detectLanguage('script.py', registry) || 
363
                    detectFromContent(fileContent, registry) ||
364
                    registry.findByName('text'); // fallback
365
```
366

367
### Language Registry Interface
368

369
Complete interface definition for language registry implementations.
370

371
```typescript { .api }
372
interface IEditorLanguageRegistry {
373
  addLanguage(language: IEditorLanguage): void;
374
  getLanguage(language: string | IEditorLanguage): Promise<IEditorLanguage | null>;
375
  getLanguages(): IEditorLanguage[];
376
  findByMIME(mime: string | readonly string[], strict?: boolean): IEditorLanguage | null;
377
  findByName(name: string): IEditorLanguage | null;
378
  findByExtension(ext: string | readonly string[]): IEditorLanguage | null;
379
  findByFileName(name: string): IEditorLanguage | null;
380
  findBest(language: string | IEditorLanguage, fallback?: boolean): IEditorLanguage | null;
381
  highlight(code: string, language: IEditorLanguage | null, el: HTMLElement): Promise<void>;
382
}
383
```
384

385
## Types
386

387
```typescript { .api }
388
interface IEditorLanguage {
389
  readonly name: string;
390
  readonly displayName?: string;
391
  readonly alias?: readonly string[];
392
  readonly mime: string | readonly string[];
393
  readonly load?: () => Promise<LanguageSupport>;
394
  readonly extensions?: readonly string[];
395
  readonly filename?: RegExp;
396
  support?: LanguageSupport;
397
}
398

399
interface IEditorLanguageRegistry {
400
  addLanguage(language: IEditorLanguage): void;
401
  getLanguage(language: string | IEditorLanguage): Promise<IEditorLanguage | null>;
402
  getLanguages(): IEditorLanguage[];
403
  findByMIME(mime: string | readonly string[], strict?: boolean): IEditorLanguage | null;
404
  findByName(name: string): IEditorLanguage | null;
405
  findByExtension(ext: string | readonly string[]): IEditorLanguage | null;
406
  findByFileName(name: string): IEditorLanguage | null;
407
  findBest(language: string | IEditorLanguage, fallback?: boolean): IEditorLanguage | null;
408
  highlight(code: string, language: IEditorLanguage | null, el: HTMLElement): Promise<void>;
409
}
410
```