1 files changed, 15 insertions, 10 deletions
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
index 7ba6d36a..02c03773 100644
--- a/docs/content/tutorial/step_08.ngdoc
+++ b/docs/content/tutorial/step_08.ngdoc
@@ -27,7 +27,8 @@ In addition to `phones.json`, the `app/phones/` directory also contains one json
 phone:
 
 __`app/phones/nexus-s.json`:__ (sample snippet)
-<pre>
+
+```js
 {
   "additionalFeatures": "Contour Display, Near Field Communications (NFC),...",
   "android": {
@@ -46,7 +47,7 @@ __`app/phones/nexus-s.json`:__ (sample snippet)
       "ram": "512MB"
   }
 }
-</pre>
+```
 
 
 Each of these files describes various properties of the phone using the same data structure. We'll
@@ -59,7 +60,8 @@ We'll expand the `PhoneDetailCtrl` by using the `$http` service to fetch the jso
 the same way as the phone list controller.
 
 __`app/js/controllers.js`:__
-<pre>
+
+```js
 var phonecatControllers = angular.module('phonecatControllers',[]);
 
 phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
@@ -68,7 +70,7 @@ phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$h
       $scope.phone = data;
     });
   }]);
-</pre>
+```
 
 To construct the URL for the HTTP request, we use `$routeParams.phoneId` extracted from the current
 route by the `$route` service.
@@ -82,7 +84,8 @@ our model into the view.
 
 
 __`app/partials/phone-detail.html`:__
-<pre>
+
+```html
 <img ng-src="{{phone.images[0]}}" class="phone">
 
 <h1>{{phone.name}}</h1>
@@ -109,7 +112,7 @@ __`app/partials/phone-detail.html`:__
     <dd>{{phone.additionalFeatures}}</dd>
   </li>
 </ul>
-</pre>
+```
 
 <div style="display: none">
 TODO!
@@ -122,7 +125,8 @@ We wrote a new unit test that is similar to the one we wrote for the `PhoneListC
 step 5.
 
 __`test/unit/controllersSpec.js`:__
-<pre>
+
+```js
 ...
   describe('PhoneDetailCtrl', function(){
     var scope, $httpBackend, ctrl;
@@ -145,7 +149,7 @@ __`test/unit/controllersSpec.js`:__
     });
   });
 ...
-</pre>
+```
 
 You should now see the following output in the Karma tab:
 
@@ -156,7 +160,8 @@ We also added a new end-to-end test that navigates to the Nexus S detail page an
 heading on the page is "Nexus S".
 
 __`test/e2e/scenarios.js`:__
-<pre>
+
+```js
 ...
   describe('Phone detail view', function() {
 
@@ -170,7 +175,7 @@ __`test/e2e/scenarios.js`:__
     });
   });
 ...
-</pre>
+```
 
 
 You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test