tessl/npm-jupyterlab--codemirror

CodeMirror 6 editor provider for JupyterLab with comprehensive language support, themes, extensions, and collaborative editing capabilities

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Language Support

Name: tessl/npm-jupyterlab--codemirror
Author: tessl

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

Capabilities

EditorLanguageRegistry

Main registry for managing programming language support and syntax highlighting.

/**
 * CodeMirror language registry
 * Supports 100+ programming languages with syntax highlighting
 */
class EditorLanguageRegistry implements IEditorLanguageRegistry {
  constructor();
  
  /**
   * Register a new language for CodeMirror
   */
  addLanguage(language: IEditorLanguage): void;
  
  /**
   * Ensure a language is available by name or specification
   * Returns promise that resolves when language is loaded
   */
  getLanguage(language: string | IEditorLanguage): Promise<IEditorLanguage | null>;
  
  /**
   * Get the raw list of available language specifications
   */
  getLanguages(): IEditorLanguage[];
  
  /**
   * Find language by MIME type
   */
  findByMIME(mime: string | readonly string[], strict?: boolean): IEditorLanguage | null;
  
  /**
   * Find language by name
   */
  findByName(name: string): IEditorLanguage | null;
  
  /**
   * Find language by file extension
   */
  findByExtension(ext: string | readonly string[]): IEditorLanguage | null;
  
  /**
   * Find language by filename pattern
   */
  findByFileName(name: string): IEditorLanguage | null;
  
  /**
   * Find best matching language by name or specification
   */
  findBest(language: string | IEditorLanguage, fallback?: boolean): IEditorLanguage | null;
  
  /**
   * Parse and style a code string with syntax highlighting
   */
  highlight(code: string, language: IEditorLanguage | null, el: HTMLElement): Promise<void>;
}

Usage Examples:

import { EditorLanguageRegistry } from "@jupyterlab/codemirror";

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

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

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

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

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

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

Language Specification Interface

Interface defining how languages are configured and loaded.

/**
 * Interface of a CodeMirror language specification
 */
interface IEditorLanguage {
  /**
   * Language name
   */
  readonly name: string;
  
  /**
   * Language displayed name (optional)
   */
  readonly displayName?: string;
  
  /**
   * Language name aliases (optional)
   */
  readonly alias?: readonly string[];
  
  /**
   * Language MIME types
   */
  readonly mime: string | readonly string[];
  
  /**
   * Language support loader (for lazy loading)
   */
  readonly load?: () => Promise<LanguageSupport>;
  
  /**
   * Supported file extensions (optional)
   */
  readonly extensions?: readonly string[];
  
  /**
   * Filename pattern supported by language (optional)
   */
  readonly filename?: RegExp;
  
  /**
   * CodeMirror language support (when loaded)
   */
  support?: LanguageSupport;
}

Default Languages

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

/**
 * Get the default editor languages
 * Returns array of 100+ language definitions
 */
static getDefaultLanguages(translator?: ITranslator | null): ReadonlyArray<IEditorLanguage>;

Language Categories:

Modern Languages:

C, C++, C#, Go, Rust, Swift, Kotlin, Dart
JavaScript, TypeScript, JSX, TSX
Python, Ruby, PHP, Java, Scala
CSS, HTML, XML, JSON, YAML

SQL Dialects:

CQL, MariaDB SQL, MS SQL, MySQL
PLSQL, PostgreSQL, SQLite, StandardSQL

Functional Languages:

Clojure, Erlang, Haskell, OCaml
F#, Elm, Reason, PureScript

Shell and Config:

Shell, PowerShell, Batch
Properties, TOML, INI, Dockerfile

Legacy Languages:

APL, Brainfuck, COBOL, Fortran
Pascal, Smalltalk, VHDL, Verilog

Markup Languages:

Markdown, LaTeX, reStructuredText
AsciiDoc, Textile, MediaWiki

Usage Examples:

import { EditorLanguageRegistry } from "@jupyterlab/codemirror";

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

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

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

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

Custom Language Registration

Adding custom language support to the registry.

import { LanguageSupport } from "@codemirror/language";

// Define custom language
const customLanguage: IEditorLanguage = {
  name: 'mylang',
  displayName: 'My Custom Language',
  mime: ['text/x-mylang', 'application/x-mylang'],
  extensions: ['.ml', '.mylang'],
  filename: /^\.mylangrc$/,
  alias: ['custom', 'mylang'],
  load: async () => {
    // Lazy load language support
    const { myLanguageSupport } = await import('./my-language-support');
    return myLanguageSupport();
  }
};

// Register custom language
registry.addLanguage(customLanguage);

// Use custom language
const myLang = registry.findByExtension('.ml');
const languageSupport = await registry.getLanguage('mylang');

Legacy Mode Support

Support for CodeMirror 5 legacy modes.

/**
 * Convert a CodeMirror 5 language parser to CodeMirror 6
 */
static legacy(parser: StreamParser<unknown>): LanguageSupport;

Usage Example:

import { EditorLanguageRegistry } from "@jupyterlab/codemirror";
import { python } from "@codemirror/legacy-modes/mode/python";

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

// Create language with legacy support
const pythonLang: IEditorLanguage = {
  name: 'python-legacy',
  mime: 'text/x-python',
  support: pythonSupport,
  extensions: ['.py']
};

registry.addLanguage(pythonLang);

Advanced Language Features

Complex language configuration and feature integration.

// Language with conditional loading
const advancedLanguage: IEditorLanguage = {
  name: 'advanced-lang',
  displayName: 'Advanced Language',
  mime: ['text/x-advanced'],
  extensions: ['.adv'],
  load: async () => {
    // Load base language support
    const { baseLanguage } = await import('./base-language');
    
    // Load additional features conditionally
    const extensions = [];
    
    if (hasFeature('autocomplete')) {
      const { autocomplete } = await import('./lang-autocomplete');
      extensions.push(autocomplete);
    }
    
    if (hasFeature('linting')) {
      const { linter } = await import('./lang-linter');
      extensions.push(linter);
    }
    
    return new LanguageSupport(baseLanguage, extensions);
  }
};

// Multi-mode language (e.g., HTML with embedded JS/CSS)
const htmlLanguage: IEditorLanguage = {
  name: 'html-multi',
  mime: 'text/html',
  extensions: ['.html', '.htm'],
  load: async () => {
    const { html } = await import('@codemirror/lang-html');
    const { javascript } = await import('@codemirror/lang-javascript');
    const { css } = await import('@codemirror/lang-css');
    
    return html({
      nestedLanguages: {
        javascript: javascript(),
        css: css()
      }
    });
  }
};

Language Detection

Automatic language detection based on various criteria.

// Detect language from file path
function detectLanguage(filePath: string, registry: EditorLanguageRegistry): IEditorLanguage | null {
  // Try by filename first
  let language = registry.findByFileName(filePath);
  if (language) return language;
  
  // Try by extension
  const ext = filePath.split('.').pop();
  if (ext) {
    language = registry.findByExtension('.' + ext);
    if (language) return language;
  }
  
  return null;
}

// Detect from content
function detectFromContent(content: string, registry: EditorLanguageRegistry): IEditorLanguage | null {
  // Check for shebang
  if (content.startsWith('#!')) {
    const shebang = content.split('\n')[0];
    if (shebang.includes('python')) return registry.findByName('python');
    if (shebang.includes('node')) return registry.findByName('javascript');
    if (shebang.includes('bash')) return registry.findByName('shell');
  }
  
  // Check for common patterns
  if (content.includes('<!DOCTYPE html>')) return registry.findByName('html');
  if (content.includes('<?xml')) return registry.findByName('xml');
  
  return null;
}

// Usage
const detectedLang = detectLanguage('script.py', registry) || 
                    detectFromContent(fileContent, registry) ||
                    registry.findByName('text'); // fallback

Language Registry Interface

Complete interface definition for language registry implementations.

interface IEditorLanguageRegistry {
  addLanguage(language: IEditorLanguage): void;
  getLanguage(language: string | IEditorLanguage): Promise<IEditorLanguage | null>;
  getLanguages(): IEditorLanguage[];
  findByMIME(mime: string | readonly string[], strict?: boolean): IEditorLanguage | null;
  findByName(name: string): IEditorLanguage | null;
  findByExtension(ext: string | readonly string[]): IEditorLanguage | null;
  findByFileName(name: string): IEditorLanguage | null;
  findBest(language: string | IEditorLanguage, fallback?: boolean): IEditorLanguage | null;
  highlight(code: string, language: IEditorLanguage | null, el: HTMLElement): Promise<void>;
}

Types

interface IEditorLanguage {
  readonly name: string;
  readonly displayName?: string;
  readonly alias?: readonly string[];
  readonly mime: string | readonly string[];
  readonly load?: () => Promise<LanguageSupport>;
  readonly extensions?: readonly string[];
  readonly filename?: RegExp;
  support?: LanguageSupport;
}

interface IEditorLanguageRegistry {
  addLanguage(language: IEditorLanguage): void;
  getLanguage(language: string | IEditorLanguage): Promise<IEditorLanguage | null>;
  getLanguages(): IEditorLanguage[];
  findByMIME(mime: string | readonly string[], strict?: boolean): IEditorLanguage | null;
  findByName(name: string): IEditorLanguage | null;
  findByExtension(ext: string | readonly string[]): IEditorLanguage | null;
  findByFileName(name: string): IEditorLanguage | null;
  findBest(language: string | IEditorLanguage, fallback?: boolean): IEditorLanguage | null;
  highlight(code: string, language: IEditorLanguage | null, el: HTMLElement): Promise<void>;
}