code UI Component

jQuery.telligent.evolution.ui.components.code

UI Component which enables a body of text to be rendered and optionally editable with syntax highlighting supporting a variety of programming languages using evolutionCodeEditor. The default implementation uses the evolutionCodeEditor plugin. Overrides can be provided at the theme level. When the element is a textarea, it is automatically made editable, and throttled change events are raised on the textarea element, after which its value contains updated content from the syntax highlighter.

Options

Data made available to instances of the component:

mode: Syntax highlighting mode. Options include actionscript, applescript, batchfile, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, dockerfile, erlang, golang, html, java, javascript, json, jsp, latex, less, lisp, lua, makefile, markdown, nix, objectivec, ocaml, pascal, perl, pgsql, php, powershell, praat, python, rhtml, ruby, rust, sass, scala, sql, sqlserver, text, typescript, velocity, xml, xquery, yaml
- default: text
theme: Highlighting theme. Options include light and dark
- default: light
minlines: When provided, the editor will have a minimum line height
- default: null
maxlines: When provided, the editor will have a maximum line height. This also triggers auto-resizing, up to maxLines. Scrolling is used beyond maxLines.
- default: null
readonly: Whether or not the text is made editable.
- default: false when the container is a textarea, true when it is not (pre or div)
gutter: Whether or not to show line numbers and other left-aligned elements
- default: true
wordwrap: Whether or not to wrap long lines
- default: false
enablefullscreen: Whether or not to enable full screen
- default: true
sourcecomparison: When provided, uses a diff view
- default: null

Example

Non-editable example using ui-code.

<pre class="ui-code" data-maxlines="20" data-mode="javascript" data-theme="dark">
function sayHello(name) {
    alert('Hello, ' + name + '!');
}

sayHello('Alice');
</pre>

Editable example using ui-code. The `textarea` is automatically updated on changes to the editor, and `change` events are triggered on the `textarea`.

<textarea class="ui-code" data-maxlines="20" data-mode="javascript" data-theme="dark">
function sayHello(name) {
    alert('Hello, ' + name + '!');
}

sayHello('Alice');
</textarea>

Default Implementation

For reference purposes or as the basis for an override:

$.telligent.evolution.ui.components.code = {
    setup: function() { },
    add: function(elm, options) {
        var codeOptions = {};

        if(options.mode) {
            codeOptions.mode = options.mode;
        }

        if(options.theme !== undef) {
            codeOptions.theme = options.theme;
        }

        if(options.minlines !== undef) {
            codeOptions.minLines = parseInt(options.minlines, 10)
        }

        if(options.maxlines !== undef) {
            codeOptions.maxLines = parseInt(options.maxlines, 10)
        }

        if(options.readonly) {
            codeOptions.readOnly = options.readonly === 'true' ? true : false;
        }

        if(options.gutter) {
            codeOptions.gutter = options.gutter === 'true' ? true : false;
        }

        if(options.wordwrap) {
            codeOptions.wordWrap = options.wordwrap === 'true' ? true : false;
        }

        if(options.sourcecomparison) {
            codeOptions.sourceComparison = sourceComparison;
        }

        $(elm).evolutionCodeEditor(codeOptions);
    }
};

Recommended