user input formatting

public/docs/js/latest/guide/user-input.jade

@@ -1,11 +1,11 @@
 .statement
   h4 Live Examples
   p.
-    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview> ES5 Example</a>.
+    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview'> ES5 Example</a>.
 
 .l-main-section
   h2#section-responding-to-user-input Responding to user input with event syntax
-    
+
   p.
     You can make your application respond to user input by using the event syntax. The event syntax starts with an event name surrounded by parenthesis: <code>(event)</code>. A controller function is then assigned to the event name: <code>(event)="controllerFn()"</code>.
   p.
@@ -14,7 +14,7 @@
   pre.prettyprint.lang-html
     code.
       &lt;input (keyup)="myControllerMethod()"&gt;
-      
+
   h3#local-variables Local variables
   p.
     As in previous examples, you can make element references available to other parts of the template as a local
@@ -31,7 +31,7 @@
     event.  And the <code>{{myname.value}}</code> binds the text node of the  <code>&lt;p&gt;</code> element to the
     input's value property.
   p Let's do something a little more complex where users enter items and add them to a list like this:
-  div(align='center')
+  figure.image-display
       img(src='user-input-example1.png')
 
 
@@ -42,28 +42,29 @@
     list. Inside the controller, add an array with an initial list of items.  Then add a method that pushes new items
     on the array when called.
 
-  pre.prettyprint.linenums.lang-javascript
+  .code-box
-    code.
+    pre.prettyprint.linenums.lang-javascript(data-name="es5")
-      //ES5
+      code.
-      function TodoList() {
+        //ES5
-        this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+        function TodoList() {
-        this.addTodo = function(todo) {
-          this.todos.push(todo);
-        };
-      }
-
-  pre.prettyprint.linenums.lang-typescript
-    code.
-      //TypeScript
-      class TodoList {
-        todos: Array&lt;string&gt;
-        constructor() {
           this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+          this.addTodo = function(todo) {
+            this.todos.push(todo);
+          };
         }
-        addTodo(todo: string) {
+
-          this.todos.push(todo);
+    pre.prettyprint.linenums.lang-typescript(data-name="typescript")
+      code.
+        //TypeScript
+        class TodoList {
+          todos: Array&lt;string&gt;
+          constructor() {
+            this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+          }
+          addTodo(todo: string) {
+            this.todos.push(todo);
+          }
         }
-      }
 
 .callout.is-helpful
   header Production Best Practice
@@ -116,83 +117,84 @@
 .l-main-section
   h2#section-final-code Final Code
 
-  pre.prettyprint.lang-javascript
+  .code-box
-    code.
+    pre.prettyprint.lang-javascript(data-name="es5")
-      //ES5
+      code.
-      function TodoList() {
+        //ES5
-        this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+        function TodoList() {
-
-        this.addTodo = function(todo) {
-          this.todos.push(todo);
-        };
-
-        this.doneTyping = function($event) {
-          if($event.which === 13) {
-            this.addTodo($event.target.value);
-            $event.target.value = null;
-          }
-        }
-      }
-
-      TodoList.annotations = [
-        new angular.Component({
-          selector: "todo-list"
-        }),
-        new angular.View({
-          template:
-            '&lt;ul&gt;' +
-            '&lt;li *for="#todo of todos">' +
-            '{{ todo }}' +
-            '&lt;/li&gt;' +
-            '&lt;/ul&gt;' +
-            '&lt;input #textbox (keyup)="doneTyping($event)">' +
-            '&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
-          directives: [angular.For, angular.If]
-        })
-      ];
-
-      document.addEventListener("DOMContentLoaded", function() {
-        angular.bootstrap(TodoList);
-      });
-
-  pre.prettyprint.lang-typescript
-    code.
-      //TypeScript
-      import {Component, View, bootstrap, For, If} from 'angular2/angular2';
-
-      @Component({
-        selector: 'todo-list'
-      })
-      @View({
-        template: `
-          &lt;ul&gt;
-            &lt;li *for="#todo of todos"&gt;
-              {{ todo }}
-            &lt;/li&gt;
-          &lt;/ul&gt;
-
-          &lt;input #todotext (keyup)="doneTyping($event)"&gt;
-          &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
-                `,
-        directives: [For, If]
-      })
-      class TodoList {
-        todos: Array<string>;
-
-        constructor() {
           this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
-        }
 
-        addTodo(todo: string) {
+          this.addTodo = function(todo) {
-          this.todos.push(todo);
+            this.todos.push(todo);
-        }
+          };
 
-        doneTyping($event) {
+          this.doneTyping = function($event) {
-          if($event.which === 13) {
+            if($event.which === 13) {
-            this.addTodo($event.target.value);
+              this.addTodo($event.target.value);
-            $event.target.value = null;
+              $event.target.value = null;
+            }
           }
         }
-      }
 
-      bootstrap(TodoList);
+        TodoList.annotations = [
+          new angular.Component({
+            selector: "todo-list"
+          }),
+          new angular.View({
+            template:
+              '&lt;ul&gt;' +
+              '&lt;li *for="#todo of todos">' +
+              '{{ todo }}' +
+              '&lt;/li&gt;' +
+              '&lt;/ul&gt;' +
+              '&lt;input #textbox (keyup)="doneTyping($event)">' +
+              '&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
+            directives: [angular.For, angular.If]
+          })
+        ];
+
+        document.addEventListener("DOMContentLoaded", function() {
+          angular.bootstrap(TodoList);
+        });
+
+    pre.prettyprint.lang-typescript(data-name="typescript")
+      code.
+        //TypeScript
+        import {Component, View, bootstrap, For, If} from 'angular2/angular2';
+
+        @Component({
+          selector: 'todo-list'
+        })
+        @View({
+          template: `
+            &lt;ul&gt;
+              &lt;li *for="#todo of todos"&gt;
+                {{ todo }}
+              &lt;/li&gt;
+            &lt;/ul&gt;
+
+            &lt;input #todotext (keyup)="doneTyping($event)"&gt;
+            &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
+                  `,
+          directives: [For, If]
+        })
+        class TodoList {
+          todos: Array<string>;
+
+          constructor() {
+            this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+          }
+
+          addTodo(todo: string) {
+            this.todos.push(todo);
+          }
+
+          doneTyping($event) {
+            if($event.which === 13) {
+              this.addTodo($event.target.value);
+              $event.target.value = null;
+            }
+          }
+        }
+
+        bootstrap(TodoList);