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

apex5_codemirror_logo

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.

apex5_codemirror_path

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: apex5_codemirror_input

Result after adding codemirror plsql syntax highlighting

apex5_codemirror_output_plsql

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

 

apex5_codemirror_page1

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

apex5_codemirror_page2

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.

apex5_codemirror_DA1apex5_codemirror_DA2

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.

 

Advertisements

2 thoughts on “Apex 5 – Region with syntax highlighting

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s