docs(toh): fix code-example format and Dart code excerpt (#2907)

* ensure HeroesComponent renaming doesn't show router

* use code-example format consistent with the rest of the docs

Author: chalin

public/docs/_examples/toh-5/dart/lib/heroes_component.dart

@@ -26,7 +26,11 @@ class HeroesComponent implements OnInit {
   Hero selectedHero;
 
   // #docregion renaming
-  HeroesComponent(this._heroService, this._router);
+  HeroesComponent(this._heroService,
+  // #enddocregion renaming
+                  this._router
+  // #docregion renaming
+                  );
   // #enddocregion renaming
 
   Future<Null> getHeroes() async {

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

@@ -38,7 +38,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(language="bash").
+code-example(language="sh" class="code-shell").
   pub serve
 
 :marked

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

@@ -34,7 +34,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(language="bash").
+code-example(language="sh" class="code-shell").
   pub serve
 
 :marked
@@ -157,7 +157,7 @@ code-example(language="bash").
 
   :marked
     Focus on the event binding
-  code-example(format="." language="bash").
+  code-example.
     (click)="onSelect(hero)"
   :marked
     The parentheses identify the `<li>` element’s  `click` event as the target.
@@ -204,7 +204,7 @@ code-example(language="bash").
     The `selectedHero` is `undefined`.
     That’s why we'll see the following error in the browser’s console:
 
-  code-example(language="html").
+  code-example(format="nocode").
     EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
 
   :marked

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

@@ -27,7 +27,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(language="bash").
+code-example(language="sh" class="code-shell").
   pub serve
 
 :marked
@@ -122,7 +122,7 @@ code-example(language="bash").
 
   We will soon update the `AppComponent` template so that it binds its `selectedHero` property
   to the `hero` property of our `HeroDetailComponent`. The binding *might* look like this:
-code-example(format=".").
+code-example(language="html").
   <my-hero-detail [hero]="selectedHero"></my-hero-detail>
 :marked
   Notice that the `hero` property is the ***target*** of a property binding — it's in square brackets to the left of the (=).
@@ -156,15 +156,15 @@ code-example(format=".").
 :marked
   Find the location in the template where we removed the *Hero Detail* content
   and add an element tag that represents the `HeroDetailComponent`.
-code-example(format=".").
+code-example(language="html").
   <my-hero-detail></my-hero-detail>
 .l-sub-section
   :marked
     *my-hero-detail* is the name we set as the  `selector` in the `HeroDetailComponent` metadata.
 :marked
  The two components won't coordinate until we bind the `selectedHero` property of the `AppComponent`
  to the `HeroDetailComponent` element's `hero` property  like this:
-code-example(format=".").
+code-example(language="html").
   <my-hero-detail [hero]="selectedHero"></my-hero-detail>
 :marked
   The `AppComponent`’s template should now look like this

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

@@ -41,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(language="bash").
+code-example(language="sh" class="code-shell").
   pub serve
 
 :marked

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

@@ -32,7 +32,7 @@ block keep-app-running
     Open a terminal/console window.
     Start the Dart compiler, watch for changes, and start our server by entering the command:
 
-  code-example(language="bash").
+  code-example(language="sh" class="code-shell").
     pub serve
 
 block app-comp-v1

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

@@ -16,7 +16,7 @@ block start-server-and-watch
     Open a terminal/console window.
     Start the Dart compiler, watch for changes, and start our server by entering the command:
 
-  code-example(language="bash").
+  code-example(language="sh" class="code-shell").
       pub serve
 
 block http-library

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

@@ -69,7 +69,7 @@ block keep-app-running
     Open a terminal/console window and enter the following command to
     start the TypeScript compiler, start the server, and watch for changes:
 
-  code-example(language="bash").
+  code-example(language="sh" class="code-shell").
     npm start
 
 :marked
@@ -438,7 +438,7 @@ code-example(language="html").
   We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11,
   we could expect to see an URL such as this:
 
-code-example(format='').
+code-example(format="nocode").
   /detail/11
 
 :marked

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

@@ -34,7 +34,7 @@ block start-server-and-watch
     Open a terminal/console window and enter the following command to
     start the TypeScript compiler, start the server, and watch for changes:
 
-  code-example(language="bash").
+  code-example(language="sh" class="code-shell").
     npm start
 
 :marked

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

@@ -36,7 +36,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(language="bash").
+code-example(language="sh" class="code-shell").
   npm start
 
 :marked
@@ -161,7 +161,7 @@ code-example(language="bash").
 
   :marked
     Focus on the event binding
-  code-example(format="." language="bash").
+  code-example.
     (click)="onSelect(hero)"
   :marked
     The parenthesis identify the `<li>` element’s  `click` event as the target.
@@ -209,7 +209,7 @@ code-example(language="bash").
     The `selectedHero` is `undefined`.
     That’s why we'll see the following error in the browser’s console:
 
-  code-example(language="html").
+  code-example(format="nocode").
     EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
 
   :marked

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

@@ -29,7 +29,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(language="bash").
+code-example(language="sh" class="code-shell").
   npm start
 
 :marked
@@ -124,7 +124,7 @@ code-example(language="bash").
 
   We will soon update the `AppComponent` template so that it binds its `selectedHero` property
   to the `hero` property of our `HeroDetailComponent`. The binding *might* look like this:
-code-example(format=".").
+code-example(language="html").
   <my-hero-detail [hero]="selectedHero"></my-hero-detail>
 :marked
   Notice that the `hero` property is the ***target*** of a property binding — it's in square brackets to the left of the (=).
@@ -169,15 +169,15 @@ code-example(format=".").
   Now that the application knows about our `HeroDetailComponent`, 
   find the location in the `AppComponent` template where we removed the *Hero Detail* content
   and add an element tag that represents the `HeroDetailComponent`.
-code-example(format=".").
+code-example(language="html").
   <my-hero-detail></my-hero-detail>
 .l-sub-section
   :marked
     *my-hero-detail* is the name we set as the  `selector` in the `HeroDetailComponent` metadata.
 :marked
  The two components won't coordinate until we bind the `selectedHero` property of the `AppComponent` 
  to the `HeroDetailComponent` element's `hero` property  like this:
-code-example(format=".")
+code-example(language="html").
   <my-hero-detail [hero]="selectedHero"></my-hero-detail>
 :marked
   The `AppComponent`’s template should now look like this

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

@@ -44,7 +44,7 @@ include ../_util-fns
   Open a terminal/console window. 
   Start the TypeScript compiler, watch for changes, and start our server by entering the command:
 
-code-example(language="bash").
+code-example(language="sh" class="code-shell").
   npm start
 
 :marked

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

@@ -69,7 +69,7 @@ block keep-app-running
     Open a terminal/console window and enter the following command to
     start the TypeScript compiler, start the server, and watch for changes:
 
-  code-example(language="bash").
+  code-example(language="sh" class="code-shell").
     npm start
 
 :marked
@@ -438,7 +438,7 @@ code-example(language="html").
   We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11,
   we could expect to see an URL such as this:
 
-code-example(format='').
+code-example(format="nocode").
   /detail/11
 
 :marked

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

@@ -34,7 +34,7 @@ block start-server-and-watch
     Open a terminal/console window and enter the following command to
     start the TypeScript compiler, start the server, and watch for changes:
 
-  code-example(language="bash").
+  code-example(language="sh" class="code-shell").
     npm start
 
 :marked