Nide Customization

Nide uses CodeMirror for its text editor. You can configure any of the editor's settings by making modifications the editor creation. These files are located in NPM install path for Nide: {npm global path}/nide.

Customizing Tab Spacing in Nide

As of version 0.2.0 you will need to modify Nide source to modify the editor spacing. To modify tab spacing edit ClientEditor.js:

vim nide/client/js/ClientEditor.js  

Look for the createCodeMirror function and modify indentUnit: 2 to make the tab size 2.

    var createCodeMirror = function(parentNode, contents, path, options) {
        var mode = inferCodeMirrorModeFromPath(path);
        var options = {
            value: contents,
            mode: mode,
            lineNumbers: true,
            onChange: options.onChange,
            readOnly: options.readOnly,
            // CONFIGURE TAB SPACING HERE
            indentUnit: 2,
            enterMode: 'keep',
            tabMode: 'shift',
            electricChars: false,
            smartHome: true,
            matchBrackets: true            
        }
    }

Customizing Theme in Nide

Customizing the theme is fairly easy. The default themes are available on the CodeMirror site: http://codemirror.net/theme/.

To get a custom theme configured:

  1. Download the theme of choice, or create your own, into nide/client/css path.
cd {npm}/nide/client/css  
curl -O http://codemirror.net/theme/eclipse.css  
  1. Load the theme resource by adding a link to the theme's CSS file to the index page index.html
  <link rel="stylesheet" href="css/codemirror.css">
  <link rel="stylesheet" href="css/codemirror-default.css">
  <!-- ADD NEW THEME -->
  <link rel="stylesheet" href="css/eclipse.css">
  1. Modify ClientEditor.js to include the theme in the editor's configuration
var createCodeMirror = function(parentNode, contents, path, options) {  
    var mode = inferCodeMirrorModeFromPath(path);
    var options = {
        value: contents,
        mode: mode,
        lineNumbers: true,
        onChange: options.onChange,
        readOnly: options.readOnly,
        indentUnit: 2,
        enterMode: 'keep',
        tabMode: 'shift',
        electricChars: false,
        smartHome: true,
        matchBrackets: true,
        // SET THE THEME
        theme: 'eclipse'
    }
}
comments powered by Disqus