fix: 修正自动翻译结果

aio/content/guide/ajs-quick-reference.md

@@ -62,7 +62,9 @@ The following table lists some of the key AngularJS template features with their
       ### 绑定/插值表达式
 
       <code-example hideCopy>
+
         Your favorite hero is: {{vm.favoriteHero}}
+
       </code-example>
 
       In AngularJS, an expression in curly braces denotes one-way binding.
@@ -116,7 +118,9 @@ The following table lists some of the key AngularJS template features with their
       ### 过滤器
 
       <code-example hideCopy>
+
         &lt;td>{{movie.title | uppercase}}&lt;/td>
+
       </code-example>
 
       To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
@@ -161,9 +165,11 @@ The following table lists some of the key AngularJS template features with their
       ### 局部变量
 
       <code-example hideCopy format="">
+
         &lt;tr ng-repeat="movie in vm.movies">
           &lt;td>{{movie.title}}&lt;/td>
         &lt;/tr>
+
       </code-example>
 
       Here, `movie` is a user-defined local variable.
@@ -240,7 +246,9 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-app
 
       <code-example hideCopy>
+
         &lt;body ng-app="movieHunter">
+
       </code-example>
 
       The application startup process is called **bootstrapping**.
@@ -263,6 +271,7 @@ AngularJS 为模板提供了七十多个内置指令。
       ### 引导
 
       <code-example hideCopy path="ajs-quick-reference/src/main.ts" title="main.ts" linenums="false"></code-example>
+
       <br>
 
       <code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false"></code-example>
@@ -286,9 +295,11 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-class
 
       <code-example hideCopy format="">
+
         &lt;div ng-class="{active: isActive}">
         &lt;div ng-class="{active: isActive,
                            shazam: isImportant}">
+
       </code-example>
 
       In AngularJS, the `ng-class` directive includes/excludes CSS classes
@@ -350,8 +361,10 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-click
 
       <code-example hideCopy format="">
+
         &lt;button ng-click="vm.toggleImage()">
         &lt;button ng-click="vm.toggleImage($event)">
+
       </code-example>
 
       In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
@@ -420,7 +433,9 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-controller
 
       <code-example hideCopy format="">
+
         &lt;div ng-controller="MovieListCtrl as vm">
+
       </code-example>
 
       In AngularJS, the `ng-controller` directive attaches a controller to the view.
@@ -491,7 +506,9 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-href
 
       <code-example hideCopy format="">
+
         &lt;a ng-href="{{ angularDocsUrl }}">Angular Docs&lt;/a>
+
       </code-example>
 
       The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
@@ -505,7 +522,9 @@ AngularJS 为模板提供了七十多个内置指令。
       在AngularJS 中，`ng-href`通常用来作为导航的一部分，激活一个路由。
 
       <code-example hideCopy format="">
+
         &lt;a ng-href="#{{ moviesHash }}">Movies&lt;/a>
+
       </code-example>
 
       Routing is handled differently in Angular.
@@ -555,7 +574,9 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-if
 
       <code-example hideCopy format="">
+
         &lt;table ng-if="movies.length">
+
       </code-example>
 
       In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM,
@@ -602,7 +623,9 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-model
 
       <code-example hideCopy format="">
+
         &lt;input ng-model="vm.favoriteHero"/>
+
       </code-example>
 
       In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template.
@@ -642,7 +665,9 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-repeat
 
       <code-example hideCopy format="">
+
         &lt;tr ng-repeat="movie in vm.movies">
+
       </code-example>
 
       In AngularJS, the `ng-repeat` directive repeats the associated DOM element
@@ -694,9 +719,11 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-show
 
       <code-example hideCopy format="">
+
         &lt;h3 ng-show="vm.favoriteHero">
           Your favorite hero is: {{vm.favoriteHero}}
         &lt;/h3>
+
       </code-example>
 
       In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
@@ -749,7 +776,9 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-src
 
       <code-example hideCopy format="">
+
         &lt;img ng-src="{{movie.imageurl}}">
+
       </code-example>
 
       The `ng-src` directive allows AngularJS to preprocess the `src` property so that it
@@ -790,7 +819,9 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-style
 
       <code-example hideCopy format="">
+
         &lt;div ng-style="{color: colorPreference}">
+
       </code-example>
 
       In AngularJS, the `ng-style` directive sets a CSS style on an HTML element
@@ -846,6 +877,7 @@ AngularJS 为模板提供了七十多个内置指令。
       ### ng-switch
 
       <code-example hideCopy format="">
+
         &lt;div ng-switch="vm.favoriteHero &&
                         vm.checkMovieHero(vm.favoriteHero)">
             &lt;div ng-switch-when="true">
@@ -858,6 +890,7 @@ AngularJS 为模板提供了七十多个内置指令。
               Please enter your favorite hero.
             &lt;/div>
         &lt;/div>
+
       </code-example>
 
       In AngularJS, the `ng-switch` directive swaps the contents of
@@ -963,7 +996,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
       ### currency
 
       <code-example hideCopy>
+
         &lt;td>{{movie.price | currency}}&lt;/td>
+
       </code-example>
 
       Formats a number as currency.
@@ -993,7 +1028,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
       ### date
 
       <code-example hideCopy>
+
         &lt;td>{{movie.releaseDate | date}}&lt;/td>
+
       </code-example>
 
       Formats a date to a string based on the requested format.
@@ -1023,7 +1060,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
       ### filter
 
       <code-example hideCopy>
+
         &lt;tr ng-repeat="movie in movieList | filter: {title:listFilter}">
+
       </code-example>
 
       Selects a subset of items from the defined collection, based on the filter criteria.
@@ -1055,7 +1094,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
       ### json
 
       <code-example hideCopy>
+
         &lt;pre>{{movie | json}}&lt;/pre>
+
       </code-example>
 
       Converts a JavaScript object into a JSON string. This is useful for debugging.
@@ -1085,7 +1126,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
       ### limitTo
 
       <code-example hideCopy>
+
         &lt;tr ng-repeat="movie in movieList | limitTo:2:0">
+
       </code-example>
 
       Selects up to the first parameter (2) number of items from the collection
@@ -1121,7 +1164,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
       ### lowercase
 
       <code-example hideCopy>
+
         &lt;div>{{movie.title | lowercase}}&lt;/div>
+
       </code-example>
 
       Converts the string to lowercase.
@@ -1151,7 +1196,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
       ### number
 
       <code-example hideCopy>
+
         &lt;td>{{movie.starRating | number}}&lt;/td>
+
       </code-example>
 
       Formats a number as text.
@@ -1189,7 +1236,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
       ### orderBy
 
       <code-example hideCopy>
+
         &lt;tr ng-repeat="movie in movieList | orderBy : 'title'">
+
       </code-example>
 
       Displays the collection in the order specified by the expression.
@@ -1273,9 +1322,11 @@ The Angular code is shown using TypeScript.
       ### IIFE
 
       <code-example hideCopy>
+
         (function () {
           ...
         }());
+
       </code-example>
 
       In AngularJS, an immediately invoked function expression (or IIFE) around controller code
@@ -1314,7 +1365,9 @@ The Angular code is shown using TypeScript.
       ### Angular模块
 
       <code-example hideCopy>
+
         angular.module("movieHunter", ["ngRoute"]);
+
       </code-example>
 
       In AngularJS, an Angular module keeps track of controllers, services, and other code.
@@ -1359,11 +1412,13 @@ The Angular code is shown using TypeScript.
       ### 控制器注册
 
       <code-example hideCopy>
+
         angular
           .module("movieHunter")
           .controller("MovieListCtrl",
                       ["movieService",
                        MovieListCtrl]);
+
       </code-example>
 
       AngularJS has code in each controller that looks up an appropriate Angular module
@@ -1415,8 +1470,10 @@ The Angular code is shown using TypeScript.
       ### 控制器函数
 
       <code-example hideCopy>
+
         function MovieListCtrl(movieService) {
         }
+
       </code-example>
 
       In AngularJS, you write the code for the model and methods in a controller function.
@@ -1459,9 +1516,11 @@ The Angular code is shown using TypeScript.
       ### 依赖注入
 
       <code-example hideCopy>
+
         MovieListCtrl.$inject = ['MovieService'];
         function MovieListCtrl(movieService) {
         }
+
       </code-example>
 
       In AngularJS, you pass in any dependencies as controller function arguments.
@@ -1557,7 +1616,9 @@ also encapsulate a style sheet within a specific component.
       ### Link 标签
 
       <code-example hideCopy>
+
         &lt;link href="styles.css" rel="stylesheet" />
+
       </code-example>
 
       AngularJS, uses a `link` tag in the head section of the `index.html` file

aio/content/guide/animations.md

@@ -277,8 +277,10 @@ These two common animations have their own aliases:
 这两个常见的动画有自己的别名：
 
 <code-example language="typescript">
+
   transition(':enter', [ ... ]); // void => *
   transition(':leave', [ ... ]); // * => void
+
 </code-example>
 
 </div>

aio/content/guide/aot-compiler.md

@@ -35,8 +35,10 @@ Angular offers two ways to compile your application:
 JIT compilation is the default when you run the _build-only_ or the _build-and-serve-locally_ CLI commands:
 
 <code-example language="sh" class="code-shell">
+
   ng build
   ng serve
+
 </code-example>
 
 {@a compile}
@@ -44,8 +46,10 @@ JIT compilation is the default when you run the _build-only_ or the _build-and-s
 For AOT compilation, append the `--aot` flags to the _build-only_ or the _build-and-serve-locally_ CLI commands:
 
 <code-example language="sh" class="code-shell">
+
   ng build --aot
   ng serve --aot
+
 </code-example>
 
 <div class="l-sub-section">
@@ -1085,6 +1089,7 @@ import { calculateValue } from './utilities';
 To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
 
 <code-example linenums="false">
+
 // CORRECTED
 import { calculateValue } from './utilities';
 
@@ -1100,6 +1105,7 @@ export function someValueFactory() {
     { provide: SomeValue, useFactory: someValueFactory }
   ]
   ...
+
 </code-example>
 
 <hr>
@@ -1119,6 +1125,7 @@ The compiler does not support references to variables assigned by [destructuring
 For example, you cannot write something like this:
 
 <code-example linenums="false">
+
 // ERROR
 import { configuration } from './configuration';
 
@@ -1130,11 +1137,13 @@ const {foo, bar} = configuration;
     {provide: Bar, useValue: bar},
   ]
   ...
+
 </code-example>
 
 To correct this error, refer to non-destructured values.
 
 <code-example linenums="false">
+
 // CORRECTED
 import { configuration } from './configuration';
   ...
@@ -1143,6 +1152,7 @@ import { configuration } from './configuration';
     {provide: Bar, useValue: configuration.bar},
   ]
   ...
+
 </code-example>
 
 <hr>
@@ -1188,6 +1198,7 @@ you can finesse the problem in four steps:
 Here's an illustrative example.
 
 <code-example linenums="false">
+
 // CORRECTED
 import { Inject } from '@angular/core';
 
@@ -1203,6 +1214,7 @@ export function _window() { return window; }
 export class MyComponent {
   constructor (@Inject(WINDOW) private win: Window) { ... }
 }
+
 </code-example>
 
 The `Window` type in the constructor is no longer a problem for the compiler because it
@@ -1211,6 +1223,7 @@ uses the `@Inject(WINDOW)` to generate the injection code.
 Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs).
 
 <code-example linenums="false">
+
 import { Inject }   from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
 
@@ -1218,6 +1231,7 @@ import { DOCUMENT } from '@angular/platform-browser';
 export class MyComponent {
   constructor (@Inject(DOCUMENT) private doc: Document) { ... }
 }
+
 </code-example>
 
 <hr>
@@ -1253,6 +1267,7 @@ that you referenced in metadata.
 The compiler can understand simple enum values but not complex values such as those derived from computed properties.
 
 <code-example linenums="false">
+
 // ERROR
 enum Colors {
   Red = 1,
@@ -1267,6 +1282,7 @@ enum Colors {
     { provide: StrongColor, useValue: Colors.Blue }  // bad
   ]
   ...
+
 </code-example>
 
 Avoid referring to enums with complicated initializers or computed properties.

aio/content/guide/api-page-class.md

@@ -100,6 +100,7 @@
         <h2>Constructor</h2>
 
         <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
+
         <aio-code class="simple-code"><pre class="prettyprint lang-">   
         <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
         </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
@@ -291,9 +292,11 @@
             <h5>Declaration</h5>
 
             <code-example language="ts" hidecopy="true" ng-version="5.2.0">
+
                 <aio-code class="simple-code"><pre class="prettyprint lang-ts">
                     <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/animations/AnimationBuilder" class="code-anchor"><span class="typ">AnimationBuilder</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><a class="code-anchor" href="api/animations/AnimationBuilder#build"><span class="pln">build</span><span class="pun">(</span><span class="pln">animation</span><span class="pun">:</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pun">[]):</span><span class="pln"> </span><span class="typ">AnimationFactory</span></a><span class="pln"></span><span class="pun">}</span></code></pre>
                 </aio-code>
+
             </code-example>
 
             <h6>Parameters</h6>
@@ -327,6 +330,7 @@
                 <td>
 
                     <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
+
         <aio-code class="simple-code"><pre class="prettyprint lang-">   
         <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
         </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
@@ -347,6 +351,7 @@
                 <td>
 
                     <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
+
         <aio-code class="simple-code"><pre class="prettyprint lang-">   
         <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
         </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
@@ -392,6 +397,7 @@
 </p>
 
             <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
+
         <aio-code class="simple-code"><pre class="prettyprint lang-">   
         <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
         </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">

aio/content/guide/attribute-directives.md

@@ -280,9 +280,7 @@ the mouse hovers over the `p` and disappears as it moves out.
 运行本应用并确认：当把鼠标移到`p`上的时候，背景色就出现了，而移开的时候，它消失了。
 
 <figure>
-
   <img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
-
 </figure>
 
 {@a bindings}
@@ -437,9 +435,7 @@ Here are the harness and directive in action.
 下面是测试程序和指令的动图。
 
 <figure>
-
   <img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
-
 </figure>
 
 {@a second-property}
@@ -494,9 +490,7 @@ Here's how the harness should work when you're done coding.
 当这些代码完成时，测试程序工作时的动图如下：
 
 <figure>
-
   <img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
-
 </figure>
 
 ## Summary
@@ -528,19 +522,12 @@ The final source code follows:
 最终的源码如下：
 
 <code-tabs>
-
   <code-pane title="app/app.component.ts" path="attribute-directives/src/app/app.component.ts"></code-pane>
-
   <code-pane title="app/app.component.html" path="attribute-directives/src/app/app.component.html"></code-pane>
-
   <code-pane title="app/highlight.directive.ts" path="attribute-directives/src/app/highlight.directive.ts"></code-pane>
-
   <code-pane title="app/app.module.ts" path="attribute-directives/src/app/app.module.ts"></code-pane>
-
   <code-pane title="main.ts" path="attribute-directives/src/main.ts"></code-pane>
-
   <code-pane title="index.html" path="attribute-directives/src/index.html"></code-pane>
-
 </code-tabs>
 
 You can also experience and download the <live-example title="Attribute Directive example"></live-example>.

aio/content/guide/bootstrapping.md

@@ -16,6 +16,7 @@ By convention, it is usually called `AppModule`.
 If you use the CLI to generate an app, the default `AppModule` is as follows:
 
 ```typescript
+
 /* JavaScript imports */
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
@@ -83,11 +84,13 @@ this module and the other module imports this one.
 An example of what goes into a declarations array follows:
 
 ```typescript
+
   declarations: [
     YourComponent,
     YourPipe,
     YourDirective
   ],
+
 ```
 
 A declarable can only belong to one module, so only declare it in

aio/content/guide/browser-support.md

@@ -81,7 +81,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
     </td>
 
   </tr>
-
   <tr> 
 
     <td>
@@ -97,9 +96,7 @@ Angular 支持大多数常用浏览器，包括下列版本：
     </td>
 
   </tr>
-
  <tr>
-
    <tr> 
 
     <td>
@@ -115,7 +112,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
     </td>
 
   </tr>
-
  <tr>
 
     <td>
@@ -133,7 +129,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
     </td>
 
   </tr>
-
   <tr>
 
     <td>
@@ -151,7 +146,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
     </td>
 
   </tr> 
-
   <tr>
 
     <td>
@@ -235,7 +229,9 @@ For example, [if you need the web animations polyfill](http://caniuse.com/#feat=
 <code-example language="sh" class="code-shell">
 
   # note that the web-animations-js polyfill is only here as an example
+
   # it isn't a strict requirement of Angular anymore (more below)
+
   npm install --save web-animations-js
 
 </code-example>
@@ -247,7 +243,9 @@ Then open the `polyfills.ts` file and un-comment the corresponding `import` stat
 <code-example title="src/polyfills.ts">
 
   /**
+
   * Required to support Web Animations `@angular/platform-browser/animations`.
+
   * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
   **/
   import 'web-animations-js';  // Run `npm install --save web-animations-js`.
@@ -438,12 +436,10 @@ Here are the features which may require additional polyfills:
     <td>
 
       [Animations](guide/animations)
-      
-      [动画](guide/animations)
-      
       <br>Only if `Animation Builder` is used within the application--standard
       animation support in Angular doesn't require any polyfills (as of NG6).
 
+      [动画](guide/animations)
       <br>只有在应用中用到了 `Animation Builder` 时才需要；Angular 标准的动画支持是不需要任何腻子脚本的（截至 NG6）。
 
     </td>
@@ -541,13 +537,9 @@ Here are the features which may require additional polyfills:
 
     <td>
 
-      [Typed&nbsp;Array](guide/browser-support#typedarray)
+      [Typed&nbsp;Array](guide/browser-support#typedarray)<br>
 
-<br>
+      [Blob](guide/browser-support#blob)<br>
-
-      [Blob](guide/browser-support#blob)
-
-<br>
 
       [FormData](guide/browser-support#formdata)
 
@@ -828,4 +820,3 @@ If you are not using the CLI, you should add your polyfill scripts directly to t
   &lt;!-- application polyfills -->
 
 </code-example>
-

aio/content/guide/comparing-observables.md

@@ -97,25 +97,39 @@ The following code snippets illustrate how the same kind of operation is defined
 
   <th>
 
-    <td>Operation</td>
+    <td>
 
-    <td>Observable</td>
+        Operation
 
-    <td>Promise</td>
+    </td>
+
+    <td>
+
+        Observable
+
+    </td>
+
+    <td>
+
+        Promise
+
+    </td>
 
   </th>
 
   <tr>
 
-    <td>Creation</td>
+    <td>
+
+        Creation
+
+    </td>
 
     <td>
 
       <pre>new Observable((observer) => {
   observer.next(123);
-});
+});</pre>
-
-</pre>
 
     </td>
 
@@ -123,35 +137,45 @@ The following code snippets illustrate how the same kind of operation is defined
 
       <pre>new Promise((resolve, reject) => {
   resolve(123);
-});
+});</pre>
-
-</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td>Transform</td>
+    <td>
 
-    <td><pre>obs.map((value) => value * 2 );</pre></td>
+        Transform
 
-    <td><pre>promise.then((value) => value * 2);</pre></td>
+    </td>
+
+    <td>
+
+        <pre>obs.map((value) => value * 2 );</pre>
+
+    </td>
+
+    <td>
+
+        <pre>promise.then((value) => value * 2);</pre>
+
+    </td>
 
   </tr>
-
   <tr>
 
-    <td>Subscribe</td>
+    <td>
+
+        Subscribe
+
+    </td>
 
     <td>
 
       <pre>sub = obs.subscribe((value) => {
   console.log(value)
-});
+});</pre>
-
-</pre>
 
     </td>
 
@@ -159,24 +183,32 @@ The following code snippets illustrate how the same kind of operation is defined
 
       <pre>promise.then((value) => {
   console.log(value);
-});
+});</pre>
-
-</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td>Unsubscribe</td>
+    <td>
 
-    <td><pre>sub.unsubscribe();</pre></td>
+        Unsubscribe
 
-    <td>Implied by promise resolution.</td>
+    </td>
+
+    <td>
+
+        <pre>sub.unsubscribe();</pre>
+
+    </td>
+
+    <td>
+
+        Implied by promise resolution.
+
+    </td>
 
   </tr>
-
 </table>
 
 ## Observables compared to events API
@@ -191,15 +223,27 @@ Here are some code samples that illustrate how the same kind of operation is def
 
   <th>
 
-    <td>Observable</td>
+    <td>
 
-    <td>Events API</td>
+        Observable
+
+    </td>
+
+    <td>
+
+        Events API
+
+    </td>
 
   </th>
 
   <tr>
 
-    <td>Creation & cancellation</td>
+    <td>
+
+        Creation & cancellation
+
+    </td>
 
     <td>
 
@@ -209,9 +253,7 @@ let clicks$ = fromEvent(buttonEl, ‘click’);
 let subscription = clicks$
   .subscribe(e => console.log(‘Clicked’, e))
 // Stop listening
-subscription.unsubscribe();
+subscription.unsubscribe();</pre>
-
-</pre>
 
    </td>
 
@@ -225,24 +267,24 @@ subscription.unsubscribe();
 button.addEventListener(‘click’, handler);
 // Stop listening
 button.removeEventListener(‘click’, handler);
-
 </pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td>Subscription</td>
+    <td>
+
+        Subscription
+
+    </td>
 
     <td>
 
 <pre>observable.subscribe(() => {
   // notification handlers here
-});
+});</pre>
-
-</pre>
 
     </td>
 
@@ -250,24 +292,23 @@ button.removeEventListener(‘click’, handler);
 
 <pre>element.addEventListener(eventName, (event) => {
   // notification handler here
-});
+});</pre>
-
-</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td>Configuration</td>
+    <td>
+
+        Configuration
+
+    </td>
 
     <td>Listen for keystrokes, but provide a stream representing the value in the input.
 <pre>fromEvent(inputEl, 'keydown').pipe(
   map(e => e.target.value)
-);
+);</pre>
-
-</pre>
 
     </td>
 
@@ -275,14 +316,11 @@ button.removeEventListener(‘click’, handler);
 <pre>element.addEventListener(eventName, (event) => {
   // Cannot change the passed Event into another
   // value before it gets to the handler
-});
+});</pre>
-
-</pre>
 
     </td>
 
   </tr>
-
 </table>
 
 ## Observables compared to arrays
@@ -293,20 +331,31 @@ An observable produces values over time. An array is created as a static set of
 
   <th>
 
-    <td>Observable</td>
+    <td>
 
-    <td>Array</td>
+        Observable
+
+    </td>
+
+    <td>
+
+        Array
+
+    </td>
 
   </th>
 
   <tr>
 
-    <td>Given</td>
+    <td>
+
+        Given
+
+    </td>
 
     <td>
 
       <pre>obs: ➞1➞2➞3➞5➞7</pre>
-
       <pre>obsB: ➞'a'➞'b'➞'c'</pre>
 
     </td>
@@ -314,21 +363,22 @@ An observable produces values over time. An array is created as a static set of
     <td>
 
       <pre>arr: [1, 2, 3, 5, 7]</pre>
-
       <pre>arrB: ['a', 'b', 'c']</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td><pre>concat()</pre></td>
+    <td>
+
+        <pre>concat()</pre>
+
+    </td>
 
     <td>
 
       <pre>obs.concat(obsB)</pre>
-
       <pre>➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'</pre>
 
     </td>
@@ -336,21 +386,22 @@ An observable produces values over time. An array is created as a static set of
     <td>
 
       <pre>arr.concat(arrB)</pre>
-
       <pre>[1,2,3,5,7,'a','b','c']</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td><pre>filter()</pre></td>
+    <td>
+
+        <pre>filter()</pre>
+
+    </td>
 
     <td>
 
       <pre>obs.filter((v) => v>3)</pre>
-
       <pre>➞5➞7</pre>
 
     </td>
@@ -358,21 +409,22 @@ An observable produces values over time. An array is created as a static set of
     <td>
 
       <pre>arr.filter((v) => v>3)</pre>
-
       <pre>[5, 7]</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td><pre>find()</pre></td>
+    <td>
+
+        <pre>find()</pre>
+
+    </td>
 
     <td>
 
       <pre>obs.find((v) => v>3)</pre>
-
       <pre>➞5</pre>
 
     </td>
@@ -380,21 +432,22 @@ An observable produces values over time. An array is created as a static set of
     <td>
 
       <pre>arr.find((v) => v>10)</pre>
-
       <pre>5</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td><pre>findIndex()</pre></td>
+    <td>
+
+        <pre>findIndex()</pre>
+
+    </td>
 
     <td>
 
       <pre>obs.findIndex((v) => v>3)</pre>
-
       <pre>➞3</pre>
 
     </td>
@@ -402,16 +455,18 @@ An observable produces values over time. An array is created as a static set of
     <td>
 
       <pre>arr.findIndex((v) => v>3)</pre>
-
       <pre>3</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td><pre>forEach()</pre></td>
+    <td>
+
+        <pre>forEach()</pre>
+
+    </td>
 
     <td>
 
@@ -422,9 +477,7 @@ An observable produces values over time. An array is created as a static set of
 2
 3
 4
-5
+5</pre>
-
-</pre>
 
     </td>
 
@@ -437,22 +490,22 @@ An observable produces values over time. An array is created as a static set of
 2
 3
 4
-5
+5</pre>
-
-</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td><pre>map()</pre></td>
+    <td>
+
+        <pre>map()</pre>
+
+    </td>
 
     <td>
 
       <pre>obs.map((v) => -v)</pre>
-
       <pre>➞-1➞-2➞-3➞-5➞-7</pre>
 
     </td>
@@ -460,21 +513,22 @@ An observable produces values over time. An array is created as a static set of
     <td>
 
       <pre>arr.map((v) => -v)</pre>
-
       <pre>[-1, -2, -3, -5, -7]</pre>
 
     </td>
 
   </tr>
-
   <tr>
 
-    <td><pre>reduce()</pre></td>
+    <td>
+
+        <pre>reduce()</pre>
+
+    </td>
 
     <td>
 
       <pre>obs.scan((s,v)=> s+v, 0)</pre>
-
       <pre>➞1➞3➞6➞11➞18</pre>
 
     </td>
@@ -482,12 +536,9 @@ An observable produces values over time. An array is created as a static set of
     <td>
 
       <pre>arr.reduce((s,v) => s+v, 0)</pre>
-
       <pre>18</pre>
 
     </td>
 
   </tr>
-
 </table>
-

aio/content/guide/component-interaction.md

@@ -77,13 +77,13 @@ The running application displays three heroes:
 运行应用程序会显示三个英雄：
 
 <figure>
-
   <img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
-
 </figure>
 
 <h3 class="no-toc">Test it</h3>
 
+<h3 class="no-toc">测试一下</h3>
+
 E2E test that all children were instantiated and displayed as expected:
 
 端到端测试，用于确保所有的子组件都像所期待的那样被初始化并显示出来。
@@ -124,13 +124,13 @@ Here's the `NameParentComponent` demonstrating name variations including a name
 </code-example>
 
 <figure>
-
   <img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
-
 </figure>
 
 <h3 class="no-toc">Test it</h3>
 
+<h3 class="no-toc">测试一下</h3>
+
 E2E tests of input property setter with empty and non-empty names:
 
 端到端测试：输入属性的setter，分别使用空名字和非空名字。
@@ -186,9 +186,7 @@ Here's the output of a button-pushing sequence:
 下面是点击按钮的结果。
 
 <figure>
-
   <img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
-
 </figure>
 
 <h3 class="no-toc">Test it</h3>
@@ -248,9 +246,7 @@ and the method processes it:
 框架(Angular)把事件参数(用`$event`表示)传给事件处理方法，这个方法会处理：
 
 <figure>
-
   <img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
-
 </figure>
 
 <h3 class="no-toc">Test it</h3>
@@ -282,6 +278,7 @@ as seen in the following example.
 父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，如下例所示。
 
 {@a countdown-timer-example}
+
 The following is a child `CountdownTimerComponent` that repeatedly counts down to zero and launches a rocket.
 It has `start` and `stop` methods that control the clock and it displays a
 countdown status message in its own template.
@@ -321,9 +318,7 @@ Here we see the parent and child working together.
 下面是父组件和子组件一起工作时的效果。
 
 <figure>
-
   <img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
-
 </figure>
 
 {@a countdown-tests}
@@ -512,9 +507,7 @@ facilitated by the service:
 *History*日志证明了：在父组件`MissionControlComponent`和子组件`AstronautComponent`之间，信息通过该服务实现了双向传递。
 
 <figure>
-
   <img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
-
 </figure>
 
 <h3 class="no-toc">Test it</h3>

aio/content/guide/component-styles.md

@@ -20,7 +20,7 @@ This page describes how to load and apply these component styles.
 
 You can run the <live-example></live-example> in Stackblitz and download the code from there.
 
-你可以在 Stackblitz 上运行本章这些代码的<live-example></live-example>并下载这些代码。
+运行<live-example></live-example>来试用本页的代码。
 
 ## Using component styles
 
@@ -290,11 +290,8 @@ to a component's `@Component` decorator:
 我们可以通过把外部 CSS 文件添加到 `@Component` 的 `styleUrls` 属性中来加载外部样式。
 
 <code-tabs>
-
   <code-pane title="src/app/hero-app.component.ts (CSS in file)" path="component-styles/src/app/hero-app.component.1.ts"></code-pane>
-
   <code-pane title="src/app/hero-app.component.css" path="component-styles/src/app/hero-app.component.css"></code-pane>
-
 </code-tabs>
 
 <div class="alert is-critical">

aio/content/guide/dependency-injection-in-action.md

@@ -9,7 +9,8 @@ This cookbook explores many of the features of Dependency Injection (DI) in Angu
 
 {@a toc}
 
-See the <live-example name="dependency-injection-in-action"></live-example> of the code in this cookbook.
+See the <live-example name="dependency-injection-in-action"></live-example>
+of the code in this cookbook.
 
 到<live-example name="dependency-injection-in-action"></live-example>查看本烹饪书的源码。
 
@@ -150,9 +151,7 @@ Once all the dependencies are in place, the `AppComponent` displays the user inf
 一旦所有依赖都准备好了，`AppComponent`就会显示用户信息：
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
-
 </figure>
 
 {@a injectable-1}
@@ -307,6 +306,7 @@ This is called *sandboxing* because each service and component instance has its
 每个服务有自己的工作状态，与其它组件的服务和状态隔离。我们称作*沙盒化*，因为每个服务和组件实例都在自己的沙盒里运行。
 
 {@a hero-bios-component}
+
 Imagine a `HeroBiosComponent` that presents three instances of the `HeroBioComponent`.
 
 想象一下，一个`HeroBiosComponent`组件显示三个`HeroBioComponent`的实例。
@@ -345,14 +345,13 @@ And the template displays this data-bound property.
 
 父组件`HeroBiosComponent`把一个值绑定到`heroId`。`ngOnInit`把该`id`传递到服务，然后服务获取和缓存英雄。`hero`属性的getter从服务里面获取缓存的英雄，并在模板里显示它绑定到属性值。
 
-Find this example in <live-example name="dependency-injection-in-action">live code</live-example> and confirm that the three `HeroBioComponent` instances have their own cached hero data.
+Find this example in <live-example name="dependency-injection-in-action">live code</live-example>
+and confirm that the three `HeroBioComponent` instances have their own cached hero data.
 
 到<live-example name="dependency-injection-in-action">在线例子</live-example>中找到这个例子，确认三个`HeroBioComponent`实例拥有自己独立的英雄数据缓存。
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
-
 </figure>
 
 {@a optional}
@@ -435,9 +434,7 @@ It looks like this, with the hero's telephone number from `HeroContactComponent`
 从`HeroContactComponent`获得的英雄电话号码，被投影到上面的英雄描述里，就像这样：
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
-
 </figure>
 
 Here's the `HeroContactComponent` which demonstrates the qualifying decorators:
@@ -480,9 +477,7 @@ Here's the `HeroBiosAndContactsComponent` in action.
 下面是`HeroBiosAndContactsComponent`的执行结果：
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
-
 </figure>
 
 If you comment out the `@Host()` decorator, Angular now walks up the injector ancestor tree
@@ -492,9 +487,7 @@ with the gratuitous "!!!", indicating that the logger was found.
 如果注释掉`@Host()`装饰器，Angular就会沿着注入器树往上走，直到在`AppComponent`中找到该日志服务。日志服务的逻辑加入进来，更新了英雄的显示信息，这表明确实找到了日志服务。
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
-
 </figure>
 
 On the other hand, if you restore the `@Host()` decorator and comment out `@Optional`,
@@ -552,9 +545,7 @@ The following image shows the effect of mousing over the `<hero-bios-and-contact
 下图显示了鼠标移到`<hero-bios-and-contacts>`标签的效果：
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
-
 </figure>
 
 {@a providers}
@@ -650,9 +641,7 @@ It's visually simple: a few properties and the logs produced by a logger.
 它看起来很简单：一些属性和一个日志输出。
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
-
 </figure>
 
 The code behind it gives you plenty to think about.
@@ -831,9 +820,7 @@ The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `Mini
 `HeroOfTheMonthComponent`构造函数的`logger`参数是一个`MinimalLogger`类型，支持TypeScript的编辑器里，只能看到它的两个成员`logs`和`logInfo`：
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
-
 </figure>
 
 Behind the scenes, Angular actually sets the `logger` parameter to the full service registered under the `LoggingService` token which happens to be the `DateLoggerService` that was [provided above](guide/dependency-injection-in-action#useclass).
@@ -848,9 +835,7 @@ The following image, which displays the logging date, confirms the point:
 在下面的图片中，显示了日志日期，可以确认这一点：
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
-
 </figure>
 
 </div>
@@ -1087,9 +1072,7 @@ to display a *sorted* list of heroes.
 在这个刻意生成的例子里，`SortedHeroesComponent`继承自`HeroesBaseComponent`，显示一个*被排序*的英雄列表。
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
-
 </figure>
 
 The `HeroesBaseComponent` could stand on its own.
@@ -1266,7 +1249,6 @@ you see that the `Alex` component *extends* (*inherits*) from a class named `Bas
 
 `CraigComponent`例子探究了这个问题。[往回看Alex]{guide/dependency-injection-in-action#alex}，我们看到`Alex`组件*扩展*(*派生*)自一个叫`Base`的类。
 
-
 <code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-class-signature" title="parent-finder.component.ts (Alex class signature)" linenums="false">
 
 </code-example>
@@ -1338,9 +1320,7 @@ Here's *Alex* and family in action:
 下面是*Alex*和其家庭的运行结果：
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action">
-
 </figure>
 
 {@a parent-tree}
@@ -1416,9 +1396,7 @@ Here's *Alice*, *Barry* and family in action:
 这里是*Alice*，*Barry*和该家庭的操作演示：
 
 <figure>
-
   <img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action">
-
 </figure>
 
 {@a parent-token}
@@ -1567,4 +1545,3 @@ Break the circularity with `forwardRef`:
 <code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-providers" title="parent-finder.component.ts (AlexComponent providers)" linenums="false">
 
 </code-example>
-

aio/content/guide/dependency-injection-pattern.md

@@ -65,16 +65,15 @@ When you can't control the dependencies, a class becomes difficult to test.
 How can you make `Car` more robust, flexible, and testable?
 
 {@a ctor-injection}
+
 That's super easy. Change the `Car` constructor to a version with DI:
 
 <code-tabs>
 
   <code-pane title="src/app/car/car.ts (excerpt with DI)" path="dependency-injection/src/app/car/car.ts" region="car-ctor">
-
   </code-pane>
 
   <code-pane title="src/app/car/car.ts (excerpt without DI)" path="dependency-injection/src/app/car/car-no-di.ts" region="car-ctor">
-
   </code-pane>
 
 </code-tabs>

aio/content/guide/dependency-injection.md

@@ -16,22 +16,17 @@ Start by reviewing this simplified version of the _heroes_ feature
 from the [The Tour of Heroes](tutorial/).
 
 <code-tabs>
-
   <code-pane title="src/app/heroes/heroes.component.ts" path="dependency-injection/src/app/heroes/heroes.component.1.ts"
   region="v1">
-
   </code-pane>
 
   <code-pane title="src/app/heroes/hero-list.component.ts" path="dependency-injection/src/app/heroes/hero-list.component.1.ts">
-
   </code-pane>
 
   <code-pane title="src/app/heroes/hero.ts" path="dependency-injection/src/app/heroes/hero.ts">
-
   </code-pane>
 
   <code-pane title="src/app/heroes/mock-heroes.ts" path="dependency-injection/src/app/heroes/mock-heroes.ts">
-
   </code-pane>
 
 </code-tabs>
@@ -88,6 +83,7 @@ That's a defect we can safely ignore in this guide where our focus is on
 _injecting the service_ into the `HeroList` component.
 
 {@a injector-config}
+
 {@a bootstrap}
 
 ## Register a service provider
@@ -222,15 +218,11 @@ Of course, the `HeroListComponent` should do something with the injected `HeroSe
 Here's the revised component, making use of the injected service, side-by-side with the previous version for comparison.
 
 <code-tabs>
-
   <code-pane title="hero-list.component (with DI)" path="dependency-injection/src/app/heroes/hero-list.component.2.ts">
-
   </code-pane>
 
   <code-pane title="hero-list.component (without DI)" path="dependency-injection/src/app/heroes/hero-list.component.1.ts">
-
   </code-pane>
-
 </code-tabs>
 
 Notice that the `HeroListComponent` doesn't know where the `HeroService` comes from.
@@ -329,11 +321,9 @@ Here is the revised `HeroService` that injects the `Logger`, side-by-side with t
 <code-tabs>
 
   <code-pane title="src/app/heroes/hero.service (v2)" path="dependency-injection/src/app/heroes/hero.service.2.ts">
-
   </code-pane>
 
   <code-pane title="src/app/heroes/hero.service (v1)" path="dependency-injection/src/app/heroes/hero.service.1.ts">
-
   </code-pane>
 
 </code-tabs>
@@ -734,11 +724,9 @@ Here you see the new and the old implementation side-by-side:
 <code-tabs>
 
   <code-pane title="src/app/heroes/heroes.component (v3)" path="dependency-injection/src/app/heroes/heroes.component.ts">
-
   </code-pane>
 
   <code-pane title="src/app/heroes/heroes.component (v2)" path="dependency-injection/src/app/heroes/heroes.component.1.ts">
-
   </code-pane>
 
 </code-tabs>
@@ -1063,4 +1051,3 @@ But it's best to avoid the problem altogether by defining components and service
 还是通过在独立的文件中定义组件和服务，完全避免此问题吧。
 
 </div>
-

aio/content/guide/deployment.md

@@ -7,6 +7,7 @@ This page describes techniques for deploying your Angular application to a remot
 本章会描述在远程服务器上部署Angular应用的工具与技术。
 
 {@a dev-deploy}
+
 {@a copy-files}
 
 ## Simplest deployment possible
@@ -256,9 +257,7 @@ showing exactly which classes are included in the bundle.
 Here's the output for the _main_ bundle of the QuickStart.
 
 <figure>
-
   <img src="generated/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
-
 </figure>
 
 {@a base-tag}

aio/content/guide/displaying-data.md

@@ -18,9 +18,7 @@ The final UI looks like this:
 最终的用户界面是这样的：
 
 <figure>
-
   <img src="generated/images/guide/displaying-data/final.png" alt="Final UI">
-
 </figure>
 
 <div class="l-sub-section">
@@ -135,9 +133,7 @@ Now run the app. It should display the title and hero name:
 运行应用。它应该显示出标题和英雄名：
 
 <figure>
-
   <img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero">
-
 </figure>
 
 The next few sections review some of the coding choices in the app.
@@ -275,9 +271,7 @@ Now the heroes appear in an unordered list.
 现在，英雄们出现在了一个无序列表中。
 
 <figure>
-
   <img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor">
-
 </figure>
 
 ## Creating a class for the data
@@ -487,4 +481,3 @@ Here's the final code:
   </code-pane>
 
 </code-tabs>
-

aio/content/guide/docs-style-guide.md

@@ -12,7 +12,9 @@ For clarity and precision, every guideline on _this_ page is illustrated with a
 followed by the page markup for that example ... as shown here.
 
 ```html
+
   followed by the page markup for that example ... as shown here.
+
 ```
 
 ## Doc generation and tooling
@@ -123,11 +125,8 @@ All section heading text should be in "Sentence case", which means the first wor
 **Always follow the section heading with at least one blank line.**
 
 <h2 class="no-toc">
-
 Main section heading
-
 </h2>
-
 There are usually one or more main sections that may be further divided into secondary sections.
 
 Begin a main section heading with the markdown `##` characters. Alternatively, you can write the equivalent `<h2>` HTML tag.
@@ -139,12 +138,11 @@ The main section heading should be followed by a blank line and then the content
   ## Sections
 
   A typical document is divided into sections.
+
 ```
 
 <h3 class="no-toc">
-
 Secondary section heading
-
 </h3>
 
 A secondary section heading is related to a main heading and _falls textually within_ the bounds of that main heading.
@@ -158,6 +156,7 @@ The secondary heading should be followed by a blank line and then the content fo
   ### Secondary section heading
 
   A secondary section ...
+
 ```
 
 #### Additional section headings
@@ -171,6 +170,7 @@ Try to minimize the heading depth, preferably only two. But more headings, such
   #### Additional section headings
 
   Try to minimize ...
+
 ```
 
 ## Subsections
@@ -214,9 +214,7 @@ To exclude a heading from the TOC, create the heading as an `<h2>` or `<h3>` ele
 ```html
 
 <h3 class="no-toc">
-
 This heading is not displayed in the TOC
-
 </h3>
 
 ```
@@ -226,9 +224,7 @@ You can turn off TOC generation for the _entire_ page by writing the title with
 ```html
 
 <h1 class="no-toc">
-
 A guide without a TOC
-
 </h1>
 
 ```
@@ -247,11 +243,13 @@ Look for the `SideNav` node in `navigation.json`. The `SideNav` node is an array
 Find the header for your page. For example, a guide page that describes an Angular feature is probably a child of the `Fundamentals` header.
 
 ```html
+
 {
   "title": "Fundamentals",
   "tooltip": "The fundamentals of Angular",
   "children": [ ... ]
 }
+
 ```
 
 A _header_ node child can be an _item_ node or another _header_ node. If your guide page belongs under a sub-header, find that sub-header in the JSON.
@@ -259,11 +257,13 @@ A _header_ node child can be an _item_ node or another _header_ node. If your gu
 Add an _item_ node for your guide page as a child of the appropriate _header_ node. It probably looks something like this one.
 
 ```html
+
 {
   "url": "guide/architecture",
   "title": "Architecture",
   "tooltip": "The basic building blocks of Angular applications."
 }
+
 ```
 
 A navigation node has the following properties:
@@ -368,6 +368,7 @@ The following _code-example_ displays the sample's `app.module.ts`.
 Here's the brief markup that produced that lengthy snippet:
 
 ```html
+
 <code-example
   path="docs-style-guide/src/app/app.module.ts"
   title="src/app/app.module.ts">
@@ -443,6 +444,7 @@ First you surround that fragment in the source file with a named _docregion_ as
 Then you reference that _docregion_ in the `region` attribute of the `<code-example>` like this
 
 ```html
+
 <code-example
   path="docs-style-guide/src/app/app.module.ts"
   region="class">
@@ -472,6 +474,7 @@ Here's the markup for an "avoid" example in the
 [_Angular Style Guide_](guide/styleguide#style-05-03 "Style 05-03: components as elements").
 
 ```html
+
 <code-example
   path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts"
   region="example"
@@ -507,33 +510,24 @@ The next example displays multiple code tabs, each with its own title.
 It demonstrates control over display of line numbers at both the `<code-tabs>` and `<code-pane>` levels.
 
 <code-tabs linenums="false">
-
   <code-pane
     title="app.component.html"
     path="docs-style-guide/src/app/app.component.html">
-
   </code-pane>
-
   <code-pane
     title="app.component.ts"
     path="docs-style-guide/src/app/app.component.ts"
     linenums="true">
-
   </code-pane>
-
   <code-pane
     title="app.component.css (heroes)"
     path="docs-style-guide/src/app/app.component.css"
     region="heroes">
-
   </code-pane>
-
   <code-pane
     title="package.json (scripts)"
     path="docs-style-guide/package.1.json">
-
   </code-pane>
-
 </code-tabs>
 
 Here's the markup for that example.
@@ -544,33 +538,24 @@ The `linenums` attribute in the second pane restores line numbering for _itself
 ```html
 
 <code-tabs linenums="false">
-
   <code-pane
     title="app.component.html"
     path="docs-style-guide/src/app/app.component.html">
-
   </code-pane>
-
   <code-pane
     title="app.component.ts"
     path="docs-style-guide/src/app/app.component.ts"
     linenums="true">
-
   </code-pane>
-
   <code-pane
     title="app.component.css (heroes)"
     path="docs-style-guide/src/app/app.component.css"
     region="heroes">
-
   </code-pane>
-
   <code-pane
     title="package.json (scripts)"
     path="docs-style-guide/package.1.json">
-
   </code-pane>
-
 </code-tabs>
 
 ```
@@ -590,22 +575,31 @@ The sample source code for this page, located in `context/examples/docs-style-gu
 Code snippet markup is always in the form of a comment. Here's the default _docregion_ markup for a TypeScript or JavaScript file:
 
 ```
+
 // #docregion
 ... some code ...
 // #enddocregion
+
 ```
+
 Different file types have different comment syntax so adjust accordingly.
 
 ```html
+
 <!-- #docregion -->
+
 ... some HTML ...
+
 <!-- #enddocregion -->
+
 ```
 
 ```
+
 /* #docregion */
 ... some CSS ...
 /* #enddocregion */
+
 ```
 
 The doc generation process erases these comments before displaying them in the doc viewer.
@@ -633,9 +627,7 @@ The `src/main.ts` is a simple example of a file with a single _#docregion_ at th
 
 <code-example
   path="docs-style-guide/src/main.ts"
-  title="src/main.ts">
+  title="src/main.ts"></code-example>
-
-</code-example>
 
 </div>
 
@@ -645,19 +637,20 @@ You'll often display multiple snippets from different fragments within the same
 You distinguish among them by giving each fragment its own _#docregion name_ as follows.
 
 ```
+
 // #docregion region-name
 ... some code ...
 // #enddocregion region-name
+
 ```
 
 Remember to refer to this region by name in the `region` attribute of the `<code-example>` or `<code-pane>` as you did in an example above like this:
 
 ```html
+
 <code-example
   path="docs-style-guide/src/app/app.module.ts"
-  region="class">
+  region="class"></code-example>
-
-</code-example>
 
 ```
 
@@ -666,7 +659,9 @@ The _#docregion_ with no name is the _default region_. Do _not_ set the `region`
 #### Nested _#docregions_
 
 You can nest _#docregions_ within _#docregions_
+
 ```
+
 // #docregion
 ... some code ...
 // #docregion inner-region
@@ -674,6 +669,7 @@ You can nest _#docregions_ within _#docregions_
 // #enddocregion inner-region
 ... yet more code ...
 /// #enddocregion
+
 ```
 
 <div class="l-sub-section">
@@ -714,21 +710,16 @@ export class AppComponent {
 Here's are the two corresponding code snippets displayed side-by-side.
 
 <code-tabs>
-
   <code-pane
     title="app.component.ts (class)"
     path="docs-style-guide/src/app/app.component.ts"
     region="class">
-
   </code-pane>
-
   <code-pane
     title="app.component.ts (class-skeleton)"
     path="docs-style-guide/src/app/app.component.ts"
     region="class-skeleton">
-
   </code-pane>
-
 </code-tabs>
 
 Some observations:
@@ -758,16 +749,13 @@ Here's an example that excerpts certain scripts from `package.json` into a parti
 
 <code-example
   path="docs-style-guide/package.1.json"
-  title="package.json (selected scripts)">
+  title="package.json (selected scripts)"></code-example>
-
-</code-example>
 
 ```html
+
 <code-example
   path="docs-style-guide/package.1.json"
-  title="package.json (selected scripts)">
+  title="package.json (selected scripts)"></code-example>
-
-</code-example>
 
 ```
 
@@ -781,9 +769,11 @@ Such partial and intermediate files need their own names.
 Follow the doc sample naming convention. Add a number before the file extension as illustrated here:
 
 ```html
+
 package.1.json
 app.component.1.ts
 app.component.2.ts
+
 ```
 
 You'll find many such files among the samples in the Angular documentation.
@@ -792,9 +782,7 @@ Remember to exclude these files from stackblitz by listing them in the `stackbli
 
 <code-example
   path="docs-style-guide/stackblitz.json"
-  title="stackblitz.json">
+  title="stackblitz.json"></code-example>
-
-</code-example>
 
 {@a live-examples}
 
@@ -939,7 +927,9 @@ See the ["Anchors"](guide/docs-style-guide#anchors "Style Guide - Anchors") sect
 When navigating within the page, you can omit the page URL when specifying the link that [scrolls up](#anchors "Anchors") to the beginning of this section.
 
 ```html
+
 ... the link that [scrolls up](#anchors "Anchors") to ...
+
 ```
 
 {@a ugly-anchors}
@@ -951,7 +941,9 @@ It is often a good idea to *lock-in* a good anchor name.
 Sometimes the section header text makes for an unattractive anchor. [This one](#ugly-long-section-header-anchors) is pretty bad.
 
 ```html
+
 [This one](#ugly-long-section-header-anchors) is pretty bad.
+
 ```
 
 The greater danger is that **a future rewording of the header text would break** a link to this section.
@@ -970,7 +962,9 @@ text to which it applies, using the special `{@a name}` syntax like this.
 Now [link to that custom anchor name](#ugly-anchors) as you did before.
 
 ```html
+
 Now [link to that custom anchor name](#ugly-anchors) as you did before.
+
 ```
 
 <div class="l-sub-section">
@@ -980,6 +974,7 @@ Alternatively, you can use the HTML `<a>` tag.
 If you do, be sure to set the `id` attribute - not the `name` attribute! The docs generator will not convert the `name` to the proper link URL.
 
 ```html
+
 <a id="anchors"></a>
 
 ## Anchors
@@ -1011,6 +1006,7 @@ A helpful, informational alert.
 </div>
 
 Here is the markup for these alerts.
+
 ```html
 
 <div class="alert is-critical">
@@ -1042,7 +1038,11 @@ Callouts (like alerts) are meant to draw attention to important points. Use a ca
 
 <div class="callout is-critical">
 
-<header>A critical point</header>
+<header>
+
+A critical point
+
+</header>
 
 **Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
 
@@ -1050,7 +1050,11 @@ Callouts (like alerts) are meant to draw attention to important points. Use a ca
 
 <div class="callout is-important">
 
-<header>An important point</header>
+<header>
+
+An important point
+
+</header>
 
 **Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
 
@@ -1058,18 +1062,27 @@ Callouts (like alerts) are meant to draw attention to important points. Use a ca
 
 <div class="callout is-helpful">
 
-<header>A helpful point</header>
+<header>
+
+A helpful point
+
+</header>
 
 **Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
 
 </div>
 
 Here is the markup for the first of these callouts.
+
 ```html
 
 <div class="callout is-critical">
 
-<header>A critical point</header>
+<header>
+
+A critical point
+
+</header>
 
 **Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
 
@@ -1242,38 +1255,65 @@ Here is the markup for this file tree.
 Use HTML tables to present tabular data.
 
 <style>
-
   td, th {vertical-align: top}
-
 </style>
 
 <table>
-
   <tr>
 
-    <th>Framework</th>
+    <th>
 
-    <th>Task</th>
+        Framework
 
-    <th>Speed</th>
+    </th>
+
+    <th>
+
+        Task
+
+    </th>
+
+    <th>
+
+        Speed
+
+    </th>
 
   </tr>
-
   <tr>
 
-    <td><code>AngularJS</code></td>
+    <td>
 
-    <td>Routing</td>
+        <code>AngularJS</code>
 
-    <td>Fast</td>
+    </td>
+
+    <td>
+
+        Routing
+
+    </td>
+
+    <td>
+
+        Fast
+
+    </td>
 
   </tr>
-
   <tr>
 
-    <td><code>Angular v2</code></td>
+    <td>
 
-    <td>Routing</td>
+        <code>Angular v2</code>
+
+    </td>
+
+    <td>
+
+        Routing
+
+    </td>
 
     <!-- can use markdown too; remember blank lines -->
 
@@ -1284,12 +1324,19 @@ Use HTML tables to present tabular data.
     </td>
 
   </tr>
-
   <tr>
 
-    <td><code>Angular v4</code></td>
+    <td>
 
-    <td>Routing</td>
+        <code>Angular v4</code>
+
+    </td>
+
+    <td>
+
+        Routing
+
+    </td>
 
     <td>
 
@@ -1298,7 +1345,6 @@ Use HTML tables to present tabular data.
     </td>
 
   </tr>
-
 </table>
 
 Here is the markup for this table.
@@ -1306,38 +1352,65 @@ Here is the markup for this table.
 ```html
 
 <style>
-
   td, th {vertical-align: top}
-
 </style>
 
 <table>
-
   <tr>
 
-    <th>Framework</th>
+    <th>
 
-    <th>Task</th>
+        Framework
 
-    <th>Speed</th>
+    </th>
+
+    <th>
+
+        Task
+
+    </th>
+
+    <th>
+
+        Speed
+
+    </th>
 
   </tr>
-
   <tr>
 
-    <td><code>AngularJS</code></td>
+    <td>
 
-    <td>Routing</td>
+        <code>AngularJS</code>
 
-    <td>Fast</td>
+    </td>
+
+    <td>
+
+        Routing
+
+    </td>
+
+    <td>
+
+        Fast
+
+    </td>
 
   </tr>
-
   <tr>
 
-    <td><code>Angular v2</code></td>
+    <td>
 
-    <td>Routing</td>
+        <code>Angular v2</code>
+
+    </td>
+
+    <td>
+
+        Routing
+
+    </td>
 
     <!-- can use markdown too; remember blank lines -->
 
@@ -1348,12 +1421,19 @@ Here is the markup for this table.
     </td>
 
   </tr>
-
   <tr>
 
-    <td><code>Angular v4</code></td>
+    <td>
 
-    <td>Routing</td>
+        <code>Angular v4</code>
+
+    </td>
+
+    <td>
+
+        Routing
+
+    </td>
 
     <td>
 
@@ -1362,7 +1442,6 @@ Here is the markup for this table.
     </td>
 
   </tr>
-
 </table>
 
 ```
@@ -1378,8 +1457,11 @@ Angular doc generation copies these image folders to the _runtime_ location, `ge
 Set the image `src` attribute to begin in _that_ directory.
 
 Here's the `src` attribute for the "flying hero" image belonging to this page.
+
 ```
+
 src="generated/images/guide/docs-style-guide/flying-hero.png"
+
 ```
 
 <h3 class="no-toc">Use the HTML <i>&lt;img&gt;</i> tag</h3>
@@ -1395,18 +1477,14 @@ You should nest the `<img>` tag within a `<figure>` tag, which styles the image
 Here's a conforming example
 
 <figure>
-
   <img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying hero">
-
 </figure>
 
 ```html
 
 <figure>
-
   <img src="generated/images/guide/docs-style-guide/flying-hero.png"
        alt="flying hero">
-
 </figure>
 
 ```
@@ -1420,19 +1498,15 @@ The doc generator reads the image dimensions from the file and adds width and he
 Here's the "flying hero" at a more reasonable scale.
 
 <figure>
-
  <img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="200">
-
 </figure>
 
 ```html
 
 <figure>
-
  <img src="generated/images/guide/docs-style-guide/flying-hero.png"
    alt="flying Angular hero"
    width="200">
-
 </figure>
 
 ```
@@ -1442,13 +1516,9 @@ Wide images can be a problem. Most browsers try to rescale the image but wide im
 **Do not set a width greater than 700px**. If you wish to display a larger image, provide a link to the actual image that the user can click on to see the full size image separately as in this example of `source-map-explorer` output from the "Ahead-of-time Compilation" guide:
 
 <a href="generated/images/guide/docs-style-guide/toh-pt6-bundle.png" title="Click to view larger image">
-
   <figure>
-
     <img src="generated/images/guide/docs-style-guide/toh-pt6-bundle-700w.png" alt="toh-pt6-bundle" width="300px">
-
   </figure>
-
 </a>
 
 <h3 class="no-toc">Image compression</h3>
@@ -1474,6 +1544,7 @@ Headings and code-examples automatically clear a floating image. If you need to
 The markup for the above example is:
 
 ```html
+
 <img src="generated/images/guide/docs-style-guide/flying-hero.png"
    alt="flying Angular hero"
    width="200"