refactor(docs-infra): simplify code snippet indentation in the "Cheat sheet" guide (#41051)

Previously, the indentation of code snippets in the "Cheat sheet" guide
was done using `<br>` elements (for line breaks) and `&emsp;` HTML
entities (for space). This was laborious and put the onus on the author
to remember to use these symbols (instead of regular whitespace
characters).
(Discussed in
https://github.com/angular/angular/pull/41051#discussion_r585651621.)

This commit changes the way `<code>` elements are styles inside the
"Cheat sheet" guide to allow using regular whitespace characters in code
snippets. It also changes all `<br>`/`&emsp;` occurrences to `\n`/`  `
respectively to make code snippets more readable in the source code.

PR Close #41051

aio/content/guide/cheatsheet.md

@@ -24,7 +24,12 @@
 </th>
 </tr>
 <tr>
-<td><code>@<b>NgModule</b>({<br>&emsp;declarations: ..., imports: ..., exports: ...,<br>&emsp;providers: ..., bootstrap: ...<br>})<br>class MyModule {}</code></td>
+<td><code>@<b>NgModule</b>({
+  declarations: ..., imports: ..., exports: ...,
+  providers: ..., bootstrap: ...
+})
+class MyModule {}
+</code></td>
 <td><p>Defines a module that contains components, directives, pipes, and providers.</p>
 </td>
 </tr><tr>
@@ -93,7 +98,9 @@ is available to <code>declarations</code> of this module.</p>
 <td><p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]="name" (titleChange)="name=$event"&gt;</code></p>
 </td>
 </tr><tr>
-<td><code>&lt;video <b>#movieplayer</b> ...&gt;&lt;/video&gt;<br>&lt;button <b>(click)</b>="movieplayer.play()"&gt;Play&lt;/button&gt;</code></td>
+<td><code>&lt;video <b>#movieplayer</b> ...&gt;&lt;/video&gt;
+&lt;button <b>(click)</b>="movieplayer.play()"&gt;Play&lt;/button&gt;
+</code></td>
 <td><p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>
 </td>
 </tr><tr>
@@ -114,7 +121,10 @@ is available to <code>declarations</code> of this module.</p>
 <td><p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>
 </td>
 </tr><tr>
-<td><code>&lt;<b>svg</b>&gt;<br>&emsp;&lt;rect x="0" y="0" width="100" height="100"/&gt;<br>&lt;/<b>svg</b>&gt;</code></td>
+<td><code>&lt;<b>svg</b>&gt;
+  &lt;rect x="0" y="0" width="100" height="100"/&gt;
+&lt;/<b>svg</b>&gt;
+</code></td>
 <td><p>An <code>&lt;svg&gt;</code> root element is detected as an SVG element automatically, without the prefix.</p>
 </td>
 </tr>
@@ -136,7 +146,12 @@ is available to <code>declarations</code> of this module.</p>
 <td><p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div <b>[ngSwitch]</b>="conditionExpression"&gt;<br>&emsp;&lt;ng-template <b>[<b>ngSwitchCase</b>]</b>="case1Exp"&gt;...&lt;/ng-template&gt;<br>&emsp;&lt;ng-template <b>ngSwitchCase</b>="case2LiteralString"&gt;...&lt;/ng-template&gt;<br>&emsp;&lt;ng-template <b>ngSwitchDefault</b>&gt;...&lt;/ng-template&gt;<br>&lt;/div&gt;</code></td>
+<td><code>&lt;div <b>[ngSwitch]</b>="conditionExpression"&gt;
+  &lt;ng-template <b>[<b>ngSwitchCase</b>]</b>="case1Exp"&gt;...&lt;/ng-template&gt;
+  &lt;ng-template <b>ngSwitchCase</b>="case2LiteralString"&gt;...&lt;/ng-template&gt;
+  &lt;ng-template <b>ngSwitchDefault</b>&gt;...&lt;/ng-template&gt;
+&lt;/div&gt;
+</code></td>
 <td><p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>
 </td>
 </tr><tr>
@@ -145,7 +160,9 @@ is available to <code>declarations</code> of this module.</p>
 </td>
 </tr>
 <tr>
-<td><code>&lt;div <b>[ngStyle]</b>="{'property': 'value'}"&gt;</code><br><code>&lt;div <b>[ngStyle]</b>="dynamicStyles()"&gt;</code></td>
+<td><code>&lt;div <b>[ngStyle]</b>="{'property': 'value'}"&gt;
+&lt;div <b>[ngStyle]</b>="dynamicStyles()"&gt;
+</code></td>
 <td><p>Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.</p>
 </td>
 </tr>
@@ -173,19 +190,27 @@ is available to <code>declarations</code> of this module.</p>
 </th>
 </tr>
 <tr>
-<td><code><b>@Component({...})</b><br>class MyComponent() {}</code></td>
+<td><code><b>@Component({...})</b>
+class MyComponent() {}
+</code></td>
 <td><p>Declares that a class is a component and provides metadata about the component.</p>
 </td>
 </tr><tr>
-<td><code><b>@Directive({...})</b><br>class MyDirective() {}</code></td>
+<td><code><b>@Directive({...})</b>
+class MyDirective() {}
+</code></td>
 <td><p>Declares that a class is a directive and provides metadata about the directive.</p>
 </td>
 </tr><tr>
-<td><code><b>@Pipe({...})</b><br>class MyPipe() {}</code></td>
+<td><code><b>@Pipe({...})</b>
+class MyPipe() {}
+</code></td>
 <td><p>Declares that a class is a pipe and provides metadata about the pipe.</p>
 </td>
 </tr><tr>
-<td><code><b>@Injectable()</b><br>class MyService() {}</code></td>
+<td><code><b>@Injectable()</b>
+class MyService() {}
+</code></td>
 <td><p>Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere.</p>
 </td>
 </tr>
@@ -228,11 +253,15 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 <td><p>List of dependency injection providers scoped to this component's view.</p>
 </td>
 </tr><tr>
-<td><code><b>template:</b> 'Hello {{name}}'<br><b>templateUrl:</b> 'my-component.html'</code></td>
+<td><code><b>template:</b> 'Hello {{name}}'
+<b>templateUrl:</b> 'my-component.html'
+</code></td>
 <td><p>Inline template or external template URL of the component's view.</p>
 </td>
 </tr><tr>
-<td><code><b>styles:</b> ['.primary {color: red}']<br><b>styleUrls:</b> ['my-component.css']</code></td>
+<td><code><b>styles:</b> ['.primary {color: red}']
+<b>styleUrls:</b> ['my-component.css']
+</code></td>
 <td><p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>
 </td>
 </tr>
@@ -355,15 +384,32 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </th>
 </tr>
 <tr>
-<td><code>const routes: <b>Routes</b> = [<br>&emsp;{ path: '', component: HomeComponent },<br>&emsp;{ path: 'path/:routeParam', component: MyComponent },<br>&emsp;{ path: 'staticPath', component: ... },<br>&emsp;{ path: '**', component: ... },<br>&emsp;{ path: 'oldPath', redirectTo: '/staticPath' },<br>&emsp;{ path: ..., component: ..., data: { message: 'Custom' } }<br>]);<br><br>const routing = RouterModule.forRoot(routes);</code></td>
+<td><code>const routes: <b>Routes</b> = [
+  { path: '', component: HomeComponent },
+  { path: 'path/:routeParam', component: MyComponent },
+  { path: 'staticPath', component: ... },
+  { path: '**', component: ... },
+  { path: 'oldPath', redirectTo: '/staticPath' },
+  { path: ..., component: ..., data: { message: 'Custom' } }
+]);
+
+const routing = RouterModule.forRoot(routes);
+</code></td>
 <td><p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>
 </td>
 </tr><tr>
-<td><code><br>&lt;<b>router-outlet</b>&gt;&lt;/<b>router-outlet</b>&gt;<br>&lt;<b>router-outlet</b> name="aux"&gt;&lt;/<b>router-outlet</b>&gt;<br></code></td>
+<td><code>&lt;<b>router-outlet</b>&gt;&lt;/<b>router-outlet</b>&gt;
+&lt;<b>router-outlet</b> name="aux"&gt;&lt;/<b>router-outlet</b>&gt;
+</code></td>
 <td><p>Marks the location to load the component of the active route.</p>
 </td>
 </tr><tr>
-<td><code><br>&lt;a <b>routerLink</b>="/path"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path', routeParam ]"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path', { matrixParam: 'value' } ]"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path' ]" [queryParams]="{ page: 1 }"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path' ]" fragment="anchor"&gt;<br></code></td>
+<td><code>&lt;a <b>routerLink</b>="/path"&gt;
+&lt;a <b>[routerLink]</b>="[ '/path', routeParam ]"&gt;
+&lt;a <b>[routerLink]</b>="[ '/path', { matrixParam: 'value' } ]"&gt;
+&lt;a <b>[routerLink]</b>="[ '/path' ]" [queryParams]="{ page: 1 }"&gt;
+&lt;a <b>[routerLink]</b>="[ '/path' ]" fragment="anchor"&gt;
+</code></td>
 <td><p>Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>
 </td>
 </tr><tr>
@@ -371,23 +417,64 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 <td><p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>
 </td>
 </tr><tr>
-<td><code>class <b>CanActivate</b>Guard implements <b>CanActivate</b> {<br>&emsp;canActivate(<br>&emsp;&emsp;route: ActivatedRouteSnapshot,<br>&emsp;&emsp;state: RouterStateSnapshot<br>&emsp;):&nbsp;Observable&lt;boolean|UrlTree&gt;|Promise&lt;boolean|UrlTree&gt;|boolean|UrlTree { ... }<br>}<br><br>{ path: ..., canActivate: [<b>CanActivate</b>Guard] }</code></td>
+<td><code>class <b>CanActivate</b>Guard implements <b>CanActivate</b> {
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable&lt;boolean|UrlTree&gt;|Promise&lt;boolean|UrlTree&gt;|boolean|UrlTree { ... }
+}
+
+{ path: ..., canActivate: [<b>CanActivate</b>Guard] }
+</code></td>
 <td><p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
 </td>
 </tr><tr>
-<td><code>class <b>CanDeactivate</b>Guard implements <b>CanDeactivate</b>&lt;T&gt; {<br>&emsp;canDeactivate(<br>&emsp;&emsp;component: T,<br>&emsp;&emsp;route: ActivatedRouteSnapshot,<br>&emsp;&emsp;state: RouterStateSnapshot<br>&emsp;):&nbsp;Observable&lt;boolean|UrlTree&gt;|Promise&lt;boolean|UrlTree&gt;|boolean|UrlTree { ... }<br>}<br><br>{ path: ..., canDeactivate: [<b>CanDeactivate</b>Guard] }</code></td>
+<td><code>class <b>CanDeactivate</b>Guard implements <b>CanDeactivate</b>&lt;T&gt; {
+  canDeactivate(
+    component: T,
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable&lt;boolean|UrlTree&gt;|Promise&lt;boolean|UrlTree&gt;|boolean|UrlTree { ... }
+}
+
+{ path: ..., canDeactivate: [<b>CanDeactivate</b>Guard] }
+</code></td>
 <td><p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
 </td>
 </tr><tr>
-<td><code>class <b>CanActivateChild</b>Guard implements <b>CanActivateChild</b> {<br>&emsp;canActivateChild(<br>&emsp;&emsp;route: ActivatedRouteSnapshot,<br>&emsp;&emsp;state: RouterStateSnapshot<br>&emsp;):&nbsp;Observable&lt;boolean|UrlTree&gt;|Promise&lt;boolean|UrlTree&gt;|boolean|UrlTree { ... }<br>}<br><br>{ path: ..., canActivateChild: [CanActivateGuard],<br>&emsp;children: ... }</code></td>
+<td><code>class <b>CanActivateChild</b>Guard implements <b>CanActivateChild</b> {
+  canActivateChild(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable&lt;boolean|UrlTree&gt;|Promise&lt;boolean|UrlTree&gt;|boolean|UrlTree { ... }
+}
+
+{ path: ..., canActivateChild: [CanActivateGuard],
+  children: ... }
+</code></td>
 <td><p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
 </td>
 </tr><tr>
-<td><code>class <b>Resolve</b>Guard implements <b>Resolve</b>&lt;T&gt; {<br>&emsp;resolve(<br>&emsp;&emsp;route: ActivatedRouteSnapshot,<br>&emsp;&emsp;state: RouterStateSnapshot<br>&emsp;): Observable&lt;any&gt;|Promise&lt;any&gt;|any { ... }<br>}<br><br>{ path: ..., resolve: [<b>Resolve</b>Guard] }</code></td>
+<td><code>class <b>Resolve</b>Guard implements <b>Resolve</b>&lt;T&gt; {
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable&lt;any&gt;|Promise&lt;any&gt;|any { ... }
+}
+
+{ path: ..., resolve: [<b>Resolve</b>Guard] }
+</code></td>
 <td><p>An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.</p>
 </td>
 </tr><tr>
-<td><code>class <b>CanLoad</b>Guard implements <b>CanLoad</b> {<br>&emsp;canLoad(<br>&emsp;&emsp;route: Route<br>&emsp;):&nbsp;Observable&lt;boolean|UrlTree&gt;|Promise&lt;boolean|UrlTree&gt;|boolean|UrlTree { ... }<br>}<br><br>{ path: ..., canLoad: [<b>CanLoad</b>Guard], loadChildren: ... }</code></td>
+<td><code>class <b>CanLoad</b>Guard implements <b>CanLoad</b> {
+  canLoad(
+    route: Route
+  ): Observable&lt;boolean|UrlTree&gt;|Promise&lt;boolean|UrlTree&gt;|boolean|UrlTree { ... }
+}
+
+{ path: ..., canLoad: [<b>CanLoad</b>Guard], loadChildren: ... }
+</code></td>
 <td><p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
 </td>
 </tr>

aio/src/styles/2-modules/_code.scss

@@ -182,6 +182,7 @@ aio-code {
       code {
         background-color: inherit;
         padding: 0;
+        white-space: pre-wrap;
       }
     }
   }