docs(toh): update live example links (#1602)

Author: chalin

public/docs/dart/latest/tutorial/index.jade

@@ -2,8 +2,7 @@ include ../_util-fns
 
 +includeShared('{ts}', 'intro')
 
-:marked
-  [View the source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart)
+p Run the #[+liveExampleLink2('', 'toh-5')].
 
 +includeShared('{ts}', 'main')
 

public/docs/dart/latest/tutorial/toh-pt1.jade

@@ -34,15 +34,13 @@ include ../_util-fns
 
 .callout.is-helpful
   header Source code
-  :marked
-    The complete source code for the example app in this chapter is
-    [in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-1/dart).
+  p Run the #[+liveExampleLink2('', 'toh-1')] for this part.
 
 :marked
   ## Keep the app compiling and running
   We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing
 
-code-example(format="" language="bash").
+code-example(language="bash").
   pub serve
 
 :marked

public/docs/dart/latest/tutorial/toh-pt2.jade

@@ -12,9 +12,7 @@ include ../_util-fns
 
 .callout.is-helpful
   header Source code
-  :marked
-    The complete source code for the example app in this chapter is
-    [in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-2/dart).
+  p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
 
 .l-main-section
 :marked
@@ -38,7 +36,7 @@ include ../_util-fns
   ### Keep the app compiling and running
   We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing
 
-code-example(format="." language="bash").
+code-example(language="bash").
   pub serve
 
 :marked

public/docs/dart/latest/tutorial/toh-pt3.jade

@@ -4,8 +4,7 @@ include ../_util-fns
   Our app is growing.
   Use cases are flowing in for reusing components, passing data to components, and creating more reusable assets. Let's separate the heroes list from the hero details and make the details component reusable.
 
-  The complete source code for the example app in this chapter is
-  [in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-3/dart).
+p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
 
 .l-main-section
 :marked

public/docs/dart/latest/tutorial/toh-pt4.jade

@@ -15,8 +15,7 @@ include ../_util-fns
   Because data services are invariably asynchronous,
   we'll finish the chapter with a promise-based version of the data service.
 
-  The complete source code for the example app in this chapter is
-  [in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-4/dart).
+p Run the #[+liveExampleLink2('', 'toh-4')] for this part.
 
 .l-main-section
 :marked
@@ -42,7 +41,7 @@ include ../_util-fns
   Open a terminal/console window.
   Start the Dart compiler, watch for changes, and start our server by entering the command:
 
-code-example(format="." language="bash").
+code-example(language="bash").
   pub serve
 
 :marked

public/docs/dart/latest/tutorial/toh-pt5.jade

@@ -17,9 +17,8 @@ figure.image-display
     :marked
         The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
         than we will in this tour.
-:marked
-  The complete source code for the example app in this chapter is
-  [in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart).
+
+p Run the #[+liveExampleLink2('', 'toh-5')] for this part.
 
 .l-main-section
 :marked
@@ -48,7 +47,7 @@ figure.image-display
   Open a terminal/console window.
   Start the Dart compiler, watch for changes, and start our server by entering the command:
 
-code-example(format="." language="bash").
+code-example(language="bash").
     pub serve
 
 :marked

public/docs/ts/latest/tutorial/index.jade

@@ -26,8 +26,7 @@ include ../_util-fns
   to chapters with greater depth.
 // #enddocregion intro
 
-:marked
-  [Run the live example](/resources/live-examples/toh-6/ts/plnkr.html)
+p Run the #[+liveExampleLink2('', 'toh-6')].
 
 // #docregion main
 .l-main-section

public/docs/ts/latest/tutorial/toh-pt1.jade

@@ -5,8 +5,8 @@ include ../_util-fns
 
   Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
 
-  [Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html)
-
+p Run the #[+liveExampleLink2('', 'toh-1')] for this part.
+:marked
   Create a folder called `angular2-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps 
   which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes.
 
@@ -33,7 +33,7 @@ include ../_quickstart_repo
   ## Keep the app transpiling and running
   We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
 
-code-example(format="" language="bash").
+code-example(language="bash").
   npm start
 
 :marked
@@ -170,8 +170,8 @@ code-example(language="html").
   using the built-in `ngModel` directive.
   * The `ngModel` directive also propagates changes to every other binding of the `hero.name`.
 
-  [Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html)
-
+p Run the #[+liveExampleLink2('', 'toh-1')] for this part.
+:marked
   Here's the complete `app.component.ts` as it stands now:
 
 +makeExample('toh-1/ts/app/app.component.ts', 'pt1', 'app.component.ts')
@@ -183,4 +183,4 @@ code-example(language="html").
   We also want to allow the user to select a hero and display their details.
   We’ll learn more about how to retrieve lists, bind them to the
   template, and allow a user to select it in the
-  [next tutorial chapter](./toh-pt2.html).
+  [next tutorial chapter](./toh-pt2.html).

public/docs/ts/latest/tutorial/toh-pt2.jade

@@ -6,8 +6,8 @@ include ../_util-fns
   We’ll expand our Tour of Heroes app to display a list of heroes,
   allow the user to select a hero, and display the hero’s details.
 
-  [Run the live example for part 2](/resources/live-examples/toh-2/ts/plnkr.html)
-
+p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
+:marked
   Let’s take stock of what we’ll need to display a list of heroes.
   First, we need a list of heroes. We want to display those heroes in the view’s template,
   so we’ll need a way to do that.
@@ -38,7 +38,7 @@ include ../_util-fns
   ### Keep the app transpiling and running
   We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
 
-code-example(format="." language="bash").
+code-example(language="bash").
   npm start
 
 :marked
@@ -301,8 +301,8 @@ code-example(format="." language="bash").
   * We added the ability to select a hero and show the hero’s details
   * We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
 
-  [Run the live example for part 2](/resources/live-examples/toh-2/ts/plnkr.html)
-
+p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
+:marked
   ### The Road Ahead
   Our Tour of Heroes has grown, but it’s far from complete.
   We can't put the entire app into a single component.

public/docs/ts/latest/tutorial/toh-pt3.jade

@@ -4,7 +4,7 @@ include ../_util-fns
   Our app is growing.
   Use cases are flowing in for reusing components, passing data to components, and creating more reusable assets. Let's separate the heroes list from the hero details and make the details component reusable.
 
-  [Run the live example for part 3](/resources/live-examples/toh-3/ts/plnkr.html)
+p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
 
 .l-main-section
 :marked
@@ -242,7 +242,7 @@ code-example(format=".")
   * We learned to bind a parent component to a child component.
   * We learned to declare the application directives we need in a `directives` array.
 
-  [Run the live example for part 3](/resources/live-examples/toh-3/ts/plnkr.html).
+p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
 
 .l-main-section
 :marked

public/docs/ts/latest/tutorial/toh-pt4.jade

@@ -15,8 +15,7 @@ include ../_util-fns
   Because data services are invariably asynchronous, 
   we'll finish the chapter with a promise-based version of the data service.
 
-:marked
-  [Run the live example for part 4](/resources/live-examples/toh-4/ts/plnkr.html)
+p Run the #[+liveExampleLink2('', 'toh-4')] for this part.
 
 .l-main-section
 :marked
@@ -41,12 +40,13 @@ include ../_util-fns
     .file systemjs.config.js
     .file tsconfig.json
     .file typings.json
+
 :marked
   ### Keep the app transpiling and running
   Open a terminal/console window. 
   Start the TypeScript compiler, watch for changes, and start our server by entering the command:
 
-code-example(format="." language="bash").
+code-example(language="bash").
   npm start
 
 :marked
@@ -340,8 +340,8 @@ a#child-component
   * We created mock hero data and imported them into our service
   * We designed our service to return a promise and our component to get our data from the promise
 
-  [Run the live example for part 4](/resources/live-examples/toh-4/ts/plnkr.html)
-
+p Run the #[+liveExampleLink2('', 'toh-4')] for this part.
+:marked
   ### The Road Ahead
   Our Tour of Heroes has become more reusable using shared components and services.
   We want to create a dashboard, add menu links that route between the views, and format data in a template.

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -17,8 +17,9 @@ figure.image-display
   :marked
     The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail
     than we will in this tour.  
-:marked
-  [Run the live example](/resources/live-examples/toh-5/ts/plnkr.html). 
+
+p Run the #[+liveExampleLink2('', 'toh-5')] for this part.
+
 .l-sub-section
   img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
   :marked
@@ -55,7 +56,7 @@ figure.image-display
   Open a terminal/console window and enter the following command to
   start the TypeScript compiler, start the server, and watch for changes:
 
-code-example(format="." language="bash").
+code-example(language="bash").
   npm start
 
 :marked
@@ -646,10 +647,11 @@ figure.image-display
 .l-main-section
 :marked
   ## Application structure and code
-  
-  Review the sample source code [in the live example for this chapter](/resources/live-examples/toh-5/ts/plnkr.html).
+p.
+  Review the sample source code in the #[+liveExampleLink2('', 'toh-5')] for this part.
   Verify that we have the following structure:
 
+:marked
 .filetree
   .file angular2-tour-of-heroes
   .children

public/docs/ts/latest/tutorial/toh-pt6.jade

@@ -8,8 +8,8 @@ include ../_util-fns
   and save these changes back to the server.
 
   In this chapter we teach our application to make the corresponding http calls to a remote server's web api.
-:marked
-  [Run the live example](/resources/live-examples/toh-6/ts/plnkr.html).
+
+p Run the #[+liveExampleLink2('', 'toh-6')] for this part.
 
 .l-main-section
 :marked
@@ -21,7 +21,7 @@ include ../_util-fns
   Open a terminal/console window and enter the following command to
   start the TypeScript compiler, start the server, and watch for changes:
 
-code-example(format="." language="bash").
+code-example(language="bash").
   npm start
 
 :marked