fix: Stop SmartyPants from altering TerminalBlock commands (like --save-dev to —save-dev) (reactjs#8146)

* Skip smartypants on TerminalBlock

* Improve TerminalBlock HTML tags

* Remove unnecessary TerminalBlock escapes from docs

* Bump DISK_CACHE_BREAKER

Author: smikitky

plugins/remark-smartypants.js

@@ -14,12 +14,24 @@ const visit = require('unist-util-visit');
 const retext = require('retext');
 const smartypants = require('retext-smartypants');
 
-function check(parent) {
+function check(node, parent) {
+  if (node.data?.skipSmartyPants) return false;
   if (parent.tagName === 'script') return false;
   if (parent.tagName === 'style') return false;
   return true;
 }
 
+function markSkip(node) {
+  if (!node) return;
+  node.data ??= {};
+  node.data.skipSmartyPants = true;
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      markSkip(child);
+    }
+  }
+}
+
 module.exports = function (options) {
   const processor = retext().use(smartypants, {
     ...options,
@@ -43,8 +55,14 @@ module.exports = function (options) {
     let startIndex = 0;
     const textOrInlineCodeNodes = [];
 
+    visit(tree, 'mdxJsxFlowElement', (node) => {
+      if (['TerminalBlock'].includes(node.name)) {
+        markSkip(node); // Mark all children to skip smarty pants
+      }
+    });
+
     visit(tree, ['text', 'inlineCode'], (node, _, parent) => {
-      if (check(parent)) {
+      if (check(node, parent)) {
         if (node.type === 'text') allText += node.value;
         // for the case when inlineCode contains just one part of quote: `foo'bar`
         else allText += 'A'.repeat(node.value.length);

src/components/MDX/TerminalBlock.tsx

@@ -79,13 +79,15 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
           </div>
         </div>
       </div>
-      <div
+      <pre
         className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-auto"
         translate="no"
         dir="ltr">
-        <LevelText type={level} />
-        {message}
-      </div>
+        <code>
+          <LevelText type={level} />
+          {message}
+        </code>
+      </pre>
     </div>
   );
 }

src/content/blog/2025/10/07/react-compiler-1.md

@@ -69,17 +69,17 @@ To install the compiler:
 
 npm
 <TerminalBlock>
-{`npm install --save-dev --save-exact babel-plugin-react-compiler@latest`}
+npm install --save-dev --save-exact babel-plugin-react-compiler@latest
 </TerminalBlock>
 
 pnpm
 <TerminalBlock>
-{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest`}
+pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest
 </TerminalBlock>
 
 yarn
 <TerminalBlock>
-{`yarn add --dev --exact babel-plugin-react-compiler@latest`}
+yarn add --dev --exact babel-plugin-react-compiler@latest
 </TerminalBlock>
 
 As part of the stable release, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Compiler now supports optional chains and array indices as dependencies. These improvements ultimately result in fewer re-renders and more responsive UIs, while letting you keep writing idiomatic declarative code.
@@ -101,17 +101,17 @@ To install:
 
 npm
 <TerminalBlock>
-{`npm install --save-dev eslint-plugin-react-hooks@latest`}
+npm install --save-dev eslint-plugin-react-hooks@latest
 </TerminalBlock>
 
 pnpm
 <TerminalBlock>
-{`pnpm add --save-dev eslint-plugin-react-hooks@latest`}
+pnpm add --save-dev eslint-plugin-react-hooks@latest
 </TerminalBlock>
 
 yarn
 <TerminalBlock>
-{`yarn add --dev eslint-plugin-react-hooks@latest`}
+yarn add --dev eslint-plugin-react-hooks@latest
 </TerminalBlock>
 
 ```js {6}
@@ -153,19 +153,19 @@ We have partnered with the Expo, Vite, and Next.js teams to add the compiler to
 [Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) and up has the compiler enabled by default, so new apps will automatically be able to take advantage of the compiler from the start.
 
 <TerminalBlock>
-{`npx create-expo-app@latest`}
+npx create-expo-app@latest
 </TerminalBlock>
 
 [Vite](https://vite.dev/guide/) and [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) users can choose the compiler enabled templates in `create-vite` and `create-next-app`.
 
 <TerminalBlock>
-{`npm create vite@latest`}
+npm create vite@latest
 </TerminalBlock>
 
 <br />
 
 <TerminalBlock>
-{`npx create-next-app@latest`}
+npx create-next-app@latest
 </TerminalBlock>
 
 ## Adopt React Compiler incrementally {/*adopt-react-compiler-incrementally*/}

src/content/learn/build-a-react-app-from-scratch.md

@@ -34,7 +34,7 @@ The first step is to install a build tool like `vite`, `parcel`, or `rsbuild`. T
 [Vite](https://vite.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.
 
 <TerminalBlock>
-{`npm create vite@latest my-app -- --template react-ts`}
+npm create vite@latest my-app -- --template react-ts
 </TerminalBlock>
 
 Vite is opinionated and comes with sensible defaults out of the box. Vite has a rich ecosystem of plugins to support fast refresh, JSX,  Babel/SWC, and other common features. See Vite's [React plugin](https://vite.dev/plugins/#vitejs-plugin-react) or [React SWC plugin](https://vite.dev/plugins/#vitejs-plugin-react-swc) and [React SSR example project](https://vite.dev/guide/ssr.html#example-projects) to get started.
@@ -46,7 +46,7 @@ Vite is already being used as a build tool in one of our [recommended frameworks
 [Parcel](https://parceljs.org/) combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production applications.
 
 <TerminalBlock>
-{`npm install --save-dev parcel`}
+npm install --save-dev parcel
 </TerminalBlock>
 
 Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box. See [Parcel's React recipe](https://parceljs.org/recipes/react/#getting-started) to get started.
@@ -56,7 +56,7 @@ Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box.
 [Rsbuild](https://rsbuild.dev/) is an Rspack-powered build tool that provides a seamless development experience for React applications. It comes with carefully tuned defaults and performance optimizations ready to use.
 
 <TerminalBlock>
-{`npx create-rsbuild --template react`}
+npx create-rsbuild --template react
 </TerminalBlock>
 
 Rsbuild includes built-in support for React features like fast refresh, JSX, TypeScript, and styling. See [Rsbuild's React guide](https://rsbuild.dev/guide/framework/react) to get started.

src/content/learn/react-compiler/installation.md

@@ -114,7 +114,7 @@ Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/nex
 Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
 
 <TerminalBlock>
-{`npm install vite-plugin-babel`}
+npm install vite-plugin-babel
 </TerminalBlock>
 
 ```js {3-4,16}

src/utils/compileMDX.ts

@@ -10,7 +10,7 @@ import {MDXComponents} from 'components/MDX/MDXComponents';
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 10;
+const DISK_CACHE_BREAKER = 11;
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 export default async function compileMDX(