1 files changed, 9 insertions, 6 deletions
diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc
index 09052e8f..3eabeadb 100644
--- a/docs/content/tutorial/step_06.ngdoc
+++ b/docs/content/tutorial/step_06.ngdoc
@@ -25,7 +25,8 @@ Note that the `phones.json` file contains unique ids and image urls for each of
 urls point to the `app/img/phones/` directory.
 
 __`app/phones/phones.json`__ (sample snippet):
-<pre>
+
+```js
 [
   {
     ...
@@ -36,13 +37,14 @@ __`app/phones/phones.json`__ (sample snippet):
   },
   ...
 ]
-</pre>
+```
 
 
 ## Template
 
 __`app/index.html`:__
-<pre>
+
+```html
 ...
         <ul class="phones">
           <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
@@ -52,7 +54,7 @@ __`app/index.html`:__
           </li>
         </ul>
 ...
-</pre>
+```
 
 To dynamically generate links that will in the future lead to phone detail pages, we used the
 now-familiar double-curly brace binding in the `href` attribute values. In step 2, we added the
@@ -70,7 +72,8 @@ Using the `ngSrc` directive prevents the browser from making an http request to
 ## Test
 
 __`test/e2e/scenarios.js`__:
-<pre>
+
+```js
 ...
     it('should render phone specific links', function() {
       input('query').enter('nexus');
@@ -78,7 +81,7 @@ __`test/e2e/scenarios.js`__:
       expect(browser().location().url()).toBe('/phones/nexus-s');
     });
 ...
-</pre>
+```
 
 We added a new end-to-end test to verify that the app is generating correct links to the phone
 views that we will implement in the upcoming steps.