{"__v":3,"_id":"551f3a0b50a0fc210057968c","category":{"__v":5,"_id":"551f39be6886f8230055f02a","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"},"parentDoc":null,"project":"54d53c7b23010a0d001aca0c","user":"54cfa8e1a8a4fd0d00b7fd1d","version":{"__v":10,"_id":"54d5635532d98b0d00384afb","forked_from":"54d53c7c23010a0d001aca0f","project":"54d53c7b23010a0d001aca0c","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-04T01:10:35.506Z","link_external":false,"link_url":"","githubsync":"","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"}
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 } ```