diff --git a/docs/_asset/editor.jsx b/docs/_asset/editor.jsx
index 835e2a4b9..3129dfb96 100644
--- a/docs/_asset/editor.jsx
+++ b/docs/_asset/editor.jsx
@@ -1,5 +1,7 @@
-/* @jsxRuntime automatic
-@jsxImportSource react */
+/**
+ * @jsxRuntime automatic
+ * @jsxImportSource react
+ */
 
 /**
  * @typedef {import('@wooorm/starry-night').Grammar} Grammar
diff --git a/docs/docs/using-mdx.mdx b/docs/docs/using-mdx.mdx
index a8428c7c8..1a0c77c28 100644
--- a/docs/docs/using-mdx.mdx
+++ b/docs/docs/using-mdx.mdx
@@ -41,8 +41,10 @@ That’s *roughly* turned into the following JavaScript.
 The below might help to form a mental model:
 
 ```tsx path="output-outline.jsx"
-/* @jsxRuntime automatic
-@jsxImportSource react */
+/*
+@jsxRuntime automatic
+@jsxImportSource react
+*/
 
 export function Thing() {
   return <>World</>
diff --git a/packages/mdx/lib/plugin/recma-document.js b/packages/mdx/lib/plugin/recma-document.js
index 50bdf0498..5e405e89d 100644
--- a/packages/mdx/lib/plugin/recma-document.js
+++ b/packages/mdx/lib/plugin/recma-document.js
@@ -105,7 +105,7 @@ export function recmaDocument(options) {
     if (pragmas.length > 0) {
       tree.comments.unshift({
         type: 'Block',
-        value: pragmas.join('\n'),
+        value: '\n' + pragmas.join('\n') + '\n',
         data: {_mdxIsPragmaComment: true}
       })
     }
diff --git a/packages/mdx/readme.md b/packages/mdx/readme.md
index 2b8b07457..f10b2e12b 100644
--- a/packages/mdx/readme.md
+++ b/packages/mdx/readme.md
@@ -653,8 +653,10 @@ Configuration for `createProcessor` (TypeScript type).
 
   ```diff
   -import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime'
-  +/* @jsxRuntime automatic
-  +@jsxImportSource react */
+  +/*
+  +@jsxRuntime automatic
+  +@jsxImportSource react
+  +*/
 
   export function Thing() {
   -  return _jsx(_Fragment, {children: 'World'})
diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js
index a87f238ca..f520627bc 100644
--- a/packages/mdx/test/compile.js
+++ b/packages/mdx/test/compile.js
@@ -1154,8 +1154,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('*a*', {jsx: true})),
       [
-        '/*@jsxRuntime automatic',
-        '@jsxImportSource react*/',
+        '/*',
+        '@jsxRuntime automatic',
+        '@jsxImportSource react',
+        '*/',
         'function _createMdxContent(props) {',
         '  const _components = {',
         '    em: "em",',
@@ -1177,8 +1179,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('<a {...b} c d="1" e={1} />', {jsx: true})),
       [
-        '/*@jsxRuntime automatic',
-        '@jsxImportSource react*/',
+        '/*',
+        '@jsxRuntime automatic',
+        '@jsxImportSource react',
+        '*/',
         'function _createMdxContent(props) {',
         '  return <a {...b} c d="1" e={1} />;',
         '}',
@@ -1197,8 +1201,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
       assert.equal(
         String(await compile('<><a:b /><c.d/></>', {jsx: true})),
         [
-          '/*@jsxRuntime automatic',
-          '@jsxImportSource react*/',
+          '/*',
+          '@jsxRuntime automatic',
+          '@jsxImportSource react',
+          '*/',
           'function _createMdxContent(props) {',
           '  const {c} = props.components || ({});',
           '  if (!c) _missingMdxReference("c", false);',
@@ -1222,8 +1228,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('<>a {/* 1 */} b</>', {jsx: true})),
       [
-        '/*@jsxRuntime automatic',
-        '@jsxImportSource react*/',
+        '/*',
+        '@jsxRuntime automatic',
+        '@jsxImportSource react',
+        '*/',
         '/*1*/',
         'function _createMdxContent(props) {',
         '  return <><>{"a "}{}{" b"}</></>;',
@@ -1243,8 +1251,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
       assert.equal(
         String(await compile('{<a-b></a-b>}', {jsx: true})),
         [
-          '/*@jsxRuntime automatic',
-          '@jsxImportSource react*/',
+          '/*',
+          '@jsxRuntime automatic',
+          '@jsxImportSource react',
+          '*/',
           'function _createMdxContent(props) {',
           '  const _components = {',
           '    "a-b": "a-b",',
@@ -1266,8 +1276,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('Hello {props.name}', {jsx: true})),
       [
-        '/*@jsxRuntime automatic',
-        '@jsxImportSource react*/',
+        '/*',
+        '@jsxRuntime automatic',
+        '@jsxImportSource react',
+        '*/',
         'function _createMdxContent(props) {',
         '  const _components = {',
         '    p: "p",',
@@ -1295,8 +1307,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
           )
         ),
         [
-          '/*@jsxRuntime automatic',
-          '@jsxImportSource react*/',
+          '/*',
+          '@jsxRuntime automatic',
+          '@jsxImportSource react',
+          '*/',
           'const MDXLayout = function Layout({components, ...props}) {',
           '  return <section {...props} />;',
           '};',
@@ -1327,8 +1341,10 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
           })
         ),
         [
-          '/*@jsxRuntime automatic',
-          '@jsxImportSource react*/',
+          '/*',
+          '@jsxRuntime automatic',
+          '@jsxImportSource react',
+          '*/',
           'import {useMDXComponents as _provideComponents} from "@mdx-js/react";',
           'function _createMdxContent(props) {',
           '  const _components = {',