This directive allows you to add CodeMirror to your textarea elements.
Code mirror here
- <section>
- <div ui-codemirror >Code mirror here</div>
- </section>
xxxxxxxxxx
<html style="color: green">
<!-- this is a comment -->
<head>
<title>HTML Example</title>
</head>
<body>
The indentation tries to be <em>somewhat "do what
I mean"</em>... but might not match your style.
</body>
</html>
- <section>
- <div ui-codemirror="{
- lineNumbers: true,
- theme:'twilight',
- readOnly: 'nocursor',
- lineWrapping : true,
- mode: 'xml'
- }" ><html style="color: green">
- <!-- this is a comment -->
- <head>
- <title>HTML Example</title>
- </head>
- <body>
- The indentation tries to be <em>somewhat &quot;do what
- I mean&quot;</em>... but might not match your style.
- </body>
- </html></div>
- </section>
;; Scheme code in here.
(define (double x)
(* x x))
<!-- XML code in here. -->
<root>
<foo>
</foo>
<bar/>
</root>
// Javascript code in here.
function foo(msg) {
var r = Math.random();
return "" + r + " : " + msg;
}
- <section ng-controller="CodemirrorCtrl">
- <textarea ui-codemirror="cmOption" ng-model="cmModel"></textarea>
- Mode : <select ng-model="mode" ng-options="m for m in modes" ng-change="modeChanged()"></select>
- </section>
- app.controller('CodemirrorCtrl', ['$scope', function($scope) {
- // The modes
- $scope.modes = ['Scheme', 'XML', 'Javascript'];
- $scope.mode = $scope.modes[0];
- // The ui-codemirror option
- $scope.cmOption = {
- lineNumbers: true,
- indentWithTabs: true,
- onLoad : function(_cm){
- // HACK to have the codemirror instance in the scope...
- $scope.modeChanged = function(){
- _cm.setOption("mode", $scope.mode.toLowerCase());
- };
- }
- };
- // Initial code content...
- $scope.cmModel = ';; Scheme code in here.\n' +
- '(define (double x)\n\t(* x x))\n\n\n' +
- '<!-- XML code in here. -->\n' +
- '<root>\n\t<foo>\n\t</foo>\n\t<bar/>\n</root>\n\n\n' +
- '// Javascript code in here.\n' +
- 'function foo(msg) {\n\tvar r = Math.random();\n\treturn "" + r + " : " + msg;\n}';
- }]);