update dart guide

public/docs/dart/latest/guide/displaying-data.jade

@@ -16,9 +16,8 @@
     a <code>web/index.html</code> file, and
     a <code>pubspec.yaml</code> file:
 
-  .code-box
+  code-tabs
-    pre.prettyprint.lang-dart(data-name="dart")
+    code-pane(language="dart" name="main.dart" format="linenums").
-      code.
       // web/main.dart
       library displaying_data;
 
@@ -32,8 +31,7 @@
         reflector.reflectionCapabilities = new ReflectionCapabilities();
         bootstrap(DisplayComponent);
       }
-    pre.prettyprint.lang-html(data-name="html")
+    code-pane(language="html" name="index.html" format="linenums").
-      code.
       &lt;!-- web/index.html --&gt;
       &lt;!DOCTYPE html&gt;
       &lt;html&gt;
@@ -48,8 +46,7 @@
           &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
         &lt;/body&gt;
       &lt;/html&gt;
-    pre.prettyprint.lang-yaml(data-name="yaml")
+    code-pane(language="yaml" name="pubspec.yaml" format="linenums").
-      code.
       # pubspec.yaml
       name: displaying_data
       description: Dart version of Angular 2 example, Displaying Data
@@ -57,7 +54,6 @@
       dependencies:
         angular2: 2.0.0-alpha.22
         browser: any
-
   p.
    All of this code should look familiar from the previous page,
    except for the <code>library</code> and <code>part</code> statements
@@ -78,8 +74,7 @@
     named <code>show_properties.dart</code>,
     and add the following:
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
     // web/show_properties.dart
     part of displaying_data;
 
@@ -99,8 +94,7 @@
     You've just defined a component that encompasses a view and controller for the app. The view
     defines a template:
 
-  pre.prettyprint.lang-html
+  code-example(language="html").
-    code.
     &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
 
   p.
@@ -134,8 +128,7 @@
     Add a second line to the template,
     so you can see Angular dynamically update content:
 
-  pre.prettyprint.lang-html
+  code-example(language="html").
-    code.
     &lt;p&gt;Current time: {{ time }}&lt;/p&gt;
 
   p.
@@ -143,8 +136,7 @@
     a call to update time
     via <code>setInterval</code>:
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
       class DisplayComponent {
         String myName = 'Alice';
         String time;
@@ -166,8 +158,7 @@
   h2#Create-an-array Display an iterable using *for
   p Moving up from a single value, create a property that's a list of values.
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
     class DisplayComponent {
       String myName = 'Alice';
       List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
@@ -177,8 +168,7 @@
     You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements
     with one for each item in the list.
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
     @View(
       template: '''
     &lt;p>My name: {{ myName }}&lt;/p>
@@ -196,8 +186,7 @@
     Add <code>For</code> using the optional <code>directives</code> parameter,
     which contains a list of directives:
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
     @View(
       template: '''
     // ...HTML...
@@ -213,8 +202,7 @@
 
   p Let's look at the few lines that do the work again:
 
-  pre.prettyprint.lang-html
+  code-example(language="html" format="linenums").
-    code.
     &lt;li *for=&quot;#name of friendNames&quot;&gt;
        {{ name }}
     &lt;/li&gt;
@@ -241,8 +229,7 @@
     Make a <code>FriendsService</code> class to implement a model containing a list of friends. We'll put this in a new
     <code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like:
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
     // web/friends_service.dart
     part of displaying_data;
 
@@ -260,8 +247,7 @@
     First add a FriendsService parameter to the constructor.
     Then set <code>friendNames</code> to the names provided by the service.
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
     // In web/show_properties.dart
     class DisplayComponent {
       String myName = 'Alice';
@@ -277,8 +263,7 @@
     by adding an <code>injectables</code> parameter to DisplayComponent's
     <code>@Component</code> annotation:
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart" format="linenums").
-      code.
     @Component(
       selector: 'display',
       injectables: const[FriendsService]
@@ -292,16 +277,14 @@
 
   p See it in action by adding a paragraph at the end of your template:
 
-  pre.prettyprint.lang-html
+  code-example(language="html").
-    code.
     &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
 
   p.
     Also add <code>If</code> to the list of directives,
     so Angular knows to include it:
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart").
-    code.
     directives: const[For, If]
   p.
     The list current has 5 items, so if you run the app you'll see the message
@@ -313,9 +296,8 @@
 
   p Here's the final code.
 
-  .code-box
+  code-tabs
-    pre.prettyprint.lang-dart(data-name="show_properties.dart")
+    code-pane(language="dart" name="show_properties.dart" format="linenums").
-      code.
       // web/show_properties.dart
       part of displaying_data;
 
@@ -343,16 +325,14 @@
           friendNames = friendsService.names;
         }
       }
-    pre.prettyprint.lang-dart(data-name="friends_service.dart")
+    code-pane(language="dart" name="friends_service.dart" format="linenums").
-      code.
       // web/friends_service.dart
       part of displaying_data;
 
       class FriendsService {
         List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
       }
-    pre.prettyprint.lang-dart(data-name="main.dart")
+    code-pane(language="dart" name="main.dart" format="linenums").
-      code.
       // web/main.dart
       library displaying_data;
 
@@ -369,8 +349,7 @@
         reflector.reflectionCapabilities = new ReflectionCapabilities();
         bootstrap(DisplayComponent);
       }
-    pre.prettyprint.lang-html(data-name="html")
+    code-pane(language="html" name="index.html" format="linenums").
-      code.
       &lt;!-- web/index.html --&gt;
       &lt;!DOCTYPE html&gt;
       &lt;html&gt;
@@ -385,8 +364,7 @@
           &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
         &lt;/body&gt;
       &lt;/html&gt;
-    pre.prettyprint.lang-yaml(data-name="yaml")
+    code-pane(language="yaml" name="pubspec.yaml" format="linenums").
-      code.
       # pubspec.yaml
       name: displaying_data
       description: Dart version of Angular 2 example, Displaying Data
@@ -411,16 +389,14 @@
       declare a library in <code>main.dart</code>.
       Then make <code>show_properties.dart</code> part of that library.
 
-      .code-box
+    code-tabs
-        pre.prettyprint.lang-dart(data-name="main library file")
+      code-pane(language="dart" name="main.dart" format="linenums").
-          code.
         // web/main.dart
         library displaying_data;
         // imports...
         part 'show_properties.dart';
         // Code goes here...
-        pre.prettyprint.lang-dart(data-name="additional library file")
+      code-pane(language="dart" name="show_properties.dar" format="linenums").
-          code.
         // web/show_properties.dart
         part of displaying_data;
         // Code goes here...

public/docs/dart/latest/guide/making-components.jade

@@ -10,8 +10,7 @@
     you can create a parent
     component that uses a <code>&lt;child&gt;</code> component like so:
 
-  pre.prettyprint.linenums.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
     part of making_components;
 
     @Component(
@@ -30,8 +29,7 @@
 
   p You then just need to write the <code>ChildComponent</code> class to make it work:
 
-  pre.prettyprint.linenums.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
     part of making_components;
 
     @Component(

public/docs/dart/latest/guide/setup.jade

@@ -24,8 +24,7 @@
     To use Angular2 in your app, include angular2 as a dependency in
     your app's <b>pubspec.yaml</b> file. For example:
 
-  pre.prettyprint.lang-yaml
+  code-example(language="yaml").
-    code.
     # pubspec.yaml
     name: getting_started
     description: Dart version of Angular 2 example, Getting Started
@@ -51,8 +50,7 @@
     and creating a top-level <code>main()</code> function that calls
     Angular's <code>bootstrap()</code> function.
 
-  pre.prettyprint.lang-dart
+  code-example(language="javascript").
-    code.
     // web/main.dart
     import 'package:angular2/angular2.dart';
     import 'package:angular2/src/reflection/reflection.dart' show reflector;
@@ -79,8 +77,7 @@
     Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element
     and call <code>main.dart</code>.
 
-  pre.prettyprint.lang-html
+  code-example(language="html").
-    code.
     &lt;!-- web/index.html -->
     &lt;!DOCTYPE html&gt;
     &lt;html&gt;

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

@@ -5,8 +5,7 @@
   p.
     You can specify the event handler—a method in the component controller—like this:
 
-  pre.prettyprint.lang-html
+  code-example(language="html").
-    code.
     <input (keyup)="myControllerMethod()">
   p.
     As in previous examples, you can make element references available to
@@ -17,8 +16,7 @@
     <!-- PENDING: make sure we use recommended word separation scheme.
     my-name doesn't work, but my_name does. Would myName work? -->
 
-  pre.prettyprint.lang-html
+  code-example(language="html").
-    code.
     &lt;input #myname (keyup)&gt;
     &lt;p&gt;{{myname.value}}&lt;/p&gt;
 
@@ -46,8 +44,7 @@
     Then add a method that adds new items
     to the list.
 
-  pre.prettyprint.lang-dart
+  code-example(language="dart" format="linenums").
-    code.
     class TodoList {
       List&lt;String&gt; todos =
         ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
@@ -73,8 +70,7 @@
     Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set
     its text to the value.
 
-  pre.prettyprint.lang-html
+  code-example(language="html" format="linenums").
-    code.
     &lt;ul&gt;
        &lt;li *for=&quot;#todo of todos&quot;&gt;
          {{ todo }}
@@ -87,8 +83,7 @@
     Now, add a text input and a button for users to add items to the list.  As you saw above, you can create a local
     variable reference in your template with <code>#varname</code>.  Call it <code>#todotext</code> here.
 
-  pre.prettyprint.lang-html
+  code-example(language="html").
-    code.
     &lt;input #todotext&gt;
   p.
     Specify the target of the click event binding as your controller's
@@ -96,8 +91,7 @@
     it the value. Since you created a reference called <code>todotext</code>,
     you can get the value with <code>todotext.value.</code>
 
-  pre.prettyprint.lang-html
+  code-example(language="html").
-    code.
     &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
 
   p.
@@ -107,9 +101,8 @@
     <a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>,
     so be sure to import that library.
 
-  .code-box
+  code-tabs
-    pre.prettyprint.lang-dart(data-name="todo_list.dart")
+    code-pane(language="dart" name="todo_list.dart" format="linenums").
-      code.
       // In the template:
       &lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
 
@@ -121,20 +114,17 @@
           e.value = null;
         }
       }
-    pre.prettyprint.lang-dart(data-name="main.dart")
+    code-pane(language="dart" name="main.dart" format="linenums").
-      code.
       library user_input;
 
       import 'dart:html';
       ...
 
-
 .l-main-section
   h2#section-final-code Final code
 
-  .code-box
+  code-tabs
-    pre.prettyprint.lang-dart(data-name="todo_list.dart")
+    code-pane(language="dart" name="todo_list.dart" format="linenums").
-      code.
       // web/todo_list.dart
       part of user_input;
 
@@ -172,8 +162,7 @@
           }
         }
       }
-    pre.prettyprint.lang-dart(data-name="main.dart")
+    code-pane(language="dart" name="main.dart" format="linenums").
-      code.
       // web/main.dart
       library user_input;
 
@@ -189,8 +178,7 @@
         reflector.reflectionCapabilities = new ReflectionCapabilities();
         bootstrap(TodoList);
       }
-    pre.prettyprint.lang-html(data-name="html")
+    code-pane(language="html" name="index.html" format="linenums").
-      code.
       &lt;!-- web/index.html --&gt;
       &lt;!DOCTYPE html&gt;
       &lt;html&gt;
@@ -205,8 +193,7 @@
           &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
         &lt;/body&gt;
       &lt;/html&gt;
-    pre.prettyprint.lang-yaml(data-name="yaml")
+    code-pane(language="yaml" name="pubspec.yaml" format="linenums").
-      code.
       # pubspec.yaml
       name: user_input
       description: Dart version of Angular 2 example, Responding to User Input