In my opinion I would love to have the line numbers removed from the actually code and instead let the get generated by a code highlighter.
With APEX 5 the development team uses CodeMirror for the App Builder, meaning the needed library is already included with every installation of APEX 5.
Getting your code highlighted
First of all I'm assuming you put your code into some sort of a tag, otherwise it wouldn't possible to distinguish code from other text. I did a quick check on the AskTom website and they seem to use the <pre> tag, so I'll use the same to demonstrate. Let's prepare a single page for displaying nice highlighted code.Update page JavaScript and CSS attributes
Add following to JavaScript File URLs:#IMAGE_PREFIX#libraries/codemirror/4.4/codemirror-custom.min.js #IMAGE_PREFIX#libraries/codemirror/4.4/mode/sql/sql.min.js
Add this to the "Execute when Page Loads" sections:
apex.jQuery(".code").each(function()
{
var myThis = apex.jQuery(this);
var myCode = myThis.html();
var myMIME = myThis.attr("data-code-mode");
myThis.empty();
CodeMirror(
this,
{
value: myCode,
mode: myMIME,
lineNumbers: !myThis.is('.nolinenumbers'),
readOnly: true
}
);
});
This code searches all elements having class "code" and uses the contained html as the code to highlight. The language is derived from an attribute called "data-code-mode", if you want to use something else than what is included in the sql.min.js file you need to include additional files from the CodeMirror mode directory.In CSS File URLs add the CodeMirror gloabl css file:
#IMAGE_PREFIX#libraries/codemirror/4.4/codemirror-custom.min.css
Finally specify this for Inline CSS:
.CodeMirror {
height: auto!important;
}
Adding code blocks
Now just add a new region to the page, I have used static content for now as this is just an example.The content of the region is the following:
This is some text first... Now show code: <pre class="code" data-code-mode="text/x-plsql">DECLARE l_data VARCHAR2(32767); BEGIN NULL; END;</pre> More text below code block. now using a div for code: <div class="code" data-code-mode="text/x-plsql"> SELECT user FROM dual;</div> Nice, isn't it? Finally some code without line numbers <span class="code nolinenumbers" data-code-mode="text/x-plsql">SELECT * FROM emp;</span> where we just select everything from the famous emp table.
And the rendered result looks like this:
