CodeMirror addons

Ian Walter edited this page Dec 20, 2016 · 44 revisions

This is a list of useful CodeMirror-related code hosted in other places. Feel free to add your project, or a project you found that seems relevant.

Pre-built Minified Version

CodeMirror-minified

A pre-built minified distribution of CodeMirror. NPM package available.

Completion

CodeMirror-XQuery

CodeMirror-XQuery is an extension of CodeMirror to provide usefull features for XQuery editor like (XQuery syntax errors, XQuery Completion, etc). It provides too generic addon that you can use it with any mode like :

Emmet

A form of clever completion to efficiently write HTML & CSS.

TeX-input

Allows to use the backslash key \ to insert Unicode characters in TeX style.

xsd2codemirror

Convert XSD XML schema to the format understood by CodeMirror's XML completer.

Autosuggest addon

Triggers autocompletion when certain character is typed.

External Modes

codemirror-mode-elixir

A CodeMirror mode for the Elixir language

Highlighting / Extra Modes

codemirror-grammar

Transform a grammar-specification in JSON format into a CodeMirror syntax-highlight parser (mode).

  • A Grammar can extend other Grammars (arbitrary variations and dialects can be handled easily)
  • Grammar includes: Style Model, Lex Model and Syntax Model (optional)
  • Grammar specification can be minimal
  • Grammar.Syntax Model can support lint-like syntax-annotation functionality to detect possible syntax errors and display appropriate (user-defined) error messages
  • Grammar.Syntax Model can be specified using PEG-like notation or BNF-like notation
  • Generated highlight modes can support toggle comments and keyword autocompletion functionality if defined in the grammar

Themes

codemirror-one-dark-theme

atom's one-dark theme for codemirror.

Integration with other software

CodeYourCloud

An in-browser code editor for Google Drive. Uses CodeMirror for the editor itself.

Crudzilla Web Application Builder

A browser based developer product that uses CodeMirror.

deck.js-codemirror

Integration with the deck.js slide deck system.

codemirror-rails

Ruby gem for adding CodeMirror to a Rails app.

django-codemirror-widget

Django integration.

CodeMirror for TinyMCE 4

CodeMirror for CKEditor

Magento Advanced HTML Editor

A Magento extension that leverages CodeMirror (and most of the available addons) to provide a powerful source editor with IDE-like features that'll make it much easier to write clean markup for CMS pages, static blocks and email templates.

Tiki Wiki CMS Groupware

Since Tiki 7.0: http://doc.tiki.org/Syntax+Highlighter

CodeMirror for PmWiki

The recipe provides the CodeMirror JavaScript text editor component to PmWiki, enabling both:

  • An enhanced page editing experience with pmwiki syntax highlighting, line numbers and line wrapping,
  • A generic syntax highlighting renderer for your source code excerpts.

Syntax Highlighter for WP Editor

An easy to use WordPress plugin that replaces the default Theme and Plugin Source Code Editor with an enhanced editor by a CodeMirror library.

My Custom Functions

An easy to use WordPress plugin that lets you easily and safely add your own functions, snippets or any custom codes for execution in WordPress environment directly out of your WordPress Dashboard without any need of an external editor.

My Custom Styles

An easy to use WordPress plugin that gives you the ability to easily and safely add your custom styles (CSS) to WordPress website's header.

jsCoq

CodeMirror-based Coq interactive editor and IDE. The most interesting part for CM users is the way we link multiple instances to form a single Coq document.

Gerrit Code Review

Gerrit provides web based code review and repository management for the Git version control system. The code review UI makes heavy use of CodeMirror features.

OctoEdit

OctoEdit is a Chrome Extension that enables syntax highlighting for Markdown/Code in GitHub comments. The editor of choice is CodeMirror.

Interface

SimpleMDE

Markdown editor using CodeMirror with toolbar buttons, autosave, spellcheck, preview mode, etc added.

CodeMirror-ui

Adds a button bar above a CodeMirror instance.

Buttons addon

Adds a panel with buttons specified via config.

Linting

asm.js-lint

Provide asm.js linting to CodeMirror.

codemirror-gherkin-linter

Provide gherkin linting to CodeMirror.

Misc

CodeMirror-themes

An web interface for making CodeMirror themes.

CodeMirror-movie

Scripting CodeMirror for editing demos.

ace2cm

Convert Ace highlight rules to the CodeMirror format.

mrdoob approves

Javascript code style checker/validator/formatter/editor/tool. Integrates a node-jscs and a merge plugin