CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a mode has been written for the language you are editing, the code will be coloured, and the editor will optionally help you with indentation.

CodeMirror Based on CodeMirror.js library by Marijn Haverbeke.

CodeMirror provides many languages for markup and themes for styling.

Following Modes are available:
  • apl
  • asciiarmor
  • asn.1
  • asterisk
  • brainfuck
  • clike
  • clojure
  • cmake
  • cobol
  • coffeescript
  • commonlisp
  • crystal
  • css
  • cypher
  • d
  • dart
  • diff
  • django
  • dtd
  • dylan
  • ebnf
  • ecl
  • eiffel
  • eml
  • erlang
  • fcl
  • fortran
  • freemarker
  • gas
  • gfm
  • gherkin
  • go
  • groovy
  • haml
  • haskell
  • haskell-literate
  • haxe
  • htmlembedded
  • htmlmixed
  • http
  • idl
  • javascript
  • jinja2
  • jsx
  • julia
  • lua
  • markdown
  • mathematica
  • mbox
  • mirc
  • mllike
  • modelica
  • mscgen
  • mumps
  • nginx
  • ntriples
  • octave
  • oz
  • pascal
  • pegjs
  • perl
  • php
  • pig
  • powershell
  • properties
  • protobuf
  • pug
  • puppet
  • python
  • q
  • r
  • rpm
  • rst
  • ruby
  • sass
  • scala
  • scheme
  • shell
  • sieve
  • slim
  • smalltalk
  • smarty
  • solr
  • soy
  • sparql
  • spreadsheet
  • sql
  • stex
  • stylus
  • swift
  • tcl
  • textile
  • tiddlywiki
  • tiki
  • toml
  • tornado
  • troff
  • ttcn
  • ttcn-cfg
  • turtle
  • twig
  • vb
  • vbscript
  • velocity
  • verilog
  • vhdl
  • vue
  • webidl
  • xml
  • xquery
  • yaml
  • yaml-frontmatter
  • z80
Components and more
Documentation pe:codeMirror
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a naming container.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
value Value of the component.
completeMethod Method providing suggestions.
theme The theme to style the editor with.
mode The mode to use. When not given, this will default to the first mode that was loaded. It may be a string, which either simply names the mode or is a MIME type associated with the mode. Alternatively, it may be an object containing configuration options for the mode, with a name property that names the mode (for example {name: "javascript", json: true}).
indentUnit How many spaces a block (whatever that means in the edited language) should be indented. The default is 2.
smartIndent Whether to use the context-sensitive indentation that the mode provides (or just indent the same as the line before). Defaults to true.
tabSize The width of a tab character. Defaults to 4.
electricChars Configures whether the editor should re-indent the current line when a character is typed that might change its proper indentation (only works if the mode supports indentation). Default is true.
keyMap Configures the keymap to use. The default is "default", which is the only keymap defined in codemirror.js itself. Extra keymaps are found in the keymap directory.
lineWrapping Whether CodeMirror should scroll or wrap for long lines. Defaults to false (scroll).
lineNumbers Whether to show line numbers to the left of the editor.
firstLineNumber At which number to start counting lines. Default is 1.
gutter Can be used to force a 'gutter' (empty space on the left of the editor) to be shown even when no line numbers are active. This is useful for setting markers.
fixedGutter When enabled (off by default), this will make the gutter stay visible when the document is scrolled horizontally.
readonly This disables editing of the editor content by the user. If the special value "nocursor" is given (instead of simply true), focusing of the editor is also disallowed.
matchBrackets Determines whether brackets are matched whenever the cursor is moved next to a bracket.
workTime Highlighting is done by a pseudo background-thread that will work for workTime milliseconds, and then use timeout to sleep for workDelay milliseconds. The defaults are 200 and 300, you can change these options to make the highlighting more or less aggressive.
workDelay Highlighting is done by a pseudo background-thread that will work for workTime milliseconds, and then use timeout to sleep for workDelay milliseconds. The defaults are 200 and 300, you can change these options to make the highlighting more or less aggressive.
pollInterval Indicates how quickly CodeMirror should poll its input textarea for changes. Most input is captured by events, but some things, like IME input on some browsers, doesn't generate events that allow CodeMirror to properly detect it. Thus, it polls. Default is 100 milliseconds.
undoDepth The maximum number of undo levels that the editor stores. Defaults to 40.
tabindex The tab index to assign to the editor. If not given, no tab index will be assigned.
label A display name for this component.
extraKeys Can be used to specify extra keybindings for the editor. When given, should be an object with property names like Ctrl-A, Home, and Ctrl-Alt-Left.
converter An EL expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id.
process Component(s) to process partially instead of whole view.
onstart Javascript handler to execute before ajax request is begins.
oncomplete Javascript handler to execute when ajax request is completed.
onerror Javascript handler to execute when ajax request fails.
onsuccess Javascript handler to execute when ajax request succeeds.
global Global ajax requests are listened by ajaxStatus component, setting global to false will not trigger ajaxStatus. Default value: true.
async When set to true, ajax requests are not queued. Default value: false.
escape Defines if the content of the component should be escaped or not.
escapeSuggestions Defines if the suggestions should be escaped or not.
required Marks component as required.
requiredMessage Message to display when required field validation fails.
validator A method expression referring to a method validationg the input.
valueChangeListener A method binding expression referring to a method for handling a valuchangeevent.
Events (move mouse over the names to see classes)
Name Description
changefired every time the content of the editor is changed
highlightCompletefired whenever the editor's content has been fully highlighted
focusfired when the editor gets focus
blurfired when the editor loses focus
PrimeFaces Extensions Showcase - © 2011-2020, PrimeFaces: 8.0, PrimeFaces Extensions: 8.0.2, JSF: jakarta 2.3.14, Server: jetty/9.4.36.v20210114, Build time: 2020-04-29 13:39