codemirror-lang-solidity

CodeMirror 6 language extension bringing Solidity syntax highlighting to any code editor.

Library
npm
v6.0.2
9stars
MIT License

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum.How we score it →
18/100Needs Attention
Development Activity0
Maintenance0
Community16
Maturity56
Momentum0

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation.How we score it →
52/100Fair
Architecture55
Code Quality30
Innovation68
Learning Curve55

@replit/codemirror-lang-solidity is a CodeMirror 6 language extension that adds Solidity syntax highlighting to any web-based code editor. Originally built by Replit for their in-browser IDE, it ports a classic CodeMirror 5-style stream tokenizer forward into CM6’s StreamParser API, recognizing Solidity-specific keywords, value types, Ether and time units, NatSpec doc tags, and address-related built-ins like msg.sender and block.timestamp.

The package ships as a single drop-in extension — import solidity from the package and add it to a CodeMirror EditorView’s extensions array alongside basicSetup to get full contract syntax highlighting with no configuration required.

What You Get

  • Solidity keyword highlighting - Recognizes contract-specific keywords (contract, modifier, payable, emit, assembly) alongside general control-flow keywords.
  • Built-in globals and units - Distinguishes Ether units (wei, ether), time units (seconds, days), and transaction globals (msg.sender, block.timestamp, tx.origin) with dedicated token styles.
  • NatSpec doc-comment tagging - Highlights @title, @param, @dev, and other NatSpec annotation tags inside triple-slash doc comments.
  • Zero-config CodeMirror 6 integration - A single solidity export wraps a LanguageSupport instance ready to drop into any CM6 extensions array.

Common Use Cases

  • In-browser Solidity IDEs - Platforms like Replit add contract-aware highlighting to their web-based Solidity editors.
  • Smart contract documentation sites - Docs sites embed live, highlighted Solidity code samples using CodeMirror.
  • Blockchain developer tooling - Internal dashboards and admin tools that let users paste or edit Solidity snippets get accurate highlighting.
  • Educational coding platforms - Solidity tutorials and coding-challenge sites use it to render exercises with proper syntax coloring.

Under The Hood

Architecture The package is a single-file module (src/index.ts) exporting a LanguageSupport built from StreamLanguage.define(parser), using CodeMirror 6’s legacy StreamParser API rather than a Lezer grammar. The tokenizer (tokenBase, tokenString, tokenComment) implements a hand-written lexer over keyword tables (keywords, keywordsSpecial, keywordsEtherUnit, keywordsErrorHandling, and others) plus a Context/indent stack (pushContext/popContext) for brace-based indentation, mirroring the classic CodeMirror 5 mode pattern ported into CM6’s interface. Token classification proceeds through sequential case analysis and property lookups (propertyIsEnumerable) that mutate a shared, string-keyed State object (lastToken, para, grammar) as a lightweight state machine, rather than through a structured parse tree.

Tech Stack Written in TypeScript against CodeMirror 6, depending on @codemirror/language (peer dependency) for StreamLanguage and LanguageSupport, and @lezer/highlight for Tag definitions. Dev-only dependencies (@codemirror/commands, @codemirror/state, @codemirror/view, codemirror) support a Vite-based dev/ sandbox for manual testing. The build is handled by @codemirror/buildhelper’s cm-buildhelper CLI, producing dual ESM/CJS output (dist/index.js, dist/index.cjs) with bundled type declarations; Yarn manages dependencies.

Code Quality No test files exist in the repository, despite a test script (cm-runtests) wired up in package.json — the convention-based tests that script expects are absent. There is no CI configuration (no GitHub Actions workflows). Error handling is implicit — the tokenizer is written to tolerate malformed input rather than throw. Naming is verbose but internally consistent camelCase, and TypeScript types cover the public State/Context interfaces, though much of the token dispatch logic relies on untyped string comparisons.

API Design The public surface is a single named export, solidity, a ready-to-use LanguageSupport instance. Adoption requires no configuration — just add it to a CodeMirror extensions array, exactly as shown in the README’s copy-pasteable example. This keeps boilerplate minimal, though the trade-off is no exposed options for customizing keyword sets or styling without forking the package.

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers

Search