quick start updated

public/docs/js/latest/quickstart.jade

@@ -25,14 +25,14 @@
     TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>.
     To fetch one of the type definitions to the local directory, we use the <a href="https://www.npmjs.com/package/tsd">tsd package manager</a>.
 
-  pre.prettyprint
+  code-example.
     $ npm install -g tsd
     $ tsd query angular2 --action install
 
   p.
     Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project:
 
-  pre.prettyprint
+  code-example.
     $ touch app.ts index.html
 
 // STEP 2 - Start the TypeScript compiler ##########################
@@ -45,7 +45,7 @@
     compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files
     are loaded, or configure your editor or IDE to do it.
 
-  pre.prettyprint
+  code-example.
     $ npm install -g typescript@^1.5.0-beta
     $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
 
@@ -54,12 +54,12 @@
   h2#section-transpile 3. Import Angular
 
   p Inside of <code>app.ts</code>, import the type definitions from Angular:
-  pre.prettyprint
-    code /&#47;/ &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
+  code-example.
+    &lt;reference path="typings/angular2/angular2.d.ts" &gt;
 
   p Now your editor should be able to complete the available imports:
-  pre.prettyprint
-    code import {Component, View, bootstrap} from 'angular2/angular2';
+  code-example.
+    import {Component, View, bootstrap} from 'angular2/angular2';
 
   p.
     The above import statement uses ES6 module syntax to import three symbols from the Angular module.
@@ -80,8 +80,7 @@
     which is an ES6 class, and the <strong>decorators</strong> which tell Angular
     how to place the component into the page.
 
-  pre.prettyprint.linenums
-    code.
+  code-example(language="javascript" format="linenums").
     // Annotation section
     @Component({
       selector: 'my-app'
@@ -108,8 +107,7 @@
     p.
       The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
 
-    pre.prettyprint.linenums
-      code.
+    code-example(language="javascript" format="linenums").
       @Component({
         selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
       })
@@ -128,8 +126,7 @@
       The component controller is the backing of the component's template. This component
       controller uses TypeScript <code>class</code> syntax.
 
-    pre.prettyprint.linenums
-      code.
+    code-example(language="javascript" format="linenums").
       class MyAppComponent {
         name: string;
         constructor() {
@@ -158,8 +155,8 @@
     At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> function
     to load your new component into its page:
 
-  pre.prettyprint.linenums
-    code bootstrap(MyAppComponent);
+  code-example(language="javaScript").
+    bootstrap(MyAppComponent);
 
 
   p.
@@ -178,8 +175,7 @@
     include the traceur-runtime and the Angular bundle.
     Instantiate the <code>my-app</code> component in the <code>body</code>.
 
-  pre.prettyprint.linenums
-    code.
+  code-example(language="html" format="linenums").
     &lt;!-- index.html --&gt;
     &lt;html&gt;
       &lt;head&gt;
@@ -215,8 +211,7 @@
     Add the System.js dependency in the <code>&lt;head&gt;</code> tag, so that
     it looks like:
 
-  pre.prettyprint.linenums
-    code.
+  code-example(language="html" format="linenums").
     &lt;head&gt;
       &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
       &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
@@ -227,8 +222,7 @@
   p.
     Add the following module-loading code:
 
-  pre.prettyprint.linenums
-    code.
+  code-example(language="html" format="linenums").
     &lt;my-app&gt;&lt;/my-app&gt;
     &lt;script&gt;System.import('app');&lt;/script&gt;
 
@@ -247,7 +241,7 @@
     <code><b>sudo</b> npm ...</code>)
     For example:
 
-  pre.prettyprint.code.
+  code-example.
     # From the directory that contains index.html:
     npm install -g http-server  # Or sudo npm install -g http-server
     http-server                 # Creates a server at localhost:8080

public/resources/css/module/_code.scss

@@ -50,6 +50,7 @@
   code {
     background: none;
     font-size: 15px;
+    padding: 0px;
   }
 
   ol {