{"_id":"551f3a0b50a0fc210057968c","user":"54cfa8e1a8a4fd0d00b7fd1d","version":{"_id":"54d5635532d98b0d00384afb","project":"54d53c7b23010a0d001aca0c","__v":10,"forked_from":"54d53c7c23010a0d001aca0f","createdAt":"2015-02-07T00:59:01.934Z","releaseDate":"2015-02-07T00:59:01.934Z","categories":["54d5635632d98b0d00384afc","54d5635632d98b0d00384afd","54d5635632d98b0d00384afe","54d5635632d98b0d00384aff","54d5635632d98b0d00384b00","54d5635632d98b0d00384b01","54d5635632d98b0d00384b02","54d652097e05890d006f153e","54dd1315ca1e5219007e9daa","54e21e2b22de1c230094b147","54e68e62a43fe13500db3879","54fa1d3fe7a0ba2f00306309","551c453a23a1ee190034d19a","551df586e52a0b23000c62b6","551f39be6886f8230055f02a","55a6720751457325000e4d97"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"0.1.0","version":"0.1"},"githubsync":"","parentDoc":null,"__v":3,"category":{"_id":"551f39be6886f8230055f02a","__v":5,"pages":["551f39d0610f400d00837ec2","551f39ef610f400d00837ec4","551f3a0b50a0fc210057968c","551f3a164986f62b00a720e0","55206797623ff50d009b2bdf"],"project":"54d53c7b23010a0d001aca0c","version":"54d5635532d98b0d00384afb","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-04T01:09:18.662Z","from_sync":false,"order":10,"slug":"language-modes","title":"Language Modes"},"project":"54d53c7b23010a0d001aca0c","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-04T01:10:35.506Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"The code folding mode specifies to Ace (Cloud9's editor) how to place fold UI in the gutter for [your mode](doc:language-mode).\n\nAdding new folding rules to your mode can be a little tricky. First, insert the following lines of code into your mode definition:\n\n```\nvar MyFoldMode = require(\"./folding/newrules\").FoldMode;\n...\nvar MyMode = function() {\n    ...\n    this.foldingRules = new MyFoldMode();\n};\n```\n\nYou'll be defining your code folding rules into the lib/ace/mode/folding folder. Here's a template that you can use to get started:\n\n```\ndefine(function(require, exports, module) {\n\"use strict\";\n\nvar oop = require(\"../../lib/oop\");\nvar Range = require(\"../../range\").Range;\nvar BaseFoldMode = require(\"./fold_mode\").FoldMode;\n\nvar FoldMode = exports.FoldMode = function() {};\noop.inherits(FoldMode, BaseFoldMode);\n\n(function() {\n\n    // regular expressions that identify starting and stopping points\n    this.foldingStartMarker; \n    this.foldingStopMarker;\n\n    this.getFoldWidgetRange = function(session, foldStyle, row) {\n        var line = session.getLine(row);\n\n        // test each line, and return a range of segments to collapse\n    };\n\n}).call(FoldMode.prototype);\n\n});\n```\n\nJust like with `TextMode` for syntax highlighting, `BaseFoldMode` contains the starting point for code folding logic. `foldingStartMarker` defines your opening folding point, while foldingStopMarker defines the stopping point. For example, for a C-style folding system, these values might look like this:\n\n```\nthis.foldingStartMarker = /(\\{|\\[)[^\\}\\]]*$|^\\s*(\\/\\*)/;\nthis.foldingStopMarker = /^[^\\[\\{]*(\\}|\\])|^[\\s\\*]*(\\*\\/)/;\n```\n\nThese regular expressions identify various symbols `{`, `[`, `//` to pay attention to. `getFoldWidgetRange` matches on these regular expressions, and when found, returns the range of relevant folding points. For more information on the `Range` object, see the [Ace API documentation](http://ace.c9.io/#nav=api&api=range).\n\nAgain, for a C-style folding mechanism, a range to return for the starting fold might look like this:\n```\nvar line = session.getLine(row);\nvar match = line.match(this.foldingStartMarker);\nif (match) {\n    var i = match.index;\n\n    if (match[1])\n        return this.openingBracketBlock(session, match[1], row, i);\n\n    var range = session.getCommentFoldRange(row, i + match[0].length);\n    range.end.column -= 2;\n    return range;\n}\n```\n\nLet's say we stumble across the code block `hello_world() {`. Our range object here becomes:\n\n```\n{\n  startRow: 0,\n  endRow: 0,\n  startColumn: 0,\n  endColumn: 13\n}\n```","excerpt":"","slug":"code-folding","type":"basic","title":"Code Folding"}

Getting Started

Development Workflow

License

Cloud9 Bundle

API Plugins

Editor Plugins

Runners & Debuggers

Plugin Base Classes

User Interface

Ace (text editor)

Language Modes

Language Tooling

Installer

Other

Code Folding

The code folding mode specifies to Ace (Cloud9's editor) how to place fold UI in the gutter for [your mode](doc:language-mode). Adding new folding rules to your mode can be a little tricky. First, insert the following lines of code into your mode definition: ``` var MyFoldMode = require("./folding/newrules").FoldMode; ... var MyMode = function() { ... this.foldingRules = new MyFoldMode(); }; ``` You'll be defining your code folding rules into the lib/ace/mode/folding folder. Here's a template that you can use to get started: ``` define(function(require, exports, module) { "use strict"; var oop = require("../../lib/oop"); var Range = require("../../range").Range; var BaseFoldMode = require("./fold_mode").FoldMode; var FoldMode = exports.FoldMode = function() {}; oop.inherits(FoldMode, BaseFoldMode); (function() { // regular expressions that identify starting and stopping points this.foldingStartMarker; this.foldingStopMarker; this.getFoldWidgetRange = function(session, foldStyle, row) { var line = session.getLine(row); // test each line, and return a range of segments to collapse }; }).call(FoldMode.prototype); }); ``` Just like with `TextMode` for syntax highlighting, `BaseFoldMode` contains the starting point for code folding logic. `foldingStartMarker` defines your opening folding point, while foldingStopMarker defines the stopping point. For example, for a C-style folding system, these values might look like this: ``` this.foldingStartMarker = /(\{|\[)[^\}\]]*$|^\s*(\/\*)/; this.foldingStopMarker = /^[^\[\{]*(\}|\])|^[\s\*]*(\*\/)/; ``` These regular expressions identify various symbols `{`, `[`, `//` to pay attention to. `getFoldWidgetRange` matches on these regular expressions, and when found, returns the range of relevant folding points. For more information on the `Range` object, see the [Ace API documentation](http://ace.c9.io/#nav=api&api=range). Again, for a C-style folding mechanism, a range to return for the starting fold might look like this: ``` var line = session.getLine(row); var match = line.match(this.foldingStartMarker); if (match) { var i = match.index; if (match[1]) return this.openingBracketBlock(session, match[1], row, i); var range = session.getCommentFoldRange(row, i + match[0].length); range.end.column -= 2; return range; } ``` Let's say we stumble across the code block `hello_world() {`. Our range object here becomes: ``` { startRow: 0, endRow: 0, startColumn: 0, endColumn: 13 } ```