Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.

Context Coloring Build Status Coverage Status

Screenshot of JavaScript code highlighted by context.

Highlights code by scope. Top-level scopes are one color, second-level scopes are another color, and so on. Variables retain the color of the scope in which they are defined. A variable defined in an outer scope referenced by an inner scope is colored the same as the outer scope.

By default, comments and strings are still highlighted syntactically.


  • Light and dark customizable color schemes.
  • JavaScript support:
    • Script, function and block scopes (and even catch block scopes).
    • Node.js "file-level" scope detection.
  • Emacs Lisp support:
    • defun, lambda, let, let*, cond, condition-case, defadvice, dolist, quote, backquote and backquote splicing.
    • Works in eval-expression too.


Requires Emacs 24.3+. JavaScript language support requires js2-mode (or, if you use Tern, you may be interested in tern-context-coloring).

To install, run the command M-x package-install RET context-coloring RET, and then add the following to your init file:

;; JavaScript:
(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))
(add-hook 'js2-mode-hook #'context-coloring-mode)

;; Emacs Lisp:
(add-hook 'emacs-lisp-mode-hook #'context-coloring-mode)

;; eval-expression:
(add-hook 'eval-expression-minibuffer-setup-hook #'context-coloring-mode) ; 24.4+
(add-hook 'minibuffer-setup-hook #'context-coloring-mode)                 ; 24.3

Color Schemes

The Zenburn theme, featured in the screenshot above, now supports context coloring.

You can define your own colors by customizing faces like context-coloring-level-N-face, where N is a number starting from 0.

See here for some color schemes for popular custom themes.


  • context-coloring-syntactic-comments (default: t): If non-nil, also color comments using font-lock.
  • context-coloring-syntactic-strings (default: t): If non-nil, also color strings using font-lock.
  • context-coloring-javascript-block-scopes (default: nil): If non-nil, also color block scopes in the scope hierarchy in JavaScript.
  • context-coloring-javascript-detect-top-level-scope (default: t): If non-nil, detect when to use file-level scope.