Apex 5 – Region with syntax highlighting

Apex 5 uses syntax highlighting inside the builder application in various parts. Here is how to use syntax highlighting in your own apex application.

Intro

The task was to show plsql code directly from the database on some apex page. In older Apex version I used code mirror to do this. After the upgrade to Apex 5 this didn’t work anymore. The reason was simple: Apex 5 now has a newer version of code mirror included. The path had changed, but also some implementation details were changed. Apex5 has code mirror version 4.4 included. Previous versions only had code mirror 0.66 included. I later added version 3.6 myself.

Code Mirror is installed already in the library folder inside the image path. It has a lib and a mode subfolder, which are both needed later on.

...\images\libraries\codemirror\4.4\lib
...\images\libraries\codemirror\4.4\mode

Assuming we have a text area that holds “code” and now the task is to make this code better readable by adding syntax highlighting. This is where code mirror can be used. Code mirror also has a full blown editor, but how to enable that one is not shown here.

Example

text input:

Result after adding codemirror plsql syntax highlighting

How to do it?

Step 1 – add codemirror lib to the page

We just need to add a little Javascript and css to make this work:

On the page level we need the add the codemirror library. It is a simple javascript and css reference.

Page: Javascript File Urls

#IMAGE_PREFIX#libraries/codemirror/4.4/lib/codemirror.js
#IMAGE_PREFIX#libraries/codemirror/4.4/mode/sql/sql.js
// #IMAGE_PREFIX#libraries/codemirror/4.4/mode/javascript/javascript.js

 

And also the css
#IMAGE_PREFIX#libraries/codemirror/4.4/codemirror-custom.min.css

Step 2 – add dynamic action

Additionally we add a small function that will do the change.

doSyntaxHighlighting(this.affectedElements[0],1);

This function is triggered via a dynamic action call on page load.

It refers to the affected elements section of the dynamic action event. This affected element is the text area that holds the code.

The function doSyntaxHighlighting is declared on page level as a custom function.

function doSyntaxHighlighting(sqltextareaobject,startLineNo) {
  var lEditor = CodeMirror.fromTextArea(sqltextareaobject, {
    autofocus:false,
    lineNumbers:false,
    firstLineNumber:startLineNo,
    readOnly:true,
    lineWrapping:true
  });
  return true;
};

 

Step 3 – choose syntax mode

Code mirror allows syntax highlighting for many many different languages. Each language is called a “mode”. The list of modes can be looked up in the library path under:  “#IMAGE_PREFIX#libraries/codemirror/4.4/mode/…”.

Some examples from other languages (javascript, sql, erlang):

To install a different language the appropriate language.js file needs to be referenced.

For example if you want javascript syntax, then you need to load the javascript.js or the javascript.min.js from the mode/javascript folder:

#IMAGE_PREFIX#libraries/codemirror/4.4/mode/javascript/javascript.min.js

Not all languages have a minified script version. Some languages, like SQL, have different dialects installed. These sub-languages are identified by their mime type.

Check http://codemirror.net/mode/sql/index.html to see what sql dialects are available.

The code mirror function .fromTextArea can be called with such a mime-type as the mode parameter. To use plsql syntax highlightling we need to load the sql mode and also call the method using the text/x-plsql mime type.

function doSyntaxHighlighting(sqltextareaobject,startLineNo) {
  var lEditor = CodeMirror.fromTextArea(sqltextareaobject, {
    autofocus:false,
    lineNumbers:false,
    firstLineNumber:startLineNo,
    readOnly:true,
    lineWrapping:true,
    mode: "text/x-plsql"
  });
  return true;
};

The plsql syntax is based upon some enhancements made by Peter Raganitsch, that made it into the newer code mirror version. However depending on your database version not all keywords might be included.

Step 4 – optimizing output view

The text area is usally too small. This small inline css on page level helps to get a larger text area. The settings on the original text area do not help, because code mirror adds its own div and hides the original html item.

.CodeMirror {
height: auto;
}

Summary

It is extremly easy to add some kind of syntax highlighting. Code mirror also allows to add some sophisticated features, such as line numbers. It is worth to investigate this in some more detail.

How to fetch plsql code from the database is a different topic.

For the moment we just take it for granted that there is a on load process which puts text into a page item of type text area.