docs(all): convert <pre>/</pre> snippets to GFM snippets

17 files changed, 211 insertions, 189 deletions

diff --git a/docs/content/guide/animations.ngdoc b/docs/content/guide/animations.ngdoc
index 1178d774..a9dd6ac6 100644
--- a/docs/content/guide/animations.ngdoc
+++ b/docs/content/guide/animations.ngdoc
@@ -64,11 +64,11 @@ You may also want to setup a separate CSS file for defining CSS-based animations
 Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to a HTML element within
 your website, you can apply animations to it. Lets say for example that we have an HTML template with a repeater in it like so:
 
-<pre>
+```html
 <div ng-repeat="item in items" class="repeated-item">
   {{ item.id }}
 </div>
-</pre>
+```
 
 As you can see, the `.repeated-item` class is present on the element that will be repeated and this class will be
 used as a reference within our application's CSS and/or JavaScript animation code to tell AngularJS to perform an animation.
@@ -80,13 +80,13 @@ it will apply a `ng-move` class name.
 Taking a look at the following CSS code, we can see some transition and keyframe animation code set for each of those events that
 occur when ngRepeat triggers them:
 
-<pre>
-&#47;&#42;
+```css
+/*
   We're using CSS transitions for when
   the enter and move events are triggered
   for the element that has the .repeated-item
   class
-&#42;&#47;
+*/
 .repeated-item.ng-enter, .repeated-item.ng-move {
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
@@ -95,22 +95,22 @@ occur when ngRepeat triggers them:
   opacity:0;
 }
 
-&#47;&#42;
+/*
  The ng-enter-active and ng-move-active
  are where the transition destination properties
  are set so that the animation knows what to
  animate.
-&#42;&#47;
+*/
 .repeated-item.ng-enter.ng-enter-active,
 .repeated-item.ng-move.ng-move-active {
   opacity:1;
 }
 
-&#47;&#42;
+/*
   We're using CSS keyframe animations for when
   the leave event is triggered for the element
   that has the .repeated-item class
-&#42;&#47;
+*/
 .repeated-item.ng-leave {
   -webkit-animation:0.5s my_animation;
   -moz-animation:0.5s my_animation;
@@ -118,34 +118,34 @@ occur when ngRepeat triggers them:
   animation:0.5s my_animation;
 }
 
-&#64;keyframes my_animation {
+@keyframes my_animation {
   from { opacity:1; }
   to { opacity:0; }
 }
 
-&#47;&#42;
+/*
   Unfortunately each browser vendor requires
   its own definition of keyframe animation code...
-&#42;&#47;
-&#64;-webkit-keyframes my_animation {
+*/
+@-webkit-keyframes my_animation {
   from { opacity:1; }
   to { opacity:0; }
 }
 
-&#64;-moz-keyframes my_animation {
+@-moz-keyframes my_animation {
   from { opacity:1; }
   to { opacity:0; }
 }
 
-&#64;-o-keyframes my_animation {
+@-o-keyframes my_animation {
   from { opacity:1; }
   to { opacity:0; }
 }
-</pre>
+```
 
 The same approach to animation can be used using JavaScript code (**jQuery is used within to perform animations**):
 
-<pre>
+```js
 myModule.animation('.repeated-item', function() {
   return {
     enter : function(element, done) {
@@ -199,7 +199,7 @@ myModule.animation('.repeated-item', function() {
     removeClass : function(element, className, done) {}
   }
 });
-</pre>
+```
 
 With these generated CSS class names present on the element at the time, AngularJS automatically
 figures out whether to perform a CSS and/or JavaScript animation. If both CSS and JavaScript animation
@@ -268,7 +268,7 @@ For a full breakdown of the steps involved during each animation event, refer to
 Animations within custom directives can also be established by injecting `$animate` directly into your directive and
 making calls to it when needed.
 
-<pre>
+```js
 myModule.directive('my-directive', ['$animate', function($animate) {
   return function(element, scope, attrs) {
     element.bind('click', function() {
@@ -280,7 +280,7 @@ myModule.directive('my-directive', ['$animate', function($animate) {
     });
   };
 }]);
-</pre>
+```
 
 ## More about animations
 
diff --git a/docs/content/guide/bootstrap.ngdoc b/docs/content/guide/bootstrap.ngdoc
index 058ae46d..d5098a23 100644
--- a/docs/content/guide/bootstrap.ngdoc
+++ b/docs/content/guide/bootstrap.ngdoc
@@ -13,7 +13,7 @@ This example shows the recommended path for integrating Angular with what we cal
 initialization.
 
 
-<pre>
+```html
 <!doctype html>
 <html xmlns:ng="http://angularjs.org" ng-app>
   <body>
@@ -21,7 +21,7 @@ initialization.
     <script src="angular.js">
   </body>
 </html>
-</pre>
+```
 
   * Place the `script` tag at the bottom of the page. Placing script tags at the end of the page
     improves app load time because the HTML loading is not blocked by loading of the `angular.js`
@@ -65,7 +65,7 @@ If the {@link api/ng.directive:ngApp `ng-app`} directive is found then Angular w
     portion of the DOM as an Angular application.
 
 
-<pre>
+```html
 <!doctype html>
 <html ng-app="optionalModuleName">
   <body>
@@ -73,7 +73,7 @@ If the {@link api/ng.directive:ngApp `ng-app`} directive is found then Angular w
     <script src="angular.js"></script>
   </body>
 </html>
-</pre>
+```
 
 
 
@@ -86,7 +86,7 @@ or the need to perform an operation before Angular compiles a page.
 
 Here is an example of manually initializing Angular:
 
-<pre>
+```html
 <!doctype html>
 <html xmlns:ng="http://angularjs.org">
   <body>
@@ -100,7 +100,7 @@ Here is an example of manually initializing Angular:
     </script>
   </body>
 </html>
-</pre>
+```
 
 Note that we have provided the name of our application module to be loaded into the injector as the second
 parameter of the {@link api/angular.bootstrap} function. Notice that `angular.bootstrap` will not create modules 
diff --git a/docs/content/guide/compiler.ngdoc b/docs/content/guide/compiler.ngdoc
index 4440ace6..8defadcf 100644
--- a/docs/content/guide/compiler.ngdoc
+++ b/docs/content/guide/compiler.ngdoc
@@ -60,12 +60,12 @@ during the compilation process. The directives can be placed in element names, a
 names, as well as comments. Here are some equivalent examples of invoking the {@link
 api/ng.directive:ngBind `ng-bind`} directive.
 
-<pre>
+```html
   <span ng-bind="exp"></span>
   <span class="ng-bind: exp;"></span>
   <ng-bind></ng-bind>
   <!-- directive: ng-bind exp -->
-</pre>
+```
 
 A directive is just a function which executes when the compiler encounters it in the DOM. See {@link
 api/ng.$compileProvider#methods_directive directive API} for in-depth documentation on how
@@ -187,7 +187,7 @@ a model on the compiled scope will be reflected in the DOM.
 Below is the corresponding code using the `$compile` service.
 This should help give you an idea of what Angular does internally.
 
-<pre>
+```js
   var $compile = ...; // injected into your code
   var scope = ...;
   var parent = ...; // DOM element where the compiled template can be appended
@@ -205,7 +205,7 @@ This should help give you an idea of what Angular does internally.
   
   // Step 4: Append to DOM (optional)
   parent.appendChild(element);
-</pre>
+```
 
 ### The difference between Compile and Link
 
@@ -229,14 +229,14 @@ moved to the compile function for performance reasons.
 
 To understand, let's look at a real-world example with `ngRepeat`:
 
-<pre>
+```html
 Hello {{user}}, you have these actions:
 <ul>
   <li ng-repeat="action in user.actions">
     {{action.description}}
   </li>
 </ul>
-</pre>
+```
 
 When the above example is compiled, the compiler visits every node and looks for directives.
 
@@ -295,7 +295,7 @@ One of the most common use cases for directives is to create reusable components
 
 Below is a pseudo code showing how a simplified dialog component may work.
 
-<pre>
+```html
 <div>
   <button ng-click="show=true">show</button>
 
@@ -306,7 +306,7 @@ Below is a pseudo code showing how a simplified dialog component may work.
      Body goes here: {{username}} is {{title}}.
   </dialog>
 </div>
-</pre>
+```
 
 Clicking on the "show" button will open the dialog. The dialog will have a title, which is
 data bound to `username`, and it will also have a body which we would like to transclude
@@ -314,7 +314,7 @@ into the dialog.
 
 Here is an example of what the template definition for the `dialog` widget may look like.
 
-<pre>
+```html
 <div ng-show="visible">
   <h3>{{title}}</h3>
   <div class="body" ng-transclude></div>
@@ -323,7 +323,7 @@ Here is an example of what the template definition for the `dialog` widget may l
     <button ng-click="onCancel()">Close</button>
   </div>
 </div>
-</pre>
+```
 
 This will not render properly, unless we do some scope magic.
 
@@ -334,14 +334,14 @@ the `onOk` and `onCancel` functions to be present in the scope. This limits the
 widget. To solve the mapping issue we use the `locals` to create local variables which the template
 expects as follows:
 
-<pre>
+```js
   scope: {
     title: '@',             // the title uses the data-binding from the parent scope
     onOk: '&',              // create a delegate onOk function
     onCancel: '&',          // create a delegate onCancel function
     visible: '='            // set up visible to accept data-binding
   }
-</pre>
+```
 
 Creating local properties on widget scope creates two problems:
 
@@ -367,7 +367,7 @@ surprise.
 
 Therefore the final directive definition looks something like this:
 
-<pre>
+```js
 transclude: true,
 scope: {
     title: '@',             // the title uses the data-binding from the parent scope
@@ -377,5 +377,5 @@ scope: {
 },
 restrict: 'E',
 replace: true
-</pre>
+```
 
diff --git a/docs/content/guide/controller.ngdoc b/docs/content/guide/controller.ngdoc
index 77e0ac50..01f5299f 100644
--- a/docs/content/guide/controller.ngdoc
+++ b/docs/content/guide/controller.ngdoc
@@ -28,7 +28,7 @@ is registered.
 The following example shows a very simple constructor function for a Controller, `GreetingCtrl`,
 which attaches a `greeting` property containing the string `'Hola!'` to the `$scope`:
 
-```
+```js
     function GreetingCtrl($scope) {
         $scope.greeting = 'Hola!';
     }
@@ -37,22 +37,22 @@ which attaches a `greeting` property containing the string `'Hola!'` to the `$sc
 Once the Controller has been attached to the DOM, the `greeting` property can be data-bound to the
 template:
 
-```
-<div ng-controller="GreetingCtrl">
-  {{ greeting }}
-</div>
+```js
+    <div ng-controller="GreetingCtrl">
+      {{ greeting }}
+    </div>
 ```
 
 **NOTE**: Although Angular allows you to create Controller functions in the global scope, this is
 not recommended.  In a real application you should use the `.controller` method of your
 {@link module Angular Module} for your application as follows:
 
-```
-var myApp = angular.module('myApp',[]);
+```js
+    var myApp = angular.module('myApp',[]);
 
-myApp.controller('GreetingCtrl', ['$scope', function($scope) {
-    $scope.greeting = 'Hola!';
-}]);
+    myApp.controller('GreetingCtrl', ['$scope', function($scope) {
+        $scope.greeting = 'Hola!';
+    }]);
 ```
 
 We have used an **inline injection annotation** to explicitly specify the dependency
@@ -68,21 +68,21 @@ then available to be called from the template/view.
 
 The following example uses a Controller to add a method to the scope, which doubles a number:
 
-```
-var myApp = angular.module('myApp',[]);
+```js
+    var myApp = angular.module('myApp',[]);
 
-myApp.controller('DoubleCtrl', ['$scope', function($scope) {
-    $scope.double = function(value) { return value * 2; };
-}]);
+    myApp.controller('DoubleCtrl', ['$scope', function($scope) {
+        $scope.double = function(value) { return value * 2; };
+    }]);
 ```
 
 Once the Controller has been attached to the DOM, the `double` method can be invoked in an Angular
 expression in the template:
 
-```
-<div ng-controller="DoubleCtrl">
-  Two times <input ng-model="num"> equals {{ double(num) }}
-</div>
+```js
+    <div ng-controller="DoubleCtrl">
+      Two times <input ng-model="num"> equals {{ double(num) }}
+    </div>
 ```
 
 As discussed in the {@link concepts Concepts} section of this guide, any
@@ -270,7 +270,7 @@ Although there are many ways to test a Controller, one of the best conventions,
 involves injecting the {@link api/ng.$rootScope $rootScope} and {@link api/ng.$controller $controller}:
 
 **Controller Definition:**
-```
+```js
     var myApp = angular.module('myApp',[]);
 
     myApp.controller('MyController', function($scope) {
@@ -282,7 +282,7 @@ involves injecting the {@link api/ng.$rootScope $rootScope} and {@link api/ng.$c
 ```
 
 **Controller Test:**
-```
+```js
 describe('myController function', function() {
 
   describe('myController', function() {
@@ -310,7 +310,7 @@ describe('myController function', function() {
 If you need to test a nested Controller you need to create the same scope hierarchy
 in your test that exists in the DOM:
 
-```
+```js
 describe('state', function() {
     var mainScope, childScope, grandChildScope;
 
diff --git a/docs/content/guide/dev_guide.e2e-testing.ngdoc b/docs/content/guide/dev_guide.e2e-testing.ngdoc
index e0d3f61d..d72cb9b3 100644
--- a/docs/content/guide/dev_guide.e2e-testing.ngdoc
+++ b/docs/content/guide/dev_guide.e2e-testing.ngdoc
@@ -31,7 +31,7 @@ In addition to the above elements, scenarios may also contain helper functions t
 code in the `it` blocks.
 
 Here is an example of a simple scenario:
-<pre>
+```js
 describe('Buzz Client', function() {
 it('should filter results', function() {
   input('user').enter('jacksparrow');
@@ -41,7 +41,7 @@ it('should filter results', function() {
   expect(repeater('ul li').count()).toEqual(1);
 });
 });
-</pre>
+```
 
 Note that
 [`input('user')`](https://github.com/angular/angular.js/blob/master/docs/content/guide/dev_guide.e2e-testing.ngdoc#L119)
@@ -190,7 +190,7 @@ be negated with `not()`. For instance: `expect(element('h1').text()).not().toEqu
 
 Source: https://github.com/angular/angular.js/blob/master/src/ngScenario/matchers.js
 
-<pre>
+```js
 // value and Object comparison following the rules of angular.equals().
 expect(value).toEqual(value)
 
@@ -219,7 +219,7 @@ expect(value).toContain(expected)
 // number comparison using < and >
 expect(value).toBeLessThan(expected)
 expect(value).toBeGreaterThan(expected)
-</pre>
+```
 
 # Example
 See the [angular-seed](https://github.com/angular/angular-seed) project for more examples.
@@ -239,7 +239,7 @@ Imagine the application to be structured into two views:
  2. a *detail view* which shows the entries' details and contains a delete button. When clicking the
     delete button, the user is redirected back to the *overview page*.
 
-<pre>
+```js
 beforeEach(function () {
   var deleteEntry = function () {
     browser().navigateTo('/entries');
@@ -276,24 +276,24 @@ beforeEach(function () {
   // start deleting entries
   deleteEntry();
 });
-</pre>
+```
 
 In order to understand what is happening, we should emphasize that ngScenario calls are not
 immediately executed, but queued (in ngScenario terms, we would be talking about adding
 future actions). If we had only one entry in our table, then the following future actions
 would be queued:
 
-<pre>
+```js
 // delete entry 1
 browser().navigateTo('/entries');
 element('table tbody').query(function (tbody, done) { ... });
 element('table tbody a');
 element('.btn-danger').click();
-</pre>
+```
 
 For two entries, ngScenario would have to work on the following queue:
 
-<pre>
+```js
 // delete entry 1
 browser().navigateTo('/entries');
 element('table tbody').query(function (tbody, done) { ... });
@@ -306,7 +306,7 @@ element('.btn-danger').click();
     element('table tbody').query(function (tbody, done) { ... });
     element('table tbody a');
     element('.btn-danger').click();
-</pre>
+```
 
 # Caveats
 
diff --git a/docs/content/guide/dev_guide.services.$location.ngdoc b/docs/content/guide/dev_guide.services.$location.ngdoc
index 04bf23eb..8f7a596a 100644
--- a/docs/content/guide/dev_guide.services.$location.ngdoc
+++ b/docs/content/guide/dev_guide.services.$location.ngdoc
@@ -100,25 +100,28 @@ To configure the `$location` service, retrieve the
   default: `""`
 
 ### Example configuration
-<pre>
+```js
 $locationProvider.html5Mode(true).hashPrefix('!');
-</pre>
+```
 
 ## Getter and setter methods
 
 `$location` service provides getter methods for read-only parts of the URL (absUrl, protocol, host,
 port) and getter / setter methods for url, path, search, hash:
-<pre>
+```js
 // get the current path
 $location.path();
 
 // change the path
 $location.path('/newValue')
-</pre>
+```
 
 All of the setter methods return the same `$location` object to allow chaining. For example, to
 change multiple segments in one go, chain setters like this:
-<pre>$location.path('/newValue').search({key: value});</pre>
+
+```js
+$location.path('/newValue').search({key: value});
+```
 
 ## Replace method
 
@@ -127,11 +130,12 @@ time the $location service is synced with the browser, the last history record s
 instead of creating a new one. This is useful when you want to implement redirection, which would
 otherwise break the back button (navigating back would retrigger the redirection). To change the
 current URL without creating a new browser history record you can call:
-<pre>
+
+```js
   $location.path('/someNewPath');
   $location.replace();
   // or you can chain these as: $location.path('/someNewPath').replace();
-</pre>
+```
 
 Note that the setters don't update `window.location` immediately. Instead, the `$location` service is
 aware of the {@link api/ng.$rootScope.Scope scope} life-cycle and coalesces multiple `$location`
@@ -209,7 +213,7 @@ In this mode, `$location` uses Hashbang URLs in all browsers.
 
 ### Example
 
-<pre>
+```js
 it('should show example', inject(
   function($locationProvider) {
     $locationProvider.html5Mode(false);
@@ -231,13 +235,16 @@ it('should show example', inject(
     $location.absUrl() == 'http://example.com/base/index.html#!/new?x=y'
   }
 ));
-</pre>
+```
 
 ### Crawling your app
 
 To allow indexing of your AJAX application, you have to add special meta tag in the head section of
 your document:
-<pre><meta name="fragment" content="!" /></pre>
+
+```html
+<meta name="fragment" content="!" />
+```
 
 This will cause crawler bot to request links with `_escaped_fragment_` param so that your server
 can recognize the crawler and serve a HTML snapshots. For more information about this technique,
@@ -258,7 +265,7 @@ having to worry about whether the browser displaying your app supports the histo
 
 ### Example
 
-<pre>
+```js
 it('should show example', inject(
   function($locationProvider) {
     $locationProvider.html5Mode(true);
@@ -293,7 +300,7 @@ it('should show example', inject(
     $location.absUrl() == 'http://example.com/#!/foo/bar?x=y'
   }
 ));
-</pre>
+```
 
 ### Fallback for legacy browsers
 
@@ -341,7 +348,10 @@ to entry point of your application (e.g. index.html)
 
 If you want your AJAX application to be indexed by web crawlers, you will need to add the following
 meta tag to the HEAD section of your document:
-<pre><meta name="fragment" content="!" /></pre>
+
+```html
+<meta name="fragment" content="!" />
+```
 
 This statement causes a crawler to request links with an empty `_escaped_fragment_` parameter so that
 your server can recognize the crawler and serve it HTML snapshots. For more information about this
@@ -525,7 +535,7 @@ hashPrefix.
 When using `$location` service during testing, you are outside of the angular's {@link
 api/ng.$rootScope.Scope scope} life-cycle. This means it's your responsibility to call `scope.$apply()`.
 
-<pre>
+```js
 describe('serviceUnderTest', function() {
   beforeEach(module(function($provide) {
     $provide.factory('serviceUnderTest', function($location){
@@ -541,7 +551,7 @@ describe('serviceUnderTest', function() {
 
   }));
 });
-</pre>
+```
 
 
 # Migrating from earlier AngularJS releases
diff --git a/docs/content/guide/dev_guide.services.creating_services.ngdoc b/docs/content/guide/dev_guide.services.creating_services.ngdoc
index bdcf42ad..c6210cc1 100644
--- a/docs/content/guide/dev_guide.services.creating_services.ngdoc
+++ b/docs/content/guide/dev_guide.services.creating_services.ngdoc
@@ -22,17 +22,19 @@ by using the {@link api/AUTO.$provide $provide} service in the module configurat
 function. The following pseudo-code shows both approaches:
 
 Using the angular.Module api:
-<pre>
+
+```js
 var myModule = angular.module('myModule', []);
 myModule.factory('serviceId', function() {
   var shinyNewServiceInstance;
   //factory function body that constructs shinyNewServiceInstance
   return shinyNewServiceInstance;
 });
-</pre>
+```
 
 Using the $provide service:
-<pre>
+
+```js
 angular.module('myModule', [], function($provide) {
   $provide.factory('serviceId', function() {
     var shinyNewServiceInstance;
@@ -40,7 +42,7 @@ angular.module('myModule', [], function($provide) {
     return shinyNewServiceInstance;
   });
 });
-</pre>
+```
 
 Note that you are not registering a service instance, but rather a factory function that will
 create this instance when called.
@@ -58,7 +60,7 @@ Following is an example of a very simple service. This service depends on the `$
 stores all notifications; after the third one, the service displays all of the notifications by
 window alert.
 
-<pre>
+```js
 angular.module('myModule', [], function($provide) {
   $provide.factory('notify', ['$window', function(win) {
     var msgs = [];
@@ -71,7 +73,7 @@ angular.module('myModule', [], function($provide) {
     };
   }]);
 });
-</pre>
+```
 
 
 # Instantiating Angular Services
diff --git a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc
index b24dec6e..312342b8 100644
--- a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc
+++ b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc
@@ -13,7 +13,7 @@ IDs matters: the order of the services in the array will be used when calling th
 with injected parameters. The names of parameters in factory function don't matter, but by
 convention they match the service IDs, which has added benefits discussed below.
 
-<pre>
+```js
 function myController($loc, $log) {
   this.firstMethod = function() {
     // use $location service
@@ -26,7 +26,7 @@ function myController($loc, $log) {
 }
 // which services to inject ?
 myController.$inject = ['$location', '$log'];
-</pre>
+```
 
 <doc:example module="MyServiceModule">
 <doc:source>
diff --git a/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc b/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc
index 6dafc3f7..726a8bbe 100644
--- a/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc
+++ b/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc
@@ -12,37 +12,37 @@ dropped (see "Inferring `$inject`" but note that that is currently an experiment
 
 Using the array notation:
 
-<pre>
+```js
 function myModuleCfgFn($provide) {
   $provide.factory('myService', ['dep1', 'dep2', function(dep1, dep2) {}]);
 }
-</pre>
+```
 
 
 Using the $inject property:
 
-<pre>
+```js
 function myModuleCfgFn($provide) {
   var myServiceFactory = function(dep1, dep2) {};
   myServiceFactory.$inject = ['dep1', 'dep2'];
   $provide.factory('myService', myServiceFactory);
 }
-</pre>
+```
 
 
 Using DI inference (incompatible with minifiers):
 
-<pre>
+```js
 function myModuleCfgFn($provide) {
   $provide.factory('myService', function(dep1, dep2) {});
 }
-</pre>
+```
 
 
 Here is an example of two services, one of which depends on the other and both
 of which depend on other services that are provided by the Angular framework:
 
-<pre>
+```js
 /**
  * batchLog service allows for messages to be queued in memory and flushed
  * to the console.log every 50 seconds.
@@ -83,7 +83,7 @@ of which depend on other services that are provided by the Angular framework:
 
   // get the main service to kick off the application
   angular.injector([batchLogModule]).get('routeTemplateMonitor');
-</pre>
+```
 
 Things to notice in this example:
 
diff --git a/docs/content/guide/dev_guide.services.testing_services.ngdoc b/docs/content/guide/dev_guide.services.testing_services.ngdoc
index 6e0bbace..49f10c5a 100644
--- a/docs/content/guide/dev_guide.services.testing_services.ngdoc
+++ b/docs/content/guide/dev_guide.services.testing_services.ngdoc
@@ -6,7 +6,7 @@ The following is a unit test for the 'notify' service in the 'Dependencies' exam
 dev_guide.services.creating_services Creating Angular Services}. The unit test example uses Jasmine
 spy (mock) instead of a real browser alert.
 
-<pre>
+```js
 var mock, notify;
 
 beforeEach(function() {
@@ -47,7 +47,7 @@ it('should clear messages after alert', function() {
   expect(mock.alert.callCount).toEqual(2);
   expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);
 });
-</pre>
+```
 
 
 ## Related Topics
diff --git a/docs/content/guide/dev_guide.unit-testing.ngdoc b/docs/content/guide/dev_guide.unit-testing.ngdoc
index 16c1c99e..28779182 100644
--- a/docs/content/guide/dev_guide.unit-testing.ngdoc
+++ b/docs/content/guide/dev_guide.unit-testing.ngdoc
@@ -52,7 +52,7 @@ While there is nothing wrong with the `new` operator fundamentally, a problem ar
 on a constructor. This permanently binds the call site to the type. For example, lets say that we try to
 instantiate an `XHR` that will retrieve data from the server.
 
-<pre>
+```js
 function MyClass() {
   this.doWork = function() {
     var xhr = new XHR();
@@ -61,7 +61,7 @@ function MyClass() {
     xhr.send();
   }
 }
-</pre>
+```
 
 A problem surfaces in tests when we would like to instantiate a `MockXHR` that would
 allow us to return fake data and simulate network failures. By calling `new XHR()` we are
@@ -69,20 +69,21 @@ permanently bound to the actual XHR and there is no  way to replace it. Yes, we
 patch, but that is a bad idea for many reasons which are outside the scope of this document.
 
 Here's an example of how the class above becomes hard to test when resorting to monkey patching:
-<pre>
+
+```js
 var oldXHR = XHR;
 XHR = function MockXHR() {};
 var myClass = new MyClass();
 myClass.doWork();
 // assert that MockXHR got called with the right arguments
 XHR = oldXHR; // if you forget this bad things will happen
-</pre>
+```
 
 
 ### Global look-up:
 Another way to approach the problem is to look for the service in a well-known location.
 
-<pre>
+```js
 function MyClass() {
   this.doWork = function() {
     global.xhr({
@@ -92,7 +93,7 @@ function MyClass() {
     })
   }
 }
-</pre>
+```
 
 While no new dependency instance is created, it is fundamentally the same as `new` in
 that no  way exists to intercept the call to `global.xhr` for testing purposes, other then
@@ -101,14 +102,15 @@ order to replace it with call to a mock method. For further explanation of why t
 State & Singletons](http://misko.hevery.com/code-reviewers-guide/flaw-brittle-global-state-singletons/)
 
 The class above is hard to test since we have to change the global state:
-<pre>
+
+```js
 var oldXHR = global.xhr;
 global.xhr = function mockXHR() {};
 var myClass = new MyClass();
 myClass.doWork();
 // assert that mockXHR got called with the right arguments
 global.xhr = oldXHR; // if you forget this bad things will happen
-</pre>
+```
 
 
 ### Service Registry:
@@ -116,7 +118,7 @@ global.xhr = oldXHR; // if you forget this bad things will happen
 It may seem that this can be solved by having a registry of all the services and then
 having the tests replace the services as needed.
 
-<pre>
+```js
 function MyClass() {
   var serviceRegistry = ????;
   this.doWork = function() {
@@ -127,7 +129,7 @@ function MyClass() {
       complete:function(response){ ... }
     })
 }
-</pre>
+```
 
 However, where does the serviceRegistry come from? If it is:
 * `new`-ed up, the test has no chance to reset the services for testing.
@@ -135,20 +137,21 @@ However, where does the serviceRegistry come from? If it is:
 only one global variable exists to be reset).
 
 The class above is hard to test since we have to change the global state:
-<pre>
+
+```js
 var oldServiceLocator = global.serviceLocator;
 global.serviceLocator.set('xhr', function mockXHR() {});
 var myClass = new MyClass();
 myClass.doWork();
 // assert that mockXHR got called with the right arguments
 global.serviceLocator = oldServiceLocator; // if you forget this bad things will happen
-</pre>
+```
 
 
 ### Passing in Dependencies:
 Last, the dependency can be passed in.
 
-<pre>
+```js
 function MyClass(xhr) {
   this.doWork = function() {
     xhr({
@@ -157,7 +160,7 @@ function MyClass(xhr) {
       complete:function(response){ ... }
     })
 }
-</pre>
+```
 
 This is the preferred method since the code makes no assumptions about the origin of `xhr` and cares
 instead about whoever created the class  responsible for passing it in. Since the creator of the
@@ -165,12 +168,13 @@ class should be different code than the user of the class, it separates the resp
 creation from the logic. This is dependency-injection in a nutshell.
 
 The class above is testable, since in the test we can write:
-<pre>
+
+```js
 function xhrMock(args) {...}
 var myClass = new MyClass(xhrMock);
 myClass.doWork();
 // assert that xhrMock got called with the right arguments
-</pre>
+```
 
 Notice that no global variables were harmed in the writing of this test.
 
@@ -182,7 +186,7 @@ What makes each application unique is its logic, and the logic is what we would
 for your application contains DOM manipulation, it will be hard to test. See the example
 below:
 
-<pre>
+```js
 function PasswordCtrl() {
   // get references to DOM elements
   var msg = $('.ex1 span');
@@ -205,12 +209,12 @@ function PasswordCtrl() {
      .text(strength);
   }
 }
-</pre>
+```
 
 The code above is problematic from a testability point of view since it requires your test to have the right kind
 of DOM present when the code executes. The test would look like this:
 
-<pre>
+```js
 var input = $('<input type="text"/>');
 var span = $('<span>');
 $('body').html('<div class="ex1">')
@@ -222,12 +226,12 @@ input.val('abc');
 pc.grade();
 expect(span.text()).toEqual('weak');
 $('body').empty();
-</pre>
+```
 
 In angular the controllers are strictly separated from the DOM manipulation logic and this results in
 a much easier testability story as the following example shows:
 
-<pre>
+```js
 function PasswordCtrl($scope) {
   $scope.password = '';
   $scope.grade = function() {
@@ -241,17 +245,17 @@ function PasswordCtrl($scope) {
     }
   };
 }
-</pre>
+```
 
 and the test is straight forward:
 
-<pre>
+```js
 var $scope = {};
 var pc = $controller('PasswordCtrl', { $scope: $scope });
 $scope.password = 'abc';
 $scope.grade();
 expect($scope.strength).toEqual('weak');
-</pre>
+```
 
 Notice that the test is not only much shorter, it is also easier to follow what is happening. We say
 that such a test tells a story, rather then asserting random bits which don't seem to be related.
@@ -261,7 +265,7 @@ that such a test tells a story, rather then asserting random bits which don't se
 format. They are important because they remove the formatting responsibility from the application
 logic, further simplifying the application logic.
 
-<pre>
+```js
 myModule.filter('length', function() {
   return function(text){
     return (''+(text||'')).length;
@@ -271,7 +275,7 @@ myModule.filter('length', function() {
 var length = $filter('length');
 expect(length(null)).toEqual(0);
 expect(length('abc')).toEqual(3);
-</pre>
+```
 
 ## Directives
 Directives in angular are responsible for encapsulating complex functionality within custom HTML tags,
@@ -282,13 +286,13 @@ you create with directives may be used throughout your application and in many d
 
 Let's start with an angular app with no dependencies.
 
-<pre>
+```js
 var app = angular.module('myApp', []);
-</pre>
+```
 
 Now we can add a directive to our app.
 
-<pre>
+```js
 app.directive('aGreatEye', function () {
     return {
         restrict: 'E',
@@ -296,13 +300,13 @@ app.directive('aGreatEye', function () {
         template: '<h1>lidless, wreathed in flame, {{1 + 1}} times</h1>'
     };
 });
-</pre>
+```
 
 This directive is used as a tag `<a-great-eye></a-great-eye>`. It replaces the entire tag with the
 template `<h1>lidless, wreathed in flame, {{1 + 1}} times</h1>`. Now we are going to write a jasmine unit test to
 verify this functionality. Note that the expression `{{1 + 1}}` times will also be evaluated in the rendered content.
 
-<pre>
+```js
 describe('Unit testing great quotes', function() {
     var $compile;
     var $rootScope;
@@ -327,7 +331,7 @@ describe('Unit testing great quotes', function() {
         expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
     });
 });
-</pre>
+```
 
 We inject the $compile service and $rootScope before each jasmine test. The $compile service is used
 to render the aGreatEye directive. After rendering the directive we ensure that the directive has
diff --git a/docs/content/guide/di.ngdoc b/docs/content/guide/di.ngdoc
index 1714e2aa..dde41dcb 100644
--- a/docs/content/guide/di.ngdoc
+++ b/docs/content/guide/di.ngdoc
@@ -31,7 +31,7 @@ for test isolation.
 The third option is the most viable, since it removes the responsibility of locating the
 dependency from the component. The dependency is simply handed to the component.
 
-<pre>
+```js
   function SomeClass(greeter) {
     this.greeter = greeter;
   }
@@ -39,7 +39,7 @@ dependency from the component. The dependency is simply handed to the component.
   SomeClass.prototype.doSomething = function(name) {
     this.greeter.greet(name);
   }
-</pre>
+```
 
 In the above example `SomeClass` is not concerned with locating the `greeter` dependency, it
 is simply handed the `greeter` at runtime.
@@ -55,7 +55,7 @@ construction and lookup of dependencies.
 
 Here is an example of using the injector service:
 
-<pre>
+```js
   // Provide the wiring information in a module
   angular.module('myModule', []).
   
@@ -77,19 +77,20 @@ Here is an example of using the injector service:
   
   // Request any dependency from the injector
   var greeter = injector.get('greeter');
-</pre>
+```
 
 Asking for dependencies solves the issue of hard coding, but it also means that the injector needs
 to be passed throughout the application. Passing the injector breaks the [Law of Demeter](http://en.wikipedia.org/wiki/Law_of_Demeter). To remedy this, we turn the
 dependency lookup responsibility to the injector by declaring the dependencies as in this example:
 
-<pre>
+```html
   <!-- Given this HTML -->
   <div ng-controller="MyController">
     <button ng-click="sayHello()">Hello</button>
   </div>
-</pre>  
-<pre>
+```
+  
+```js
   // And this controller definition
   function MyController($scope, greeter) {
     $scope.sayHello = function() {
@@ -99,7 +100,7 @@ dependency lookup responsibility to the injector by declaring the dependencies a
   
   // The 'ng-controller' directive does this behind the scenes
   injector.instantiate(MyController);
-</pre>
+```
 
 Notice that by having the `ng-controller` instantiate the class, it can satisfy all of the
 dependencies of `MyController` without the controller ever knowing about the injector. This is
@@ -121,11 +122,11 @@ information. These can be used interchangeably as you see fit and are equivalent
 The simplest way to get hold of the dependencies, is to assume that the function parameter names
 are the names of the dependencies.
 
-<pre>
+```js
   function MyController($scope, greeter) {
     ...
   }
-</pre>
+```
 
 Given a function the injector can infer the names of the service to inject by examining the
 function declaration and extracting the parameter names. In the above example `$scope`, and
@@ -140,12 +141,12 @@ To allow the minifers to rename the function parameters and still be able to inj
 the function needs to be annotated with the `$inject` property. The `$inject` property is an array
 of service names to inject.
 
-<pre>
+```js
   var MyController = function(renamed$scope, renamedGreeter) {
     ...
   }
   MyController['$inject'] = ['$scope', 'greeter'];
-</pre>
+```
 
 In this scenario the ordering of the values in the '$inject' array must match the ordering of the arguments to inject.
 Using above code snippet as an example, '$scope' will be injected into 'renamed$scope' and 'greeter' into 'renamedGreeter'.
@@ -162,15 +163,15 @@ directives.
 
 For example:
 
-<pre>
+```js
   someModule.factory('greeter', function($window) {
     ...
   });
-</pre>
+```
 
 Results in code bloat due to needing a temporary variable:
 
-<pre>
+```js
   var greeterFactory = function(renamed$window) {
     ...
   };
@@ -178,15 +179,15 @@ Results in code bloat due to needing a temporary variable:
   greeterFactory.$inject = ['$window'];
   
   someModule.factory('greeter', greeterFactory);
-</pre>
+```
 
 For this reason the third annotation style is provided as well.
 
-<pre>
+```js
   someModule.factory('greeter', ['$window', function(renamed$window) {
     ...
   }]);
-</pre>
+```
 
 Keep in mind that all of the annotation styles are equivalent and can be used anywhere in Angular
 where injection is supported.
@@ -200,7 +201,7 @@ DI is pervasive throughout Angular. It is typically used in controllers and fact
 Controllers are classes which are responsible for application behavior. The recommended way of 
 declaring controllers is using the array notation:
 
-<pre>
+```js
   someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
     ...
     $scope.aMethod = function() {
@@ -208,7 +209,7 @@ declaring controllers is using the array notation:
     }
     ...
   }]);
-</pre>
+```
 
 This avoids the creation of global functions for controllers and also protects against minification.
 
@@ -219,7 +220,7 @@ Factory methods are responsible for creating most objects in Angular. Examples a
 services, and filters. The factory methods are registered with the module, and the recommended way
 of declaring factories is:
 
-<pre>
+```js
   angular.module('myModule', []).
     config(['depProvider', function(depProvider){
       ...
@@ -236,4 +237,4 @@ of declaring factories is:
     run(['depService', function(depService) {
       ...
     }]);
-</pre>
+```
diff --git a/docs/content/guide/i18n.ngdoc b/docs/content/guide/i18n.ngdoc
index f8e2189d..159958f8 100644
--- a/docs/content/guide/i18n.ngdoc
+++ b/docs/content/guide/i18n.ngdoc
@@ -66,7 +66,7 @@ starts, Angular is automatically pre-configured with localization rules for the
 You can also include the locale specific js file in the index.html page. For example, if one client
 requires German locale, you would serve index_de-de.html which will look something like this:
 
-<pre>
+```html
 <html ng-app>
  <head>
 ….
@@ -75,7 +75,7 @@ requires German locale, you would serve index_de-de.html which will look somethi
 ….
  </head>
 </html>
-</pre>
+```
 
 **Comparison of the two approaches**
 Both approaches described above requires you to prepare different index.html pages or js files for
diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc
index 334161cb..7a1c828c 100644
--- a/docs/content/guide/ie.ngdoc
+++ b/docs/content/guide/ie.ngdoc
@@ -26,7 +26,8 @@ To make your Angular application work on IE please make sure that:
   1. You polyfill JSON.stringify for IE7 and below. You can use
      [JSON2](https://github.com/douglascrockford/JSON-js) or
      [JSON3](http://bestiejs.github.com/json3/) polyfills for this.
-     <pre>
+     
+		 ```html
        <!doctype html>
        <html xmlns:ng="http://angularjs.org">
          <head>
@@ -38,21 +39,23 @@ To make your Angular application work on IE please make sure that:
            ...
          </body>
        </html>
-     </pre>
+     ```
 
   2. add `id="ng-app"` to the root element in conjunction with `ng-app` attribute
-     <pre>
+     
+		 ```html
        <!doctype html>
        <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
          ...
        </html>
-     </pre>
+     ```
 
   3. you **do not** use custom element tags such as `<ng:view>` (use the attribute version
      `<div ng-view>` instead), or
 
   4. if you **do use** custom element tags, then you must take these steps to make IE 8 and below happy:
-     <pre>
+     
+		 ```html
        <!doctype html>
        <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
          <head>
@@ -73,7 +76,7 @@ To make your Angular application work on IE please make sure that:
            ...
          </body>
        </html>
-     </pre>
+     ```
 
 The **important** parts are:
 
@@ -112,37 +115,37 @@ attribute names. So this requires no special handling in IE: `<div my-tag your:t
 Suppose you have HTML with unknown tag `mytag` (this could also be `my:tag` or `my-tag` with same
 result):
 
-<pre>
+```html
   <html>
     <body>
       <mytag>some text</mytag>
     </body>
   </html>
-</pre>
+```
 
 It should parse into the following DOM:
 
-<pre>
+```
 #document
   +- HTML
      +- BODY
         +- mytag
            +- #text: some text
-</pre>
+```
 
 The expected behavior is that the `BODY` element has a child element `mytag`, which in turn has
 the text `some text`.
 
 But this is not what IE does (if the above fixes are not included):
 
-<pre>
+```
 #document
   +- HTML
      +- BODY
         +- mytag
         +- #text: some text
         +- /mytag
-</pre>
+```
 
 In IE, the behavior is that the `BODY` element has three children:
 
@@ -162,7 +165,7 @@ In IE, the behavior is that the `BODY` element has three children:
 To make CSS selectors work with custom elements, the custom element name must be pre-created with 
 `document.createElement('my-tag')` regardless of XML namespace.
 
-<pre>
+```html
   <html xmlns:ng="needed for ng: namespace">
     <head>
       <!--[if lte IE 8]>
@@ -192,7 +195,7 @@ To make CSS selectors work with custom elements, the custom element name must be
       ...
     </body>
   </html>
-</pre>
+```
 
 
 
diff --git a/docs/content/guide/module.ngdoc b/docs/content/guide/module.ngdoc
index 8bf0eba6..417d3837 100644
--- a/docs/content/guide/module.ngdoc
+++ b/docs/content/guide/module.ngdoc
@@ -126,7 +126,7 @@ of blocks:
     application. Only instances and constants can be injected into run blocks. This is to prevent
     further system configuration during application run time.
 
-<pre>
+```js
 angular.module('myModule', []).
   config(function(injectables) { // provider-injector
     // This is an example of config block.
@@ -140,14 +140,14 @@ angular.module('myModule', []).
     // You can only inject instances (not Providers)
     // into the run blocks
   });
-</pre>
+```
 
 ## Configuration Blocks
 
 There are some convenience methods on the module which are equivalent to the config block. For
 example:
 
-<pre>
+```js
 angular.module('myModule', []).
   value('a', 123).
   factory('a', function() { return 123; }).
@@ -163,7 +163,7 @@ angular.module('myModule', []).
     $compileProvider.directive('directiveName', ...);
     $filterProvider.register('filterName', ...);
   });
-</pre>
+```
 
 The configuration blocks get applied in the order in which they are registered. The only exception
 to it are constant definitions, which are placed at the beginning of all configuration blocks.
@@ -196,7 +196,7 @@ and thus script loaders can take advantage of this property and parallelize the
 Beware that using `angular.module('myModule', [])` will create the module `myModule` and overwrite any
 existing module named `myModule`. Use `angular.module('myModule')` to retrieve an existing module.
 
-<pre>
+```js
   var myModule = angular.module('myModule', []);
   
   // add some directives and services
@@ -208,7 +208,7 @@ existing module named `myModule`. Use `angular.module('myModule')` to retrieve a
 
   // throws an error because myOtherModule has yet to be defined
   var myModule = angular.module('myOtherModule');
-</pre>
+```
 
 # Unit Testing
 
@@ -219,7 +219,8 @@ injector, which means that the modules are loaded multiple times per VM. Properl
 modules can help with unit testing, as in this example:
 
 In all of these examples we are going to assume this module definition:
-<pre>
+
+```js
   angular.module('greetMod', []).
 
     factory('alert', function($window) {
@@ -235,10 +236,11 @@ In all of these examples we are going to assume this module definition:
         alert(salutation + ' ' + name + '!');
       }
     });
-</pre>
+```
 
 Let's write some tests:
-<pre>
+
+```js
 describe('myApp', function() {
   // load the relevant application modules then load a special
   // test module which overrides the $window with a mock version,
@@ -272,4 +274,4 @@ describe('myApp', function() {
     });
   });
 });
-</pre>
+```
diff --git a/docs/content/guide/scope.ngdoc b/docs/content/guide/scope.ngdoc
index 3d932fd9..da194977 100644
--- a/docs/content/guide/scope.ngdoc
+++ b/docs/content/guide/scope.ngdoc
@@ -88,7 +88,7 @@ scope is the single source-of-truth for all things view related.
 From a testability point of view, the separation of the controller and the view is desirable, because it allows us
 to test the behavior without being distracted by the rendering details.
 
-<pre>
+```js
   it('should say hello', function() {
     var scopeMock = {};
     var cntl = new MyController(scopeMock);
@@ -101,7 +101,7 @@ to test the behavior without being distracted by the rendering details.
     scopeMock.sayHello();
     expect(scopeMock.greeting).toEqual('Hello angular!');
   });
-</pre>
+```
 
 
 ## Scope Hierarchies
diff --git a/docs/content/guide/templates.ngdoc b/docs/content/guide/templates.ngdoc
index 045cb2a8..fdd90b74 100644
--- a/docs/content/guide/templates.ngdoc
+++ b/docs/content/guide/templates.ngdoc
@@ -24,7 +24,7 @@ The following code snippet shows a simple Angular template made up of standard H
 Angular {@link guide/directive directives} and curly-brace bindings
 with {@link expression expressions}:
 
-<pre>
+```html
 <html ng-app>
  <!-- Body tag augmented with ngController directive  -->
  <body ng-controller="MyController">
@@ -36,7 +36,7 @@ with {@link expression expressions}:
    <script src="angular.js">
  </body>
 </html>
-</pre>
+```
 
 In a simple single-page app, the template consists of HTML, CSS, and angular directives contained
 in just one HTML file (usually `index.html`). In a more complex app, you can display multiple views