From 3875852a4af5e5f29829de22dda1f1e353711428 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sat, 15 Nov 2025 11:04:47 +0900 Subject: [PATCH 1/4] Skip smartypants on TerminalBlock --- plugins/remark-smartypants.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/plugins/remark-smartypants.js b/plugins/remark-smartypants.js index f56f14b612b..c819624ba2f 100644 --- a/plugins/remark-smartypants.js +++ b/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); From 93dd3f04c6b98e0ab9ecea99feab35a666eda30c Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sat, 15 Nov 2025 11:05:22 +0900 Subject: [PATCH 2/4] Improve TerminalBlock HTML tags --- src/components/MDX/TerminalBlock.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index bdcd8e46600..0fd0160d665 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -79,13 +79,15 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { -
- - {message} -
+ + + {message} + + ); } From 3f6cd381bf7b47cd72b1cca26e36ec9ebde976f4 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sat, 15 Nov 2025 11:11:25 +0900 Subject: [PATCH 3/4] Remove unnecessary TerminalBlock escapes from docs --- .../blog/2025/10/07/react-compiler-1.md | 18 +++++++++--------- .../learn/build-a-react-app-from-scratch.md | 6 +++--- .../learn/react-compiler/installation.md | 2 +- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md index 5474c50d3f2..080f3586ea9 100644 --- a/src/content/blog/2025/10/07/react-compiler-1.md +++ b/src/content/blog/2025/10/07/react-compiler-1.md @@ -69,17 +69,17 @@ To install the compiler: npm -{`npm install --save-dev --save-exact babel-plugin-react-compiler@latest`} +npm install --save-dev --save-exact babel-plugin-react-compiler@latest pnpm -{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest`} +pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest yarn -{`yarn add --dev --exact babel-plugin-react-compiler@latest`} +yarn add --dev --exact babel-plugin-react-compiler@latest 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 -{`npm install --save-dev eslint-plugin-react-hooks@latest`} +npm install --save-dev eslint-plugin-react-hooks@latest pnpm -{`pnpm add --save-dev eslint-plugin-react-hooks@latest`} +pnpm add --save-dev eslint-plugin-react-hooks@latest yarn -{`yarn add --dev eslint-plugin-react-hooks@latest`} +yarn add --dev eslint-plugin-react-hooks@latest ```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. -{`npx create-expo-app@latest`} +npx create-expo-app@latest [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`. -{`npm create vite@latest`} +npm create vite@latest
-{`npx create-next-app@latest`} +npx create-next-app@latest ## Adopt React Compiler incrementally {/*adopt-react-compiler-incrementally*/} diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index c74fa9afd1e..8a2142cf91d 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/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. -{`npm create vite@latest my-app -- --template react-ts`} +npm create vite@latest my-app -- --template react-ts 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. -{`npm install --save-dev parcel`} +npm install --save-dev parcel 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. -{`npx create-rsbuild --template react`} +npx create-rsbuild --template react 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. diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 92cf0b74e53..6cce34c6b6b 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/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: -{`npm install vite-plugin-babel`} +npm install vite-plugin-babel ```js {3-4,16} From 5ee21bdc15e8482dfb862ff871cb03930338aa90 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sat, 15 Nov 2025 11:12:28 +0900 Subject: [PATCH 4/4] Bump DISK_CACHE_BREAKER --- src/utils/compileMDX.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/compileMDX.ts b/src/utils/compileMDX.ts index 807b50da592..c312f03fe96 100644 --- a/src/utils/compileMDX.ts +++ b/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(