@codemirror/lang-python

What is @codemirror/lang-python?

@codemirror/lang-python is a language support package for CodeMirror 6 that provides syntax highlighting, code folding, and other language-specific features for Python.

What are @codemirror/lang-python's main functionalities?

Syntax Highlighting

This code sets up a CodeMirror editor with Python syntax highlighting. The `python` function from `@codemirror/lang-python` is used as an extension in the editor state.

import { python } from '@codemirror/lang-python';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'print("Hello, World!")',
  extensions: [basicSetup, python()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Code Folding

This code sets up a CodeMirror editor with Python syntax highlighting and code folding. The `foldGutter` extension is used to enable code folding in the editor.

import { python } from '@codemirror/lang-python';
import { foldGutter } from '@codemirror/fold';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'def foo():\n    print("Hello, World!")\n\nfoo()',
  extensions: [basicSetup, python(), foldGutter()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Autocomplete

This code sets up a CodeMirror editor with Python syntax highlighting and autocomplete functionality. The `autocompletion` extension is used to provide autocomplete suggestions.

import { python } from '@codemirror/lang-python';
import { autocompletion } from '@codemirror/autocomplete';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'pri',
  extensions: [basicSetup, python(), autocompletion()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Other packages similar to @codemirror/lang-python

monaco-editor

Monaco Editor is the code editor that powers VS Code. It provides rich language support for Python, including syntax highlighting, code folding, and autocomplete. Compared to @codemirror/lang-python, Monaco Editor offers a more comprehensive set of features and is highly extensible, but it is also larger in size and may be more complex to integrate.

ace-builds

Ace is a standalone code editor written in JavaScript. It provides syntax highlighting, code folding, and autocomplete for Python. Ace is similar to @codemirror/lang-python in terms of functionality but is an older project with a different architecture and API.

highlight.js

Highlight.js is a syntax highlighter written in JavaScript. It supports Python syntax highlighting but does not provide other features like code folding or autocomplete. Highlight.js is simpler and lighter compared to @codemirror/lang-python, making it suitable for use cases where only syntax highlighting is needed.

README

@codemirror/lang-python

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements Python language support for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

API Reference

globalCompletion: CompletionSource

Autocompletion for built-in Python globals and keywords.

localCompletionSource(context: CompletionContext) → CompletionResult | null

Completion source that looks up locally defined names in Python code.

pythonLanguage: LRLanguage

A language provider based on the Lezer Python parser, extended with highlighting and indentation information.

python() → LanguageSupport

Python language support.

Changelog

6.1.5 (2024-03-28)

Bug fixes

Properly indent else: when attached to a for or while statement.