CodeMirror 6 BibTeX Extension

Interactive Demo

Try out the BibTeX language support for CodeMirror 6 below.

Enable linting Enable tooltips Enable autocompletion Auto-close brackets

Features

BibTeX syntax highlighting with distinct colors for entry types, field names, and values
Auto-indentation for entries and field values
Code folding for entries and nested structures
Bracket matching for braces and quotes
Autocompletion for entry types, field names, and common values
Snippets for common BibTeX entry structures
Hover tooltips with entry type and field descriptions
BibTeX-specific linting for missing fields and syntax errors

Installation

npm install codemirror-lang-bib

Usage

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

let editor = new EditorView({
  state: EditorState.create({
    doc: '@article{sample2023,\n  author = {John Doe},\n  title = {Sample Article},\n  journal = {Journal Name},\n  year = {2023}\n}',
    extensions: [
      // ... other extensions
      bibtex()
    ]
  }),
  parent: document.querySelector('#editor')
});