fix: migrate guide/components markdown files

Author: lacolaco

adev-ja/src/content/guide/components/anatomy-of-components.en.md

@@ -11,41 +11,41 @@ Every component must have:
 
 You provide Angular-specific information for a component by adding a `@Component` [decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) on top of the TypeScript class:
 
-<docs-code language="angular-ts" highlight="[1, 2, 3, 4]">
+```angular-ts {highlight: [1, 2, 3, 4]}
 @Component({
   selector: 'profile-photo',
   template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
 })
 export class ProfilePhoto { }
-</docs-code>
+```
 
 For full details on writing Angular templates, including data binding, event handling, and control flow, see the [Templates guide](guide/templates).
 
 The object passed to the `@Component` decorator is called the component's **metadata**. This includes the `selector`, `template`, and other properties described throughout this guide.
 
 Components can optionally include a list of CSS styles that apply to that component's DOM:
 
-<docs-code language="angular-ts" highlight="[4]">
+```angular-ts {highlight: [4]}
 @Component({
   selector: 'profile-photo',
   template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
   styles: `img { border-radius: 50%; }`,
 })
 export class ProfilePhoto { }
-</docs-code>
+```
 
 By default, a component's styles only affect elements defined in that component's template. See [Styling Components](guide/components/styling) for details on Angular's approach to styling.
 
 You can alternatively choose to write your template and styles in separate files:
 
-<docs-code language="angular-ts" highlight="[3, 4]">
+```ts {highlight: [3,4]}
 @Component({
   selector: 'profile-photo',
   templateUrl: 'profile-photo.html',
   styleUrl: 'profile-photo.css',
 })
 export class ProfilePhoto { }
-</docs-code>
+```
 
 This can help separate the concerns of _presentation_ from _behavior_ in your project. You can choose one approach for your entire project, or you decide which to use for each component.
 
@@ -78,19 +78,19 @@ Important: In Angular versions before 19.0.0, the `standalone` option defaults t
 
 Every component defines a [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors):
 
-<docs-code language="angular-ts" highlight="[2]">
+```angular-ts {highlight: [2]}
 @Component({
   selector: 'profile-photo',
   ...
 })
 export class ProfilePhoto { }
-</docs-code>
+```
 
 See [Component Selectors](guide/components/selectors) for details about which types of selectors Angular supports and guidance on choosing a selector.
 
 You show a component by creating a matching HTML element in the template of _other_ components:
 
-<docs-code language="angular-ts" highlight="[8]">
+```angular-ts {highlight: [8]}
 @Component({
   selector: 'profile-photo',
 })
@@ -101,7 +101,7 @@ imports: [ProfilePhoto],
 template: `<profile-photo />`
 })
 export class UserProfile { }
-</docs-code>
+```
 
 Angular creates an instance of the component for every matching HTML element it encounters. The DOM element that matches a component's selector is referred to as that component's **host element**. The contents of a component's template are rendered inside its host element.
 

adev-ja/src/content/guide/components/anatomy-of-components.md

@@ -11,41 +11,41 @@ TIP: このガイドでは、すでに[基本ガイド](essentials)を読んで
 
 TypeScriptクラスの上部に `@Component` [デコレーター](https://www.typescriptlang.org/docs/handbook/decorators.html) を追加することで、コンポーネントにAngular固有の情報を与えます。
 
-<docs-code language="angular-ts" highlight="[1, 2, 3, 4]">
+```angular-ts {highlight: [1, 2, 3, 4]}
 @Component({
   selector: 'profile-photo',
   template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
 })
 export class ProfilePhoto { }
-</docs-code>
+```
 
 データバインディング、イベント処理、制御フローなど、Angularテンプレート作成に関する詳細は、[テンプレートガイド](guide/templates)を参照してください。
 
 `@Component` デコレーターに渡されるオブジェクトは、コンポーネントの**メタデータ**と呼ばれます。これには、このガイドで説明されている `selector`、`template`、その他のプロパティが含まれています。
 
 コンポーネントには、オプションでそのコンポーネントのDOMに適用されるCSSスタイルのリストを含めることができます。
 
-<docs-code language="angular-ts" highlight="[4]">
+```angular-ts {highlight: [4]}
 @Component({
   selector: 'profile-photo',
   template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
   styles: `img { border-radius: 50%; }`,
 })
 export class ProfilePhoto { }
-</docs-code>
+```
 
 デフォルトでは、コンポーネントのスタイルは、そのコンポーネントのテンプレートで定義された要素にのみ影響を与えます。Angularのスタイリングアプローチの詳細については、[コンポーネントのスタイリング](guide/components/styling)を参照してください。
 
 テンプレートとスタイルを別々のファイルにも記述できます。
 
-<docs-code language="angular-ts" highlight="[3, 4]">
+```ts {highlight: [3,4]}
 @Component({
   selector: 'profile-photo',
   templateUrl: 'profile-photo.html',
   styleUrl: 'profile-photo.css',
 })
 export class ProfilePhoto { }
-</docs-code>
+```
 
 これにより、プロジェクト内の_表示_と_動作_の懸念事項を分離できます。プロジェクト全体に対して1つのアプローチを選択するか、コンポーネントごとにどちらを使用するかを決定できます。
 
@@ -78,19 +78,19 @@ IMPORTANT: 19.0.0より前のAngularバージョンでは、`standalone`オプ
 
 すべてのコンポーネントは[CSSセレクター](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)を定義します。
 
-<docs-code language="angular-ts" highlight="[2]">
+```angular-ts {highlight: [2]}
 @Component({
   selector: 'profile-photo',
   ...
 })
 export class ProfilePhoto { }
-</docs-code>
+```
 
 Angularがサポートするセレクターの種類と、セレクターの選択に関するガイダンスについては、[コンポーネントセレクター](guide/components/selectors)を参照してください。
 
 _他の_コンポーネントのテンプレートで一致するHTML要素を作成することで、コンポーネントを表示します。
 
-<docs-code language="angular-ts" highlight="[8]">
+```angular-ts {highlight: [8]}
 @Component({
   selector: 'profile-photo',
 })
@@ -101,7 +101,7 @@ imports: [ProfilePhoto],
 template: `<profile-photo />`
 })
 export class UserProfile { }
-</docs-code>
+```
 
 Angularは、遭遇する一致するHTML要素ごとにコンポーネントのインスタンスを作成します。コンポーネントのセレクターと一致するDOM要素は、そのコンポーネントの**ホスト要素**と呼ばれます。コンポーネントのテンプレートの内容はそのホスト要素内にレンダリングされます。
 

adev-ja/src/content/guide/components/content-projection.en.md

@@ -95,7 +95,7 @@ export class CardBody {}
 
 ```angular-ts
 <!-- Component template -->
-Component({
+@Component({
   selector: 'custom-card',
   template: `
   <div class="card-shadow">
@@ -218,7 +218,7 @@ placeholder, Angular compares against the `ngProjectAs` value instead of the ele
 <div class="card-shadow">
   <ng-content select="card-title"></ng-content>
   <div class="card-divider"></div>
-  <ng-content></ng-content>
+  <ng-content />
 </div>
 ```
 

adev-ja/src/content/guide/components/content-projection.md

@@ -95,7 +95,7 @@ export class CardBody {}
 
 ```angular-ts
 <!-- コンポーネントテンプレート -->
-Component({
+@Component({
   selector: 'custom-card',
   template: `
   <div class="card-shadow">
@@ -218,7 +218,7 @@ Angularは要素のIDではなく`ngProjectAs`の値と比較します。
 <div class="card-shadow">
   <ng-content select="card-title"></ng-content>
   <div class="card-divider"></div>
-  <ng-content></ng-content>
+  <ng-content />
 </div>
 ```
 

adev-ja/src/content/guide/components/queries.en.md

@@ -15,7 +15,7 @@ There are two categories of query: **view queries** and **content queries.**
 
 View queries retrieve results from the elements in the component's _view_ — the elements defined in the component's own template. You can query for a single result with the `viewChild` function.
 
-```typescript {highlight: [14, 15]}
+```angular-ts {highlight: [14, 15]}
 @Component({
   selector: 'custom-card-header',
   /*...*/
@@ -40,7 +40,7 @@ If the query does not find a result, its value is `undefined`. This may occur if
 
 You can also query for multiple results with the `viewChildren` function.
 
-```typescript {highlight: [17]}
+```angular-ts {highlight: [17]}
 @Component({
   selector: 'custom-card-action',
   /*...*/
@@ -51,13 +51,14 @@ export class CustomCardAction {
 
 @Component({
   selector: 'custom-card',
-  template: `<custom-card-action>Save</custom-card-action>
+  template: `
+    <custom-card-action>Save</custom-card-action>
     <custom-card-action>Cancel</custom-card-action>
   `,
 })
 export class CustomCard {
   actions = viewChildren(CustomCardAction);
-  actionsTexts = computed(() => this.actions().map(action => action.text);
+  actionsTexts = computed(() => this.actions().map(action => action.text));
 }
 ```
 
@@ -69,7 +70,7 @@ export class CustomCard {
 
 Content queries retrieve results from the elements in the component's _content_— the elements nested inside the component in the template where it's used. You can query for a single result with the `contentChild` function.
 
-```typescript {highlight: [14, 15]}
+```angular-ts {highlight: [14, 15]}
 @Component({
   selector: 'custom-toggle',
   /*...*/
@@ -106,7 +107,7 @@ By default, content queries find only _direct_ children of the component and do
 
 You can also query for multiple results with the `contentChildren` function.
 
-```typescript {highlight: [14, 16, 17, 18, 19, 20]}
+```angular-ts {highlight: [14, 16, 17, 18, 19, 20]}
 @Component({
   selector: 'custom-menu-item',
   /*...*/
@@ -147,7 +148,7 @@ If a child query (`viewChild` or `contentChild`) does not find a result, its val
 
 In some cases, especially with `viewChild`, you know with certainty that a specific child is always available. In other cases, you may want to strictly enforce that a specific child is present. For these cases, you can use a _required query_.
 
-```angular-ts
+```ts
 @Component({/* ... */})
 export class CustomCard {
   header = viewChild.required(CustomCardHeader);
@@ -232,7 +233,7 @@ Developers most commonly use `read` to retrieve `ElementRef` and `TemplateRef`.
 By default, `contentChildren` queries find only _direct_ children of the component and do not traverse into descendants.
 `contentChild` queries do traverse into descendants by default.
 
-```typescript {highlight: [13, 14, 15, 16]}
+```angular-ts {highlight: [13, 14, 15, 16]}
 @Component({
   selector: 'custom-expando',
   /*...*/
@@ -244,7 +245,8 @@ export class CustomExpando {
 
 @Component({
   selector: 'user-profile',
-  template: `     <custom-expando>
+  template: `
+    <custom-expando>
       <some-other-component>
         <custom-toggle>Show</custom-toggle>
       </some-other-component>
@@ -269,7 +271,7 @@ You can alternatively declare queries by adding the corresponding decorator to a
 
 You can query for a single result with the `@ViewChild` decorator.
 
-```typescript {highlight: [14, 16, 17, 18]}
+```angular-ts {highlight: [14, 16, 17, 18]}
 @Component({
   selector: 'custom-card-header',
   /*...*/
@@ -299,7 +301,7 @@ Angular keeps the result of `@ViewChild` up to date as your application state ch
 
 You can also query for multiple results with the `@ViewChildren` decorator.
 
-```typescript {highlight: [17, 19, 20, 21, 22, 23]}
+```angular-ts {highlight: [17, 19, 20, 21, 22, 23]}
 @Component({
   selector: 'custom-card-action',
   /*...*/
@@ -332,7 +334,7 @@ export class CustomCard {
 
 You can query for a single result with the `@ContentChild` decorator.
 
-```typescript {highlight: [14, 16, 17, 18, 25]}
+```angular-ts {highlight: [14, 16, 17, 18, 25]}
 @Component({
   selector: 'custom-toggle',
   /*...*/
@@ -373,7 +375,7 @@ Angular keeps the result of `@ContentChild` up to date as your application state
 
 You can also query for multiple results with the `@ContentChildren` decorator.
 
-```typescript {highlight: [15, 17, 18, 19, 20, 21]}
+```angular-ts {highlight: [15, 17, 18, 19, 20, 21]}
 @Component({
   selector: 'custom-menu-item',
   /*...*/