fix: add line break before all figure

aio/content/guide/animations.md

@@ -216,7 +216,9 @@ transitions that apply regardless of which state the animation is in. For exampl
 * The `* => *` transition applies when *any* change between two states takes place.
 
 
-当在*任意*两个状态之间切换时，`* => *`转场都会生效。<figure >
+  当在*任意*两个状态之间切换时，`* => *`转场都会生效。
+
+<figure >
   <img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400">
 </figure>
 
@@ -236,7 +238,9 @@ For example the `* => void` transition applies when the element leaves the view,
 regardless of what state it was in before it left.
 
 
-比如当一个元素离开视图时，`* => void`转场就会生效，而不管它在离场以前是什么状态。<figure >
+比如当一个元素离开视图时，`* => void`转场就会生效，而不管它在离场以前是什么状态。
+
+<figure >
   <img src="generated/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400">
 </figure>
 
@@ -327,7 +331,9 @@ is:
 This gives you fine-grained control over each transition:
 
 
-现在就对每一种转场都有了细粒度的控制：<figure >
+现在就对每一种转场都有了细粒度的控制：
+
+<figure >
   <img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400">
 </figure>
 

aio/content/guide/attribute-directives.md

@@ -223,7 +223,9 @@ recognizes the directive when it encounters `myHighlight` in the template.
 Now when the app runs, the `myHighlight` directive highlights the paragraph text.
 
 
-运行应用，就会看到我们的指令确实高亮了段落中的文本。<figure >
+运行应用，就会看到我们的指令确实高亮了段落中的文本。
+
+<figure >
   <img src="generated/images/guide/attribute-directives/first-highlight.png" alt="First Highlight">
 </figure>
 
@@ -559,7 +561,9 @@ Revise the `AppComponent.color` so that it has no initial value.
 Here are the harness and directive in action.
 
 
-下面是测试程序和指令的动图。<figure >
+下面是测试程序和指令的动图。
+
+<figure >
   <img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
 </figure>
 
@@ -625,7 +629,9 @@ Angular之所以知道`defaultColor`绑定属于`HighlightDirective`，是因为
 Here's how the harness should work when you're done coding.
 
 
-当这些代码完成时，测试程序工作时的动图如下：<figure >
+当这些代码完成时，测试程序工作时的动图如下：
+
+<figure >
   <img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
 </figure>
 

aio/content/guide/lifecycle-hooks.md

@@ -536,9 +536,13 @@ The heroes will never know they're being watched.
 
   Kidding aside, pay attention to two key points:
 
-不开玩笑了，注意下面两个关键点：1. Angular calls hook methods for *directives* as well as components.<br><br>
+不开玩笑了，注意下面两个关键点：
 
-就像对组件一样，Angular也会对*指令*调用这些钩子方法。2. A spy directive can provide insight into a DOM object that you cannot change directly.
+1. Angular calls hook methods for *directives* as well as components.<br><br>
+
+    就像对组件一样，Angular也会对*指令*调用这些钩子方法。
+
+2. A spy directive can provide insight into a DOM object that you cannot change directly.
 Obviously you can't touch the implementation of a native `<div>`.
 You can't modify a third party component either.
 But you can watch both with a directive.
@@ -576,7 +580,9 @@ Each spy's birth and death marks the birth and death of the attached hero `<div>
 with an entry in the *Hook Log* as seen here:
 
 
-每个“侦探”的出生和死亡也同时标记出了存放英雄的那个`<div>`的出生和死亡。*钩子记录*中的结构是这样的：<figure >
+每个“侦探”的出生和死亡也同时标记出了存放英雄的那个`<div>`的出生和死亡。*钩子记录*中的结构是这样的：
+
+<figure >
   <img src='generated/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive">
 </figure>
 
@@ -601,6 +607,8 @@ The `ngOnInit()` and `ngOnDestroy()` methods have more vital roles to play in re
 
 ### _OnInit()_
 
+### _OnInit()钩子_
+
 Use `ngOnInit()` for two main reasons:
 
 使用`ngOnInit()`有两个原因：
@@ -675,6 +683,8 @@ That's where the heavy initialization logic belongs.
 
 ### _OnDestroy()_
 
+### _OnDestroy()钩子_
+
 Put cleanup logic in `ngOnDestroy()`, the logic that *must* run before Angular destroys the directive.
 
 一些清理逻辑*必须*在Angular销毁指令之前运行，把它们放在`ngOnDestroy()`中。
@@ -700,7 +710,6 @@ You risk memory leaks if you neglect to do so.
 
 Angular calls its `ngOnChanges()` method whenever it detects changes to ***input properties*** of the component (or directive).
 
-在这个例子中，我们监听了`OnChanges`钩子。
 一旦检测到该组件(或指令)的***输入属性***发生了变化，Angular就会调用它的`ngOnChanges()`方法。
 
 This example monitors the `OnChanges` hook.
@@ -737,7 +746,9 @@ The host `OnChangesParentComponent` binds to them like this:
 Here's the sample in action as the user makes changes.
 
 
-下面是此例子中的当用户做出更改时的操作演示：<figure >
+下面是此例子中的当用户做出更改时的操作演示：
+
+<figure >
   <img src='generated/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges">
 </figure>
 
@@ -793,7 +804,9 @@ so you can see how often `DoCheck` is called. The results are illuminating:
 
 该代码检测一些**相关的值**，捕获当前值并与以前的值进行比较。
 当英雄或它的超能力发生了非实质性改变时，我们就往日志中写一条特殊的消息。
-这样你可以看到`DoCheck`被调用的频率。结果非常显眼：<figure >
+这样你可以看到`DoCheck`被调用的频率。结果非常显眼：
+
+<figure >
   <img src='generated/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck">
 </figure>
 
@@ -856,14 +869,12 @@ which can only be reached by querying for the child view via the property decora
 
 The `doSomething()` method updates the screen when the hero name exceeds 10 characters.
 
-
 当英雄的名字超过10个字符时，`doSomething()`方法就会更新屏幕。
 
 <code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="do-something" title="AfterViewComponent (doSomething)" linenums="false">
 
 </code-example>
 
-
 Why does the `doSomething()` method wait a tick before updating `comment`?
 
 为什么在更新`comment`属性之前，`doSomething()`方法要等上一拍(tick)？

aio/content/guide/template-syntax.md

@@ -2429,7 +2429,9 @@ The following contrived example forces the input value to uppercase:
 Here are all variations in action, including the uppercase version:
 
 
-这里是所有这些变体的动画，包括这个大写转换的版本：<figure >
+这里是所有这些变体的动画，包括这个大写转换的版本：
+
+<figure >
   <img src='generated/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations">
 </figure>
 
@@ -2799,7 +2801,9 @@ Here is an illustration of the _trackBy_ effect.
 * With `trackBy`, only changing the `id` triggers element replacement.
 
 
-有了`trackBy`，则只有修改了`id`的按钮才会触发元素替换。<figure >
+有了`trackBy`，则只有修改了`id`的按钮才会触发元素替换。
+
+<figure >
   <img src="generated/images/guide/template-syntax/ng-for-track-by-anim.gif" alt="trackBy">
 </figure>
 
@@ -3157,7 +3161,9 @@ Don't do both!
 The terms _input_ and _output_ reflect the perspective of the target directive.
 
 
-_输入_和_输出_这两个词是从目标指令的角度来说的。<figure >
+_输入_和_输出_这两个词是从目标指令的角度来说的。
+
+<figure >
   <img src="generated/images/guide/template-syntax/input-output.png" alt="Inputs and outputs">
 </figure>
 

aio/content/guide/upgrade.md

@@ -497,7 +497,9 @@ ways:
     projection together.
 
 
-通过透传(transclude)或投影(project)来自另一个框架的内容。`UpgradeModule`牵线搭桥，把AngularJS的透传概念和Angular的内容投影概念关联起来。<figure >
+通过透传(transclude)或投影(project)来自另一个框架的内容。`UpgradeModule`牵线搭桥，把AngularJS的透传概念和Angular的内容投影概念关联起来。
+
+<figure >
   <img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" >
 </figure>
 
@@ -564,7 +566,9 @@ AngularJS and Angular approaches. Here's what happens:
   detection after every event.
 
 
-`UpgradeModule`将在每一次离开Angular zone时调用AngularJS的`$rootScope.$apply()`。这样也就同样会在每个事件之后触发AngularJS的变更检测。<figure >
+`UpgradeModule`将在每一次离开Angular zone时调用AngularJS的`$rootScope.$apply()`。这样也就同样会在每个事件之后触发AngularJS的变更检测。
+
+<figure >
   <img src="generated/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" >
 </figure>
 

aio/content/tutorial/toh-pt6.md

@@ -934,7 +934,9 @@ If you enter characters that match any existing hero names, you'll see something
 
 
 再次运行该应用，跳转到*仪表盘*，并在英雄下方的搜索框里输入一些文本。
-运行效果如下：<figure >
+运行效果如下：
+
+<figure >
   <img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component">
 </figure>