fixed a few code samples

Author: johnpapa

public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.avoid.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { Directive, HostBinding, HostListener } from 'angular2/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohValidator]'
+})
+export class ValidatorDirective {
+  @HostBinding('attr.role') role = 'button';
+  @HostListener('mouseenter') onMouseEnter() {
+    // do work
+  }
+}
+export class ValidateDirective { }
+// #enddocregion example
+

public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.ts

@@ -0,0 +1,21 @@
+// #docregion
+import { Directive, HostBinding, HostListener } from 'angular2/core';
+
+// #docregion example
+/* avoid */
+
+@Directive({
+  selector: '[tohValidator]',
+  host: {
+    '(mouseenter)': 'onMouseEnter()',
+    'attr.role': 'button'
+  }
+})
+export class ValidatorDirective {
+  role = 'button';
+  onMouseEnter() {
+    // do work
+  }
+}
+export class ValidateDirective { }
+// #enddocregion example

public/docs/ts/latest/guide/style-guide.jade

@@ -243,16 +243,17 @@ a(href="#toc") Back to top
   :marked
     **Why?** The `Component` suffix is more commonly used and is more explicitly descriptive.
 
-    ```
-    /* recommended */
-    AppComponent         // app.component.ts
-    HeroesComponent      // heroes.component.ts
-    HeroListComponent    // hero-list.component.ts
-    HeroDetailComponent  // hero-detail.component.ts
+:marked
+  ```
+  /* recommended */
+  AppComponent         // app.component.ts
+  HeroesComponent      // heroes.component.ts
+  HeroListComponent    // hero-list.component.ts
+  HeroDetailComponent  // hero-detail.component.ts
 
-    /* recommended */
-    ValidationDirective  // validation.directive.ts
-    ```
+  /* recommended */
+  ValidationDirective  // validation.directive.ts
+  ```
 
 a(href="#toc") Back to top
 
@@ -286,6 +287,7 @@ a(href="#toc") Back to top
   :marked
     **Why?** Service names such as `Credit` are nouns and require a suffix and should be named with a suffix when it is not obvious if it is a service or something else.
 
+:marked
   ```
   HeroDataService    // hero-data.service.ts
   CreditService      // credit.service.ts
@@ -415,6 +417,7 @@ a(href="#toc") Back to top
   :marked
     **Why?** Provides a consistent way to quickly identify and reference pipes.
 
+:marked
   ```
   EllipsisPipe    // ellipsis.pipe.ts
   InitCapsPipe    // init-caps.pipe.ts
@@ -444,6 +447,7 @@ a(href="#toc") Back to top
   :marked
       **Why?** Provides pattern matching for [karma](http://karma-runner.github.io/) or other test runners.
 
+:marked
   ```
   // recommended
 
@@ -483,6 +487,7 @@ a(href="#toc") Back to top
   :marked
     **Why?** Provides pattern matching for test runners and build automation.
 
+:marked
   ```
   // recommended
   app.e2e-spec.ts
@@ -1547,32 +1552,11 @@ a(href="#toc") Back to top
   :marked
     **Why?** The metadata declaration attached to the directive is shorter and thus more readable.
 
++makeExample('style-guide/ts/06-03/app/shared/validate.directive.ts', 'example', 'app/shared/validate.directive.ts')(avoid=1)
 :marked
-  ```
-  /* avoid */
-  @Directive({
-    selector: '[tohValidator]',
-    host: {
-      '(mouseenter)': 'onMouseEnter()',
-      'attr.role': 'button'
-    }
-  })
-  export class ValidatorDirective {
-    role = 'button';
-    onMouseEnter() {...}
-  }
-  ```
 
-  ```
-  /* recommended */
-  @Directive({
-    selector: '[tohValidator]'
-  })
-  export class ValidatorDirective {
-    @HostBinding('attr.role') role = 'button';
-    @HostListener('mouseenter') onMouseEnter() {...}
-  }
-  ```
++makeExample('style-guide/ts/06-03/app/shared/validate.directive.ts', 'example', 'app/shared/validate.directive.ts')
+:marked
 
 a(href="#toc") Back to top