1 files changed, 20 insertions, 14 deletions
diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc
index 2f752f6a..de3bdae6 100644
--- a/docs/content/tutorial/step_07.ngdoc
+++ b/docs/content/tutorial/step_07.ngdoc
@@ -71,7 +71,8 @@ both module systems can live side by side and fulfil their goals.
 ## The App Module
 
 __`app/js/app.js`:__
-<pre>
+
+```js
 var phonecatApp = angular.module('phonecatApp', [
   'ngRoute',
   'phonecatControllers'
@@ -92,7 +93,7 @@ phonecatApp.config(['$routeProvider',
         redirectTo: '/phones'
       });
   }]);
-</pre>
+```
 
 In order to configure our application with routes, we need to create a module for our application.
 We call this module `phonecatApp`. Notice the second argument passed to `angular.module`:
@@ -133,17 +134,19 @@ the module name as the value of the {@link api/ng.directive:ngApp ngApp}
 directive:
 
 __`app/index.html`:__
-<pre>
+
+```html
 <!doctype html>
 <html lang="en" ng-app="phonecatApp">
 ...
-</pre>
+```
 
 
 ## Controllers
 
 __`app/js/controllers.js`:__
-<pre>
+
+```js
 var phonecatControllers = angular.module('phonecatControllers', []);
 
 phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
@@ -159,7 +162,7 @@ phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
   function($scope, $routeParams) {
     $scope.phoneId = $routeParams.phoneId;
   }]);
-</pre>
+```
 
 Again, note that we created a new module called `phonecatControllers`. For small AngularJS applications,
 it's common to create just one module for all of your controllers if there are just a few. For larger apps,
@@ -180,7 +183,8 @@ tag to your `index.html` file as shown below.
 </div>
 
 __`app/index.html`:__
-<pre>
+
+```html
 <!doctype html>
 <html lang="en" ng-app="phonecatApp">
 <head>
@@ -196,14 +200,15 @@ __`app/index.html`:__
 
 </body>
 </html>
-</pre>
+```
 
 Note that we removed most of the code in the `index.html` template and replaced it with a single
 line containing a div with the `ng-view` attribute. The code that we removed was placed into the
 `phone-list.html` template:
 
 __`app/partials/phone-list.html`:__
-<pre>
+
+```html
 <div class="container-fluid">
   <div class="row-fluid">
     <div class="span2">
@@ -231,7 +236,7 @@ __`app/partials/phone-list.html`:__
     </div>
   </div>
 </div>
-</pre>
+```
 
 <div style="display:none">
 TODO!
@@ -241,9 +246,10 @@ TODO!
 We also added a placeholder template for the phone details view:
 
 __`app/partials/phone-detail.html`:__
-<pre>
+
+```html
 TBD: detail view for {{phoneId}}
-</pre>
+```
 
 Note how we are using `phoneId` model defined in the `PhoneDetailCtrl` controller.
 
@@ -253,7 +259,7 @@ Note how we are using `phoneId` model defined in the `PhoneDetailCtrl` controlle
 To automatically verify that everything is wired properly, we wrote end-to-end tests that navigate
 to various URLs and verify that the correct view was rendered.
 
-<pre>
+```js
 ...
   it('should redirect index.html to index.html#/phones', function() {
     browser().navigateTo('app/index.html');
@@ -272,7 +278,7 @@ to various URLs and verify that the correct view was rendered.
       expect(binding('phoneId')).toBe('nexus-s');
     });
  });
-</pre>
+```
 
 
 You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test