Theme
afterdark
afternoon
afterwork
aristo
black-tie
blitzer
bluesky
bootstrap
casablanca
cruze
cupertino
dark-hive
delta
dot-luv
eggplant
excite-bike
flick
glass-x
home
hot-sneaks
humanity
le-frog
midnight
mint-choc
omega
overcast
pepper-grinder
redmond
rocket
sam
smoothness
south-street
start
sunny
swanky-purse
trontastic
ui-darkness
ui-lightness
vader
CodeMirror
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
Use Cases
Documentation pe:codeMirror
Attributes (move mouse over the names to see data types)
Name Description
idUnique 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.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.
widgetVarName of the client side widget.
valueValue of the component.
completeMethodMethod providing suggestions.
themeThe 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.
tabSizeThe 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).
lineNumbersWhether to show line numbers to the left of the editor.
firstLineNumberAt 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.
undoDepthThe maximum number of undo levels that the editor stores. Defaults to 40.
tabindexThe tab index to assign to the editor. If not given, no tab index will be assigned.
labelA 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.
processComponent(s) to process partially instead of whole view.
onstartJavascript handler to execute before ajax request is begins.
oncompleteJavascript handler to execute when ajax request is completed.
onerrorJavascript handler to execute when ajax request fails.
onsuccessJavascript 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.
asyncWhen set to true, ajax requests are not queued. Default value: false.
escapeDefines if the content of the component should be escaped or not.
escapeSuggestionsDefines if the suggestions should be escaped or not.
requiredMarks component as required.
requiredMessageMessage to display when required field validation fails.
validatorA method expression referring to a method validationg the input.
valueChangeListenerA 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-2017, PrimeFaces: 6.1, PrimeFaces Extensions: 6.1.0, JSF: mojarra 2.2.8, Server: jetty/9.4.2.v20170220, Build time: 2017-04-19 16:13
occured!
Message:
Timestamp:
StackTrace:
Developers
Thomas Andraschko andraschko.thomas@gmail.com
Oleg Varaksin ovaraksin@googlemail.com
Nilesh Namdeo Mali nileshmali86@gmail.com
Mauricio Fenoglio fenoglio.mauricio@gmail.com
Pavol Slaný pavol.slany@gmail.com
Sudheer Jonna sudheer.jonna@gmail.com