Support formatting angular syntax in markdown (#18519)

changelog_unreleased/markdown/18519.md

@@ -0,0 +1,37 @@
+#### Support formatting Angular syntax in code block (#18519 by @fisker)
+
+<!-- prettier-ignore -->
+````md
+<!-- Input -->
+```angular-ts
+@Component({
+  selector: 'app-root',
+  template: `<div
+>Welcome to {{
+  Angular}}! </div>`,
+})
+export class App {}
+```
+
+```angular-html
+<div
+>Welcome to {{
+  Angular}}! </div>
+```
+
+<!-- Prettier stable -->
+Same as input
+
+<!-- Prettier main -->
+```angular-ts
+@Component({
+  selector: "app-root",
+  template: `<div>Welcome to {{ Angular }}!</div>`,
+})
+export class App {}
+```
+
+```angular-html
+<div>Welcome to {{ Angular }}!</div>
+```
+````

src/language-markdown/embed.js

@@ -13,7 +13,16 @@ function embed(path, options) {
         return;
       }
 
-      const parser = inferParser(options, { language });
+      let parser;
+      // https://shiki.style/references/engine-js-compat#supported-languages
+      if (language === "angular-ts") {
+        parser = inferParser(options, { language: "typescript" });
+      } else if (language === "angular-html") {
+        parser = "angular";
+      } else {
+        parser = inferParser(options, { language });
+      }
+
       if (!parser) {
         return;
       }

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" });