Support formatting angular syntax in markdown (#18519)

tests/format/markdown/code/angular/__snapshots__/format.test.js.snap

@@ -0,0 +1,294 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`angular-html.md - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["markdown"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+\`\`\`angular-html
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+\`\`\`
+
+=====================================output=====================================
+\`\`\`angular-html
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+\`\`\`
+
+================================================================================
+`;
+
+exports[`angular-html.md format 1`] = `
+====================================options=====================================
+parsers: ["markdown"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+\`\`\`angular-html
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+\`\`\`
+
+=====================================output=====================================
+\`\`\`angular-html
+@if (orderForm.couponCode().disabled()) {
+  <div class="info">
+    @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+      <p>{{ reason.message }}</p>
+    }
+  </div>
+}
+\`\`\`
+
+================================================================================
+`;
+
+exports[`angular-html-invalid.md - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["markdown"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+\`\`\`angular-html
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+\`\`\`
+
+=====================================output=====================================
+\`\`\`angular-html
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+\`\`\`
+
+================================================================================
+`;
+
+exports[`angular-html-invalid.md format 1`] = `
+====================================options=====================================
+parsers: ["markdown"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+\`\`\`angular-html
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+\`\`\`
+
+=====================================output=====================================
+\`\`\`angular-html
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+\`\`\`
+
+================================================================================
+`;
+
+exports[`angular-ts.md - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["markdown"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+\`\`\`angular-ts
+type A ={
+        Ugly:string
+}
+
+@Component({template: \`
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+  \`
+})
+export class Order {
+}
+\`\`\`
+
+=====================================output=====================================
+\`\`\`angular-ts
+type A ={
+        Ugly:string
+}
+
+@Component({template: \`
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+  \`
+})
+export class Order {
+}
+\`\`\`
+
+================================================================================
+`;
+
+exports[`angular-ts.md format 1`] = `
+====================================options=====================================
+parsers: ["markdown"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+\`\`\`angular-ts
+type A ={
+        Ugly:string
+}
+
+@Component({template: \`
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+  \`
+})
+export class Order {
+}
+\`\`\`
+
+=====================================output=====================================
+\`\`\`angular-ts
+type A = {
+  Ugly: string;
+};
+
+@Component({
+  template: \`
+    @if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (
+          reason of orderForm.couponCode().disabledReasons();
+          track reason
+        ) {
+          <p>{{ reason.message }}</p>
+        }
+      </div>
+    }
+  \`,
+})
+export class Order {}
+\`\`\`
+
+================================================================================
+`;
+
+exports[`angular-ts-invalid.md - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["markdown"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+\`\`\`angular-ts
+        Ugly:string
+}
+
+@Component({template: \`
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+  \`
+})
+export class Order {
+}
+\`\`\`
+
+=====================================output=====================================
+\`\`\`angular-ts
+        Ugly:string
+}
+
+@Component({template: \`
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+  \`
+})
+export class Order {
+}
+\`\`\`
+
+================================================================================
+`;
+
+exports[`angular-ts-invalid.md format 1`] = `
+====================================options=====================================
+parsers: ["markdown"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+\`\`\`angular-ts
+        Ugly:string
+}
+
+@Component({template: \`
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+  \`
+})
+export class Order {
+}
+\`\`\`
+
+=====================================output=====================================
+\`\`\`angular-ts
+        Ugly:string
+}
+
+@Component({template: \`
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+  \`
+})
+export class Order {
+}
+\`\`\`
+
+================================================================================
+`;

tests/format/markdown/code/angular/angular-html-invalid.md

@@ -0,0 +1,6 @@
+```angular-html
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+```

tests/format/markdown/code/angular/angular-html.md

@@ -0,0 +1,8 @@
+```angular-html
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+```

tests/format/markdown/code/angular/angular-ts-invalid.md

@@ -0,0 +1,16 @@
+```angular-ts
+        Ugly:string
+}
+
+@Component({template: `
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+  `
+})
+export class Order {
+}
+```

tests/format/markdown/code/angular/angular-ts.md

@@ -0,0 +1,17 @@
+```angular-ts
+type A ={
+        Ugly:string
+}
+
+@Component({template: `
+@if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+<p>{{ reason.message }}</p>
+        }</div>
+    }
+  `
+})
+export class Order {
+}
+```

tests/format/markdown/code/angular/format.test.js

@@ -0,0 +1,2 @@
+runFormatTest(import.meta, ["markdown"]);
+runFormatTest(import.meta, ["markdown"], { embeddedLanguageFormatting: "off" });