diff --git a/changelog_unreleased/markdown/15993.md b/changelog_unreleased/markdown/15993.md
new file mode 100644
index 000000000..06af5767f
--- /dev/null
+++ b/changelog_unreleased/markdown/15993.md
@@ -0,0 +1,51 @@
+#### Improve wrapping for code block in markdown and jsx in mdx (#15993 by @seiyab)
+
+<!-- prettier-ignore -->
+````md
+<!-- Input -->
+```css
+img {
+  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
+      -2px -2px 0 hsl(210deg 100% 50%)
+)
+    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
+      -2px -2px 0 hsl(30deg 100% 50%)
+    );
+}
+```
+
+<!-- Prettier stable -->
+```css
+img {
+  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
+      -2px -2px 0 hsl(210deg 100% 50%)
+    )
+    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
+      -2px -2px 0 hsl(30deg 100% 50%)
+    );
+}
+```
+
+<!-- Prettier main -->
+```css
+img {
+  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
+    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
+    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
+    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
+}
+```
+````
+
+<!-- prettier-ignore -->
+```md
+<!-- Input -->
+<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
+
+<!-- Prettier stable -->
+<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
+
+<!-- Prettier main -->
+<ExternalLink href="http://example.com">Prettier</ExternalLink> is an
+opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
+```
diff --git a/src/language-markdown/print-paragraph.js b/src/language-markdown/print-paragraph.js
new file mode 100644
index 000000000..199be19fc
--- /dev/null
+++ b/src/language-markdown/print-paragraph.js
@@ -0,0 +1,20 @@
+import { fill } from "../document/builders.js";
+import { normalizeDoc } from "../document/utils.js";
+
+/**
+ * @typedef {import("../common/ast-path.js").default} AstPath
+ * @typedef {import("../document/builders.js").Doc} Doc
+ */
+
+/**
+ * @param {AstPath} path
+ * @param {*} options
+ * @param {*} print
+ * @returns {Doc}
+ */
+function printParagraph(path, options, print) {
+  const parts = path.map(print, "children");
+  return normalizeDoc(fill(parts));
+}
+
+export { printParagraph };
diff --git a/src/language-markdown/printer-markdown.js b/src/language-markdown/printer-markdown.js
index 3dd5afdcb..f1bbf2b68 100644
--- a/src/language-markdown/printer-markdown.js
+++ b/src/language-markdown/printer-markdown.js
@@ -2,7 +2,6 @@ import collapseWhiteSpace from "collapse-white-space";
 
 import {
   align,
-  fill,
   group,
   hardline,
   indent,
@@ -11,7 +10,7 @@ import {
   markAsRoot,
   softline,
 } from "../document/builders.js";
-import { normalizeDoc, replaceEndOfLine } from "../document/utils.js";
+import { replaceEndOfLine } from "../document/utils.js";
 import getMaxContinuousCount from "../utils/get-max-continuous-count.js";
 import getMinNotPresentContinuousCount from "../utils/get-min-not-present-continuous-count.js";
 import getPreferredQuote from "../utils/get-preferred-quote.js";
@@ -23,6 +22,7 @@ import getVisitorKeys from "./get-visitor-keys.js";
 import { locEnd, locStart } from "./loc.js";
 import { insertPragma } from "./pragma.js";
 import { printTable } from "./print/table.js";
+import { printParagraph } from "./print-paragraph.js";
 import preprocess from "./print-preprocess.js";
 import { printWhitespace } from "./print-whitespace.js";
 import {
@@ -71,11 +71,9 @@ function genericPrint(path, options, print) {
       if (node.children.length === 0) {
         return "";
       }
-      return [normalizeDoc(printRoot(path, options, print)), hardline];
+      return [printRoot(path, options, print), hardline];
     case "paragraph":
-      return printChildren(path, options, print, {
-        postprocessor: fill,
-      });
+      return printParagraph(path, options, print);
     case "sentence":
       return printChildren(path, options, print);
     case "word": {
@@ -559,8 +557,7 @@ function printRoot(path, options, print) {
 }
 
 function printChildren(path, options, print, events = {}) {
-  const { postprocessor = (parts) => parts, processor = () => print() } =
-    events;
+  const { processor = print } = events;
 
   const parts = [];
 
@@ -586,7 +583,7 @@ function printChildren(path, options, print, events = {}) {
     }
   }, "children");
 
-  return postprocessor(parts);
+  return parts;
 }
 
 function printIgnoreComment(node) {
diff --git a/tests/format/markdown/code/__snapshots__/jsfmt.spec.js.snap b/tests/format/markdown/code/__snapshots__/jsfmt.spec.js.snap
index a5c3861e9..8c814bec6 100644
--- a/tests/format/markdown/code/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/markdown/code/__snapshots__/jsfmt.spec.js.snap
@@ -339,9 +339,9 @@ const createCredentialDefaultArgs = {
     timeout: 60000,
     challenge: new Uint8Array([
       // must be a cryptographically random number sent from a server
-      0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a,
-      0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x38,
-      0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
+      0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17,
+      0x1a, 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15,
+      0x7e, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
     ]).buffer,
   },
 };
@@ -381,7 +381,8 @@ proseWrap: "always"
         105deg,
         rgb(255 255 255 / 20%) 39%,
         rgb(51 56 57 / 100%) 96%
-      ) center center / 400px 200px no-repeat,
+      )
+      center center / 400px 200px no-repeat,
     url(big-star.png) center no-repeat,
     rebeccapurple;
 }
@@ -415,7 +416,8 @@ background-image: linear-gradient(
     to bottom,
     rgb(255 255 0 / 50%),
     rgb(0 0 255 / 50%)
-  ), url("catfront.png");
+  ),
+  url("catfront.png");
 \`\`\`
 
 ================================================================================
@@ -455,7 +457,8 @@ width: 400px;
       rgb(131 58 180 / 100%) 0%,
       rgb(253 29 29 / 60%) 60%,
       rgb(252 176 69 / 100%) 100%
-    ), radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
+    ),
+    radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
   border: 20px dashed black;
   padding: 20px;
   width: 400px;
@@ -495,8 +498,8 @@ background-position:
 .multi-bg-example {
   width: 100%;
   height: 400px;
-  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(30
-          75 115 / 100%), rgb(255 255 255 / 0%));
+  background-image: url(firefox.png), url(bubbles.png),
+    linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
   background-repeat: no-repeat, no-repeat, no-repeat;
   background-position:
     bottom right,
@@ -536,7 +539,8 @@ proseWrap: "always"
       217deg,
       rgb(255 0 0 / 80%),
       rgb(255 0 0 / 0%) 70.71%
-    ), linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
+    ),
+    linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
     linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
 }
 \`\`\`
@@ -595,7 +599,8 @@ proseWrap: "always"
         circle at 93.3% 75%,
         rgb(0 255 0 / 50%),
         rgb(0 255 0 / 0%) 70.71%
-      ) beige;
+      )
+      beige;
   border-radius: 50%;
 }
 \`\`\`
@@ -653,7 +658,8 @@ rgb(255 255 0 / 50%) 120px,
       rgb(75 0 130 / 50%) 240px,
       rgb(238 130 238 / 50%) 280px,
       rgb(255 0 0 / 50%) 300px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       -190deg,
       rgb(255 0 0 / 50%) 30px,
       rgb(255 153 0 / 50%) 60px,
@@ -663,8 +669,18 @@ rgb(255 255 0 / 50%) 120px,
       rgb(75 0 130 / 50%) 180px,
       rgb(238 130 238 / 50%) 210px,
       rgb(255 0 0 / 50%) 230px
-    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
-        200px, blue 250px, indigo 300px, violet 350px, red 370px);
+    ),
+    repeating-linear-gradient(
+      23deg,
+      red 50px,
+      orange 100px,
+      yellow 150px,
+      green 200px,
+      blue 250px,
+      indigo 300px,
+      violet 350px,
+      red 370px
+    );
 }
 \`\`\`
 
@@ -763,7 +779,8 @@ transparent 69px,
       transparent 116px,
       rgb(255 206 0 / 25%) 116px,
       rgb(255 206 0 / 25%) 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       0deg,
       transparent,
       transparent 50px,
@@ -777,15 +794,21 @@ transparent 69px,
       transparent 116px,
       rgb(255 206 0 / 25%) 116px,
       rgb(255 206 0 / 25%) 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       -45deg,
       transparent,
       transparent 5px,
       rgb(143 77 63 / 25%) 5px,
       rgb(143 77 63 / 25%) 10px
-    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(
-          143 77 63 / 25%
-        ) 5px, rgb(143 77 63 / 25%) 10px);
+    ),
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 5px,
+      rgb(143 77 63 / 25%) 5px,
+      rgb(143 77 63 / 25%) 10px
+    );
 
   background: repeating-linear-gradient(
       90deg,
@@ -795,7 +818,8 @@ transparent 69px,
       rgb(255 127 0 / 25%) 63px 69px,
       transparent 69px 116px,
       rgb(255 206 0 / 25%) 116px 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       0deg,
       transparent 0 50px,
       rgb(255 127 0 / 25%) 50px 56px,
@@ -803,12 +827,17 @@ transparent 69px,
       rgb(255 127 0 / 25%) 63px 69px,
       transparent 69px 116px,
       rgb(255 206 0 / 25%) 116px 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       -45deg,
       transparent 0 5px,
       rgb(143 77 63 / 25%) 5px 10px
-    ), repeating-linear-gradient(45deg, transparent 0 5px, rgb(143 77 63 / 25%) 5px
-        10px);
+    ),
+    repeating-linear-gradient(
+      45deg,
+      transparent 0 5px,
+      rgb(143 77 63 / 25%) 5px 10px
+    );
 }
 \`\`\`
 
@@ -845,7 +874,8 @@ div {
       #000 0.25turn 0.5turn,
       #fff 0.5turn 0.75turn,
       #000 0.75turn
-    ) top left / 25% 25% repeat;
+    )
+    top left / 25% 25% repeat;
   border: 1px solid;
 }
 \`\`\`
@@ -877,12 +907,10 @@ filter: none;
 =====================================output=====================================
 \`\`\`css
 img {
-  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
-      -2px -2px 0 hsl(210deg 100% 50%)
-    )
-    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
-      -2px -2px 0 hsl(30deg 100% 50%)
-    );
+  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
+    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
+    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
+    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
 }
 img + img {
   filter: none;
@@ -915,8 +943,8 @@ border: 1px solid blue;
 \`\`\`css
 #MDN-logo {
   border: 1px solid blue;
-  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
-        red);
+  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
+    drop-shadow(5px 5px 0 red);
 }
 \`\`\`
 
@@ -953,7 +981,8 @@ font-style: normal;
   font-family: "HeydingsControlsRegular";
   src: url("fonts/heydings_controls-webfont.eot");
   src:
-    url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),
+    url("fonts/heydings_controls-webfont.eot?#iefix")
+      format("embedded-opentype"),
     url("fonts/heydings_controls-webfont.woff") format("woff"),
     url("fonts/heydings_controls-webfont.ttf") format("truetype");
   font-weight: normal;
@@ -991,7 +1020,8 @@ proseWrap: "always"
 @font-face {
   font-family: "Bungee Spice";
   src:
-    url("https://fonts.googleapis.com/css2?family=Bungee+Spice") tech(color-COLRv1),
+    url("https://fonts.googleapis.com/css2?family=Bungee+Spice")
+      tech(color-COLRv1),
     url("Bungee-fallback.otf") format("opentype");
 }
 \`\`\`
@@ -1025,7 +1055,8 @@ grid-auto-columns: min-content max-content auto;
 grid-auto-columns: 100px 150px 390px;
 grid-auto-columns: 10% 33.3%;
 grid-auto-columns: 0.5fr 3fr 1fr;
-grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)
+  minmax(20%, 80vmax);
 grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
 \`\`\`
 
@@ -1053,10 +1084,10 @@ proseWrap: "always"
 =====================================output=====================================
 \`\`\`css
 @import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
-@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen
-  and (max-width: 400px);
-@import url("whatever.css") supports((selector(h2 > p)) and
-    (font-tech(color-COLRv1)));
+@import url("flexy.css") supports(not (display: grid) and (display: flex))
+  screen and (max-width: 400px);
+@import url("whatever.css")
+supports((selector(h2 > p)) and (font-tech(color-COLRv1)));
 \`\`\`
 
 ================================================================================
@@ -1079,7 +1110,8 @@ mask-image: image(url(mask.png), skyblue),                          linear-gradi
 =====================================output=====================================
 \`\`\`css
 /* Multiple values */
-mask-image: image(url(mask.png), skyblue), linear-gradient(rgb(0 0 0 / 100%), transparent);
+mask-image: image(url(mask.png), skyblue),
+  linear-gradient(rgb(0 0 0 / 100%), transparent);
 \`\`\`
 
 ================================================================================
@@ -1107,10 +1139,8 @@ padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
 =====================================output=====================================
 \`\`\`css
 body {
-  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
-      safe-area-inset-bottom,
-      20px
-    ) env(safe-area-inset-left, 20px);
+  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
 }
 \`\`\`
 
@@ -1143,10 +1173,8 @@ p {
 p {
   width: 300px;
   border: 2px solid red;
-  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
-      safe-area-inset-bottom,
-      50px
-    ) env(SAFE-AREA-INSET-LEFT, 50px);
+  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
 }
 \`\`\`
 
@@ -1188,24 +1216,8 @@ proseWrap: "always"
 =====================================output=====================================
 \`\`\`css
 #example-element:focus {
-  transform: rotate3d(1, 1, 1, 30deg) matrix3d(
-      1,
-      0,
-      0,
-      0,
-      0,
-      1,
-      6,
-      0,
-      0,
-      0,
-      1,
-      0,
-      50,
-      100,
-      0,
-      1.1
-    );
+  transform: rotate3d(1, 1, 1, 30deg)
+    matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
 }
 \`\`\`
 
@@ -1257,9 +1269,9 @@ U+0152-0153, U+02BB-02BC, U+02C6,
       local("Montserrat Regular"),
       local("Montserrat-Regular"),
       url("fonts/montserrat-regular.woff2") format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
-      U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
-      U+2212, U+2215, U+FEFF, U+FFFD;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
 }
 \`\`\`
diff --git a/tests/format/mdx/mdx/__snapshots__/jsfmt.spec.js.snap b/tests/format/mdx/mdx/__snapshots__/jsfmt.spec.js.snap
index dcaf35014..688694083 100644
--- a/tests/format/mdx/mdx/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/mdx/mdx/__snapshots__/jsfmt.spec.js.snap
@@ -345,6 +345,37 @@ and as you can see_ once you close the italics, it will break incorrectly when p
 ================================================================================
 `;
 
+exports[`issue-9503.mdx - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["mdx"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
+
+=====================================output=====================================
+<ExternalLink href="http://example.com">Prettier</ExternalLink> is an
+opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
+
+================================================================================
+`;
+
+exports[`issue-9503.mdx format 1`] = `
+====================================options=====================================
+parsers: ["mdx"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
+
+=====================================output=====================================
+<ExternalLink href="http://example.com">Prettier</ExternalLink> is an
+opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
+
+================================================================================
+`;
+
 exports[`jsx.mdx - {"semi":false} format 1`] = `
 ====================================options=====================================
 parsers: ["mdx"]
@@ -416,7 +447,8 @@ A {/* JS-style comment */} comment.
 </Hello>
 <Hello>
   test <World /> test
-</Hello>123
+</Hello>
+123
 
 ---
 
@@ -518,7 +550,8 @@ A {/* JS-style comment */} comment.
 </Hello>
 <Hello>
   test <World /> test
-</Hello>123
+</Hello>
+123
 
 ---
 
diff --git a/tests/format/mdx/mdx/issue-9503.mdx b/tests/format/mdx/mdx/issue-9503.mdx
new file mode 100644
index 000000000..a88ef9c59
--- /dev/null
+++ b/tests/format/mdx/mdx/issue-9503.mdx
@@ -0,0 +1 @@
+<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors