From 91f155f7f5bc088a01ab8243928c864bfb7d11b3 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Thu, 4 Jun 2026 18:19:19 +0800
Subject: [PATCH] Support formatting LWC syntax in markdown (#19291)

---
 changelog_unreleased/markdown/19291.md        | 18 ++++
 src/language-html/languages.evaluate.js       |  1 +
 .../lwc/__snapshots__/format.test.js.snap     | 97 +++++++++++++++++++
 tests/format/markdown/code/lwc/format.test.js |  2 +
 tests/format/markdown/code/lwc/lwc-invalid.md |  4 +
 tests/format/markdown/code/lwc/lwc.md         |  9 ++
 .../__snapshots__/support-info.js.snap        |  2 +-
 7 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 changelog_unreleased/markdown/19291.md
 create mode 100644 tests/format/markdown/code/lwc/__snapshots__/format.test.js.snap
 create mode 100644 tests/format/markdown/code/lwc/format.test.js
 create mode 100644 tests/format/markdown/code/lwc/lwc-invalid.md
 create mode 100644 tests/format/markdown/code/lwc/lwc.md

diff --git a/changelog_unreleased/markdown/19291.md b/changelog_unreleased/markdown/19291.md
new file mode 100644
index 000000000..ca442b639
--- /dev/null
+++ b/changelog_unreleased/markdown/19291.md
@@ -0,0 +1,18 @@
+#### Support formatting LWC (Lightning Web Components) syntax in code block (#19291 by @fisker)
+
+<!-- prettier-ignore -->
+````md
+<!-- Input -->
+```lwc
+<test-this attr={test}>
+    Awesome </test-this>
+```
+
+<!-- Prettier stable -->
+Same as input
+
+<!-- Prettier main -->
+```lwc
+<test-this attr={test}> Awesome </test-this>
+```
+````
diff --git a/src/language-html/languages.evaluate.js b/src/language-html/languages.evaluate.js
index 800abe822..40447c114 100644
--- a/src/language-html/languages.evaluate.js
+++ b/src/language-html/languages.evaluate.js
@@ -19,6 +19,7 @@ const languages = [
     vscodeLanguageIds: ["html"],
     extensions: [],
     filenames: [],
+    aliases: ["LWC", "lwc"],
   })),
   createLanguage(linguistLanguages.HTML, () => ({
     name: "MJML",
diff --git a/tests/format/markdown/code/lwc/__snapshots__/format.test.js.snap b/tests/format/markdown/code/lwc/__snapshots__/format.test.js.snap
new file mode 100644
index 000000000..c4b158c24
--- /dev/null
+++ b/tests/format/markdown/code/lwc/__snapshots__/format.test.js.snap
@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`lwc.md - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["markdown"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+\`\`\`html
+<test-this attr={should-be-quoted}>
+    Awesome</test-this>
+\`\`\`
+
+\`\`\`lwc
+<test-this attr={should-NOT-quoted}>
+    Awesome</test-this>
+\`\`\`
+
+=====================================output=====================================
+\`\`\`html
+<test-this attr={should-be-quoted}>
+    Awesome</test-this>
+\`\`\`
+
+\`\`\`lwc
+<test-this attr={should-NOT-quoted}>
+    Awesome</test-this>
+\`\`\`
+
+================================================================================
+`;
+
+exports[`lwc.md format 1`] = `
+====================================options=====================================
+parsers: ["markdown"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+\`\`\`html
+<test-this attr={should-be-quoted}>
+    Awesome</test-this>
+\`\`\`
+
+\`\`\`lwc
+<test-this attr={should-NOT-quoted}>
+    Awesome</test-this>
+\`\`\`
+
+=====================================output=====================================
+\`\`\`html
+<test-this attr="{should-be-quoted}"> Awesome</test-this>
+\`\`\`
+
+\`\`\`lwc
+<test-this attr={should-NOT-quoted}> Awesome</test-this>
+\`\`\`
+
+================================================================================
+`;
+
+exports[`lwc-invalid.md - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["markdown"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+\`\`\`lwc
+<test-this>
+    Awesome</test-this></this-is-invalid>
+\`\`\`
+
+=====================================output=====================================
+\`\`\`lwc
+<test-this>
+    Awesome</test-this></this-is-invalid>
+\`\`\`
+
+================================================================================
+`;
+
+exports[`lwc-invalid.md format 1`] = `
+====================================options=====================================
+parsers: ["markdown"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+\`\`\`lwc
+<test-this>
+    Awesome</test-this></this-is-invalid>
+\`\`\`
+
+=====================================output=====================================
+\`\`\`lwc
+<test-this>
+    Awesome</test-this></this-is-invalid>
+\`\`\`
+
+================================================================================
+`;
diff --git a/tests/format/markdown/code/lwc/format.test.js b/tests/format/markdown/code/lwc/format.test.js
new file mode 100644
index 000000000..cbca7e1b9
--- /dev/null
+++ b/tests/format/markdown/code/lwc/format.test.js
@@ -0,0 +1,2 @@
+runFormatTest(import.meta, ["markdown"]);
+runFormatTest(import.meta, ["markdown"], { embeddedLanguageFormatting: "off" });
diff --git a/tests/format/markdown/code/lwc/lwc-invalid.md b/tests/format/markdown/code/lwc/lwc-invalid.md
new file mode 100644
index 000000000..20c11a551
--- /dev/null
+++ b/tests/format/markdown/code/lwc/lwc-invalid.md
@@ -0,0 +1,4 @@
+```lwc
+<test-this>
+    Awesome</test-this></this-is-invalid>
+```
diff --git a/tests/format/markdown/code/lwc/lwc.md b/tests/format/markdown/code/lwc/lwc.md
new file mode 100644
index 000000000..06067576a
--- /dev/null
+++ b/tests/format/markdown/code/lwc/lwc.md
@@ -0,0 +1,9 @@
+```html
+<test-this attr={should-be-quoted}>
+    Awesome</test-this>
+```
+
+```lwc
+<test-this attr={should-NOT-quoted}>
+    Awesome</test-this>
+```
diff --git a/tests/integration/__tests__/__snapshots__/support-info.js.snap b/tests/integration/__tests__/__snapshots__/support-info.js.snap
index f87538ebf..2677db270 100644
--- a/tests/integration/__tests__/__snapshots__/support-info.js.snap
+++ b/tests/integration/__tests__/__snapshots__/support-info.js.snap
@@ -612,7 +612,7 @@ exports[`CLI --support-info  1`] = `
     },
     {
       "aceMode": "html",
-      "aliases": ["xhtml"],
+      "aliases": ["LWC", "lwc"],
       "codemirrorMimeType": "text/html",
       "codemirrorMode": "htmlmixed",
       "extensions": [],