From 69b6bf969b9746dc692a5ea64f300a227fe1c656 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Wed, 22 Apr 2015 07:22:30 -0700
Subject: [PATCH] making components update

---
 .../js/latest/guide/making-components.jade    | 134 +++++++++---------
 1 file changed, 68 insertions(+), 66 deletions(-)

diff --git a/public/docs/js/latest/guide/making-components.jade b/public/docs/js/latest/guide/making-components.jade
index a4e3e29bf8..5efbce9296 100644
--- a/public/docs/js/latest/guide/making-components.jade
+++ b/public/docs/js/latest/guide/making-components.jade
@@ -4,7 +4,7 @@
     If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/lt7vPiJYwkHDKaTHGCUC?p=preview')>TypeScript Example</a> or <a href='http://plnkr.co/edit/CqquuEyUw2LgwY0IrXUZ?p=preview'> ES5 Example</a>.
 
 .l-main-section
-  
+
   h2#section-its-all-a-tree It's all a tree
 
   p.
@@ -15,78 +15,80 @@
       Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body, you can create a parent
       component that uses a <code>&lt;child&gt;</code> component like so:
 
-  pre.prettyprint.linenums.lang-javascript
-    code.
-      //ES5
-      function ParentComponent() {
-        this.message = "I'm the parent";
-      }
-      ParentComponent.annotations = [
-        new angular.Component({
-          selector: "parent"
-        }),
-        new angular.View({
-          template:
-            '&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
-            '&lt;child&gt;&lt;/child&gt;',
-          directives: [ChildComponent]
-        })
-      ];
-
-  pre.prettyprint.linenums.lang-typescript
-    code.
-      //TypeScript
-      @Component({
-        selector: 'parent'
-      })
-      @View({
-        template: `
-          &lt;h1&gt;{{ message }}&lt;/h1&gt;
-          &lt;child&gt;&lt;/child&gt;
-        `,
-        directives: [ChildComponent]
-      })
-      class ParentComponent {
-        message: string;
-
-        constructor() {
+  .code-box
+    pre.prettyprint.linenums.lang-javascript(data-name="es5")
+      code.
+        //ES5
+        function ParentComponent() {
           this.message = "I'm the parent";
         }
-      }
+        ParentComponent.annotations = [
+          new angular.Component({
+            selector: "parent"
+          }),
+          new angular.View({
+            template:
+              '&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
+              '&lt;child&gt;&lt;/child&gt;',
+            directives: [ChildComponent]
+          })
+        ];
+
+    pre.prettyprint.linenums.lang-typescript(data-name="typescript")
+      code.
+        //TypeScript
+        @Component({
+          selector: 'parent'
+        })
+        @View({
+          template: `
+            &lt;h1&gt;{{ message }}&lt;/h1&gt;
+            &lt;child&gt;&lt;/child&gt;
+          `,
+          directives: [ChildComponent]
+        })
+        class ParentComponent {
+          message: string;
+
+          constructor() {
+            this.message = "I'm the parent";
+          }
+        }
 
   p You then just need to write the <code>ChildComponent</code> class to make it work:
 
-  pre.prettyprint.linenums.lang-javascript
-    code.
-      //ES5
-      function ChildComponent() {
-        this.message = "I'm the child";
-      }
-      ChildComponent.annotations = [
-        new angular.Component({
-          selector: "child"
-        }),
-        new angular.View({
-          template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
-        })
-      ];
-
-  pre.prettyprint.linenums.lang-typescript
-    code.
-      //TypeScript
-      @Component({
-        selector: 'child'
-      })
-      @View({
-        template: `
-          &lt;p&gt; {{ message }} &lt;/p&gt;
-        `
-      })
-      class ChildComponent {
-        constructor() {
+  .code-box
+    pre.prettyprint.linenums.lang-javascript(data-name="es5")
+      code.
+        //ES5
+        function ChildComponent() {
           this.message = "I'm the child";
         }
-      }
+        ChildComponent.annotations = [
+          new angular.Component({
+            selector: "child"
+          }),
+          new angular.View({
+            template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
+          })
+        ];
+
+    pre.prettyprint.linenums.lang-typescript(data-name="typescript")
+      code.
+        //TypeScript
+        @Component({
+          selector: 'child'
+        })
+        @View({
+          template: `
+            &lt;p&gt; {{ message }} &lt;/p&gt;
+          `
+        })
+        class ChildComponent {
+          constructor() {
+            this.message = "I'm the child";
+          }
+        }
 
   p.
       Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to