How To Integrate Codemirror With Angular Ui

Getting AngularJS, Codemirror, and AngularUI to play nice with each other is certainly an exercise in patient Google searching, pouring over cryptic and inadequate documentation, and inspecting various demos. Fortunately, I've finished all of that so that you don't have to. Here, I walk you through the basic setup of Codemirror using the AnuglarUI directives for PHP syntax highlighting.

It Takes a Village

In this case, a village of dependencies. This was the trickiest part of making everything work, ensuring I had included all of the required CSS and JS files. On a high level you will need:

  • The AngularJS scripts
  • The AngularUI Scripts
  • The core Codemirror Scripts
  • Codemirror support scripts for your language
  • AngularUI CSS Scripts
  • Codemirror Core CSS
  • Codemirror theme CSS (if you so choose)

I was able to track down all the needed scripts by inspecting the page for the language in which I was interested, in this case PHP.

Here is an example of the HTML for the beginning of this adventure:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="//angular-ui.github.com/angular-ui/build/angular-ui.css">
        <link rel="stylesheet" href="//codemirror.net/lib/codemirror.css">

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
        <script src="//codemirror.net/lib/codemirror.js"></script>
        <script src="//codemirror.net/addon/edit/matchbrackets.js"></script>
        <script src="//codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
        <script src="//codemirror.net/mode/xml/xml.js"></script>
        <script src="//codemirror.net/mode/javascript/javascript.js"></script>
        <script src="//codemirror.net/mode/css/css.js"></script>
        <script src="//codemirror.net/mode/clike/clike.js"></script>
        <script src="//codemirror.net/mode/php/php.js"></script>
        <script src="//angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
    </head>
    <body>
    </body>
</html>

Setting Up the View

The easiest part of this process is setting up your view with the directive. You can pretty much copy what they have on the AngularUI site. The code below ignores the theme and should be added in our example's body:

<div ng-app="myApp">
    <div ng-controller="codeCtrl">
        <textarea ui-codemirror ng-model="code"></textarea>
    </div>
</div>

Polishing Your Codemirror

The final step is to update your application javascript (which you could include as another linked file) with the appropriate directions to set up your Codemirror directive and in this case, pass some data to the view:

var myApp = angular.module('myApp', ['ui']);

myApp.value('ui.config', {
    codemirror: {
        mode: 'text/x-php',
        lineNumbers: true,
        matchBrackets: true
    }
});

function codeCtrl($scope) {
    $scope.code = '<?php echo "Hello World"; ?>';
}

The Angular part of this is very simple; simply update the model with a string of PHP. Note that the use of the ui.config to pass Codemirror specific settings along.

That's All Folks

That's really all there is to it. It took a good while to figure all of this out and get it working, but there wasn't much in the way of answers floating around on the internet. Now you should have clean looking output like this:

Example of codemirror output.

If you would like to see this working live, check out a fiddle of the same thing.

If you enjoyed reading this or learned something, please consider sharing via , , or . Thanks!

If you enjoyed this article, you might like others related to the Software interest.