Skip to Main Content

Codemirror

This site uses Codemirror for syntax highlighting.
Sven Weller wrote a great article on how to implement this in Apex: Apex 5 – Region with syntax highlighting.


My implementation is a bit different, using a universal Dynamic Action on page 0 instead of the pages themselves. This makes maintenance a bit easier.
Also, I have tried to reduce the number of javascript scripts and Dynamic Actions needed, by using parameters in the javascript bits.

The steps I used to get Codemirror to work on this site:
  • Create an application item F_CODEMIRROR_VERSION.
    Apex 5.0 includes Codemirror 4.4, Apex 5.1 includes Codemirror 5.16. At this moment, this site uses version 5.48.4. By using an item to store the version number, upgrading (and downgrading if needed) becomes a lot easier.

  • Fill this item with "5.48.4" (or any other version number you are using) e.g. using an Application Computation.

  • When using a newer version than the one included with Apex, copy the entire Codemirror directory to the right location, e.g. #IMAGE_PREFIX#libraries/codemirror/5.48.4

  • On your Page Template(s), include the following:
    • JavaScript -> File URLs
      (Note: you may not need all of the "mode" entries, or you may need more; add/remove as you please. Just remember to adjust the javascript on page 0 if you add entries. And note that some librairies have dependencies, consult the Codemirror manual for that.)

    • Function and Global Variable Declaration

    • Cascading Style Sheet -> File URLs
  • On Page 0, add the codemirror Dynamic Action listed in the Code section below.

  • And to use all this, create textarea tags with the new codemirror-% classes, as shown in the Example regions (and Code section) below.

  • When using Codemirror for textareas in reports, this dynamic action will not run when changing e.g. the number of rows of the report. That triggers a refresh of the region only, not the entire page, so the dynamic action on page 0 will not run. And the same applies to all other objects that are refreshed/changed dynamically of course.
    To get that to work, you'll need a copy of the dynamic action from page 0, put it on the page containg the report, and change the jQuery selector a bit. An example of this can be found on my SQL History page.

Note: Codemirror has some issues with '\' in PL/SQL (and maybe some other formats as well).
In the example below, the first "escape" line causes formatting errors; the second "escape" line has --' at the end to fix this.

PL/SQL Example (read-only)

Javascript Example (editable)

Textarea Item Example (read-only)

Textarea Item Example (editable)

Code

Region

Identification
Sequence
Title
Type
Source
Source Type
Region Source

Region

Identification
Sequence
Title
Type
Source
Source Type
Region Source

Item

Identification
Sequence
Name
Display As
User Interface
Region
Element
HTML Form Element CSS Classes
Source
Source Used
Source Type
Source value or expression

Item

Identification
Sequence
Name
Display As
User Interface
Region
Element
HTML Form Element CSS Classes
Source
Source Used
Source Type
Source value or expression

Dynamic Action

Note: This object is located on page 0
Identification
Name
Execution Options
Sequence
When
Event
Advanced
Event Scope
True Action
Identification
Action
Settings
Code
Execution Options
Sequence
Fire On Initialization
Affected Elements
Selection Type
jQuery Selector