The CodeMirror 6 extension for MathProg/GMPL code editing — syntax highlighting, live math rendering, rainbow brackets, linting, and autocomplete for mathematical programming models.
Build web-based editors for MathProg (GNU MathProg / GMPL) — the modeling language used with GLPK for linear programming, mixed-integer programming, and optimization problems. Perfect for educational tools, optimization platforms, and operations research applications.
- Full syntax highlighting — Keywords, declarations, operators, functions, comments, and strings with distinct colors
- Live math rendering — See your MathProg code rendered as typeset mathematics using KaTeX (
sum{t in T}becomesΣ_{t∈T}) - Rainbow brackets — 6 cycling colors by nesting depth for
{},[],() - Scope highlighting — Click a bracket to highlight the entire enclosed region
- Bracket mismatch detection — Red underline on unclosed or mismatched brackets
- Linting — Human-friendly error messages ("Expected
;after declaration" not "Syntax error") - Autocomplete — All MathProg keywords, aggregate operators, and built-in functions
- Light and dark themes — GitHub-inspired color schemes
- Incremental parsing — Lezer grammar for fast, error-tolerant parsing
- Zero config — One function call to get a fully-featured editor
npm install mathprog-editorimport{mathProgEditor}from"mathprog-editor";constview=mathProgEditor({parent: document.getElementById("editor"),doc: "set T := 1..24;\nparam cost{t in T};\n",});import{mathProgEditor}from"mathprog-editor";constview=mathProgEditor({parent: document.getElementById("editor"),mathPanel: document.getElementById("math-output"),doc: "minimize cost: sum{t in T} price[t] * x[t];",theme: "dark",});<linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"><scriptsrc="https://cdn.jsdelivr.net/npm/mathprog-editor/dist/index.umd.js"></script><script>constview=MathProgEditor.mathProgEditor({parent: document.getElementById("editor"),doc: "set T := 1..24;",});</script>The mathProgEditor() function accepts the following options:
| Option | Type | Default | Description |
|---|---|---|---|
parent | HTMLElement | required | Container element for the editor |
doc | string | "" | Initial MathProg source code |
theme | "light" | "dark" | "light" | Color theme |
mathPanel | HTMLElement | — | Target element for rendered math output |
mathPanelDebounce | number | 300 | Re-render delay in ms |
rainbowBrackets | boolean | true | Enable rainbow bracket coloring |
scopeHighlight | boolean | true | Enable scope highlighting on bracket click |
bracketMismatch | boolean | true | Enable mismatch detection |
linting | boolean | true | Enable error diagnostics |
extensions | Extension[] | [] | Additional CodeMirror 6 extensions |
Use the pieces you need:
import{mathProg}from"mathprog-editor";// Language supportimport{rainbowBrackets}from"mathprog-editor";// Rainbow bracketsimport{scopeHighlight}from"mathprog-editor";// Scope highlightingimport{bracketMismatch}from"mathprog-editor";// Mismatch detectionimport{mathPanel}from"mathprog-editor";// Math rendering panelimport{mathProgLinter}from"mathprog-editor";// Lintingimport{lightTheme,darkTheme}from"mathprog-editor";// Themesimport{sourceToLatex}from"mathprog-editor";// AST → LaTeX converterimport{renderLatex}from"mathprog-editor";// KaTeX wrapperThe math panel converts MathProg code into typeset mathematical notation:
| MathProg | Rendered |
|---|---|
sum{t in T} x[t] | Σ_{t∈T} x_t |
x[i,j] | x_{i,j} |
>= / <= / <> | ≥ / ≤ / ≠ |
a / b | a/b (fraction) |
a * b | a · b |
sqrt(x) | √x |
abs(x) | |x| |
minimize cost: | min_{cost} |
The Lezer grammar covers the full MathProg/GMPL specification:
- Declarations:
set,param,varwith indexing, bounds, defaults - Objectives:
minimize,maximize - Constraints:
s.t./subject towith multi-line expressions - Expressions: Arithmetic (
+,-,*,/,**,^), comparison (<=,>=,=,<>,<,>), logical (and,or,not), set operations (union,inter,diff,symdiff,cross) - Aggregates:
sum,prod,min,max,forall,exists,setof,count - Indexing:
{i in S : condition}with arbitrary nesting - Functions:
abs,ceil,floor,exp,log,sqrt,sin,cos,atan,round,trunc,card,length,substr, and more - Control:
if/then/else,for,display,printf,solve,check - Comments: Line (
#) and block (/* */)
Works in all modern browsers that support ES2020. Tested with Chrome, Firefox, Safari, and Edge.
- Educational platforms — Teach linear programming and optimization with an interactive editor
- Operations research tools — Build web interfaces for GLPK/GMPL model editing
- Optimization IDEs — Create browser-based development environments for mathematical programming
- Documentation tools — Embed editable MathProg examples in technical documentation
- Homework platforms — Let students write and validate optimization models online
- GLPK — GNU Linear Programming Kit
- GLPK.js — GLPK compiled to JavaScript via Emscripten
- CodeMirror 6 — The editor framework this library extends
- KaTeX — Fast math typesetting for the web
See CONTRIBUTING.md for development setup and guidelines.