Package Exports

codemirror-lang-latex
codemirror-lang-latex/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (codemirror-lang-latex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CodeMirror 6 LaTeX Language Support

This package provides LaTeX language support for the CodeMirror 6 code editor, based on the Overleaf LaTeX grammar.

Features

LaTeX syntax highlighting
Auto-indentation for environments and groups
Code folding for environments and document sections
Bracket matching
Autocompletion for common LaTeX commands and environments
Snippets for common LaTeX structures
Auto-closing of environments
Hover tooltips with command and environment documentation
LaTeX-specific linting (missing document environment, unmatched environments, etc.)

Installation

npm install codemirror-lang-latex

Usage

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

let editor = new EditorView({
  state: EditorState.create({
    doc: '\\documentclass{article}\n\\begin{document}\nHello, world!\n\\end{document}',
    extensions: [
      // ... other extensions
      latex()
    ]
  }),
  parent: document.querySelector('#editor')
});

Configuration Options

You can configure the LaTeX language support by passing options:

import { latex } from 'codemirror-lang-latex';

// With all options explicitly set (these are the defaults)
const extensions = [
  // ... other extensions
  latex({
    autoCloseTags: true,    // Auto-close environments
    enableLinting: true,    // Enable linting
    enableTooltips: true    // Enable hover tooltips
  })
];

API

latex()

The main function that creates a LanguageSupport instance for LaTeX.

import { latex } from 'codemirror-lang-latex';

// Include LaTeX support in your editor with default options
const extensions = [
  // ... other extensions
  latex()
];

// Or with specific options
const extensions = [
  // ... other extensions
  latex({
    autoCloseTags: true,    // Enable auto-close environments
    enableLinting: true,    // Enable linting
    enableTooltips: true    // Enable tooltips on hover
  })
];

latexLanguage

The LaTeX language definition. Usually you'll want to use the latex() function instead, but you can access this directly if you need to.

import { latexLanguage } from 'codemirror-lang-latex';

autoCloseTags

An extension that provides automatic closing of LaTeX environments.

import { autoCloseTags } from 'codemirror-lang-latex';

const extensions = [
  // ... other extensions
  autoCloseTags
];

latexHoverTooltip

An extension that shows helpful tooltips when hovering over LaTeX commands and environments.

import { latexHoverTooltip } from 'codemirror-lang-latex';

const extensions = [
  // ... other extensions
  latexHoverTooltip
];

latexLinter

A linter function that checks for common LaTeX errors and issues.

import { latexLinter } from 'codemirror-lang-latex';
import { linter } from '@codemirror/lint';

const extensions = [
  // ... other extensions
  linter(latexLinter({
    checkMissingDocumentEnv: true,     // Check for missing document environment
    checkUnmatchedEnvironments: true,   // Check for unmatched begin/end environments
    checkMissingReferences: true        // Check for references to undefined labels
  }))
];

snippets

A collection of LaTeX-related snippets for common structures.

import { snippets } from 'codemirror-lang-latex';

You can also customize styles in your own CSS.

Advanced Usage

Custom Extensions

You can compose your own editor with exactly the LaTeX features you need:

import { EditorState, EditorView } from '@codemirror/basic-setup';
import { keymap } from '@codemirror/view';
import { linter } from '@codemirror/lint';
import { 
  latexLanguage, 
  latexCompletionSource, 
  latexBracketMatching, 
  latexLinter,
  latexHoverTooltip
} from 'codemirror-lang-latex';

// Create an editor with only specific LaTeX features
const editor = new EditorView({
  state: EditorState.create({
    doc: "\\documentclass{article}\n\\begin{document}\nHello world\n\\end{document}",
    extensions: [
      // Basic CodeMirror setup
      basicSetup,
      
      // Add just the LaTeX language with completion
      new LanguageSupport(latexLanguage, [
        latexLanguage.data.of({
          autocomplete: latexCompletionSource
        })
      ]),
      
      // Add only the extensions you want
      latexBracketMatching,
      linter(latexLinter()),
      latexHoverTooltip,
      
      // Line wrapping is useful for LaTeX editing
      EditorView.lineWrapping
    ]
  }),
  parent: document.querySelector('#editor')
});

Parser Utilities

The package also provides several utility functions for working with the LaTeX syntax tree:

import { 
  findEnvironmentName, 
  getIndentationLevel, 
  findMatchingEnvironment,
  findSectionBoundaries
} from 'codemirror-lang-latex';

These can be useful for implementing custom extensions that interact with LaTeX document structure.

Building from Source

git clone https://github.com/texlyre/codemirror-lang-latex.git
cd codemirror-lang-latex
npm install
npm run build

Examples

Regular Example

To run the webpack-bundled example locally, clone the repository and run:

npm install
npm run build:example
npm run example

Then open http://localhost:3000 in your browser.

GitHub Pages Example

To run the GitHub Pages example locally, which is also deployed to the demo site:

npm install
npm run build:pages-example
npm run pages-example

This will also run on http://localhost:3000 in your browser.