docs: make config tabs translatable, fix APITable crowdin issue (#7572)

* docs: make config tabs translatable, fix APITable crowdin issue

* fix

website/docs/api/misc/eslint-plugin/no-untranslated-text.md

@@ -32,13 +32,17 @@ Examples of **correct** code for this rule:
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
 | `ignoredStrings` | `string[]` | `[]` | Text labels that only contain strings in this list will not be reported. |
 
+```mdx-code-block
 </APITable>
+```
 
 ## When Not To Use It {#when-not-to-use}
 

website/docs/api/plugins/plugin-client-redirects.md

@@ -35,7 +35,9 @@ npm install --save @docusaurus/plugin-client-redirects
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -44,7 +46,9 @@ Accepted fields:
 | `redirects` | <code><a href="#RedirectRule">RedirectRule</a>[]</code> | `[]` | The list of redirect rules. |
 | `createRedirects` | <code><a href="#CreateRedirectsFn">CreateRedirectsFn</a></code> | `undefined` | A callback to create a redirect rule. |
 
+```mdx-code-block
 </APITable>
+```
 
 ### Types {#types}
 

website/docs/api/plugins/plugin-content-blog.md

@@ -33,7 +33,9 @@ You can configure this plugin through the [preset options](#ex-config-preset).
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -71,7 +73,9 @@ Accepted fields:
 | `feedOptions.language` | `string` (See [documentation](http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes) for possible values) | `undefined` | Language metadata of the feed. |
 | `sortPosts` | <code>'descending' \| 'ascending' </code> | `'descending'` | Governs the direction of blog post sorting. |
 
+```mdx-code-block
 </APITable>
+```
 
 ### Types {#types}
 
@@ -174,7 +178,9 @@ Markdown documents can use the following Markdown front matter metadata fields,
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -195,7 +201,9 @@ Accepted fields:
 | `image` | `string` | `undefined` | Cover or thumbnail image that will be used when displaying the link to your post. |
 | `slug` | `string` | File path | Allows to customize the blog post url (`/<routeBasePath>/<slug>`). Support multiple patterns: `slug: my-blog-post`, `slug: /my/path/to/blog/post`, slug: `/`. |
 
+```mdx-code-block
 </APITable>
+```
 
 ```ts
 type Tag = string | {label: string; permalink: string};

website/docs/api/plugins/plugin-content-docs.md

@@ -27,7 +27,9 @@ You can configure this plugin through the preset options.
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -62,7 +64,9 @@ Accepted fields:
 | `onlyIncludeVersions` | `string[]` | All versions available | Only include a subset of all available versions. |
 | `versions` | <a href="#VersionsConfig"><code>VersionsConfig</code></a> | `{}` | Independent customization of each version's properties. |
 
+```mdx-code-block
 </APITable>
+```
 
 ### Types {#types}
 
@@ -257,7 +261,9 @@ Markdown documents can use the following Markdown front matter metadata fields,
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -283,7 +289,9 @@ Accepted fields:
 | `draft` | `boolean` | `false` | A boolean flag to indicate that a document is a work-in-progress. Draft documents will only be displayed during development. |
 | `last_update` | `FileChange` | `undefined` | Allows overriding the last updated author and/or date. Date can be any [parsable date string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse). |
 
+```mdx-code-block
 </APITable>
+```
 
 ```ts
 type Tag = string | {label: string; permalink: string};

website/docs/api/plugins/plugin-content-pages.md

@@ -27,7 +27,9 @@ You can configure this plugin through the preset options.
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -41,7 +43,9 @@ Accepted fields:
 | `beforeDefaultRemarkPlugins` | `any[]` | `[]` | Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins. |
 | `beforeDefaultRehypePlugins` | `any[]` | `[]` | Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins. |
 
+```mdx-code-block
 </APITable>
+```
 
 ### Example configuration {#ex-config}
 

website/docs/api/plugins/plugin-debug.md

@@ -68,8 +68,8 @@ Most Docusaurus users configure this plugin through the preset options.
 :::
 
 ```mdx-code-block
-<Tabs>
-<TabItem value="Preset Options">
+<Tabs groupId="api-config-ex">
+<TabItem value="preset" label="Preset options">
 ```
 
 If you use a preset, configure this plugin through the [preset options](../../using-plugins.md#docusauruspreset-classic):
@@ -90,7 +90,7 @@ module.exports = {
 
 ```mdx-code-block
 </TabItem>
-<TabItem value="Plugin Options">
+<TabItem value="plugin" label="Plugin Options">
 ```
 
 If you are using a standalone plugin, provide options directly to the plugin:

website/docs/api/plugins/plugin-google-analytics.md

@@ -33,14 +33,18 @@ You can configure this plugin through the preset options.
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `trackingID` | `string` | **Required** | The tracking ID of your analytics service. |
 | `anonymizeIP` | `boolean` | `false` | Whether the IP should be anonymized when sending requests. |
 
+```mdx-code-block
 </APITable>
+```
 
 ### Example configuration {#ex-config}
 

website/docs/api/plugins/plugin-google-gtag.md

@@ -39,14 +39,18 @@ You can configure this plugin through the preset options.
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `trackingID` | `string` | **Required** | The tracking ID of your gtag service. |
 | `anonymizeIP` | `boolean` | `false` | Whether the IP should be anonymized when sending requests. |
 
+```mdx-code-block
 </APITable>
+```
 
 ### Example configuration {#ex-config}
 

website/docs/api/plugins/plugin-ideal-image.md

@@ -40,7 +40,9 @@ import thumbnail from './path/to/img.png';
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -53,7 +55,9 @@ Accepted fields:
 | `quality` | `number` | `85` | JPEG compression quality |
 | `disableInDev` | `boolean` | `true` | You can test ideal image behavior in dev mode by setting this to `false`. **Tip**: use [network throttling](https://www.browserstack.com/guide/how-to-perform-network-throttling-in-chrome) in your browser to simulate slow networks. |
 
+```mdx-code-block
 </APITable>
+```
 
 ### Example configuration {#ex-config}
 

website/docs/api/plugins/plugin-sitemap.md

@@ -33,7 +33,9 @@ You can configure this plugin through the [preset options](#ex-config-preset).
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -42,7 +44,9 @@ Accepted fields:
 | `ignorePatterns` | `string[]` | `[]` | A list of glob patterns; matching route paths will be filtered from the sitemap. Note that you may need to include the base URL in here. |
 | `filename` | `string` | `sitemap.xml` | The path to the created sitemap file, relative to the output directory. Useful if you have two plugin instances outputting two files. |
 
+```mdx-code-block
 </APITable>
+```
 
 :::info
 

website/docs/api/themes/theme-configuration.md

@@ -21,7 +21,9 @@ It is possible to customize the color mode support within the `colorMode` object
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -29,7 +31,9 @@ Accepted fields:
 | `disableSwitch` | `boolean` | `false` | Hides the switch in the navbar. Useful if you want to support a single color mode. |
 | `respectPrefersColorScheme` | `boolean` | `false` | Whether to use the `prefers-color-scheme` media-query, using user system preferences, instead of the hardcoded `defaultMode`. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -61,13 +65,17 @@ You can configure a default image that will be used for your meta tag, in partic
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `image` | `string` | `undefined` | The meta image URL for the site. Relative to your site's "static" directory. Cannot be SVGs. Can be external URLs too. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -86,13 +94,17 @@ You can configure additional html metadata (and override existing ones).
 
 Accepted fields:
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `metadata` | `Metadata[]` | `[]` | Any field will be directly passed to the `<meta />` tag. Possible fields include `id`, `name`, `property`, `content`, `itemprop`, etc. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -111,7 +123,9 @@ Sometimes you want to announce something in your website. Just for such a case,
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="announcement-bar">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -121,7 +135,9 @@ Accepted fields:
 | `textColor` | `string` | `'#000'` | Announcement text color. |
 | `isCloseable` | `boolean` | `true` | Whether this announcement can be dismissed with a '×' button. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -146,7 +162,9 @@ module.exports = {
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="navbar-overview">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -156,7 +174,9 @@ Accepted fields:
 | `hideOnScroll` | `boolean` | `false` | Whether the navbar is hidden when the user scrolls down. |
 | `style` | <code>'primary' \| 'dark'</code> | Same as theme | Sets the navbar style, ignoring the dark/light theme. |
 
+```mdx-code-block
 </APITable>
+```
 
 ### Navbar logo {#navbar-logo}
 
@@ -166,7 +186,9 @@ To improve dark mode support, you can also set a different logo for this mode.
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="navbar-logo">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -178,7 +200,9 @@ Accepted fields:
 | `height` | <code>string \| number</code> | `undefined` | Specifies the `height` attribute. |
 | `target` | `string` | Calculated based on `href` (external links will open in a new tab, all others in the current one). | The `target` attribute of the link; controls whether the link is opened in a new tab, the current one, or otherwise. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -253,7 +277,9 @@ Outbound (external) links automatically get `target="_blank" rel="noopener noref
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="navbar-link">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -268,7 +294,9 @@ Accepted fields:
 | `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. |
 | `className` | `string` | `''` | Custom CSS class (for styling any item). |
 
+```mdx-code-block
 </APITable>
+```
 
 :::note
 
@@ -318,7 +346,9 @@ Note that the dropdown base item is a clickable link as well, so this item can r
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="navbar-dropdown">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -327,7 +357,9 @@ Accepted fields:
 | `items` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | **Required** | The items to be contained in the dropdown. |
 | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -367,7 +399,9 @@ If you want to link to a specific doc, this special navbar item type will render
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="navbar-doc-link">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -377,7 +411,9 @@ Accepted fields:
 | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
 | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc belongs to. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -406,7 +442,9 @@ You can link a navbar item to the first document link (which can be a doc link o
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="navbar-doc-sidebar">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -416,7 +454,9 @@ Accepted fields:
 | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
 | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the sidebar belongs to. |
 
+```mdx-code-block
 </APITable>
+```
 
 :::tip
 
@@ -473,7 +513,9 @@ The user will be able to switch from one version to another, while staying on th
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="navbar-docs-version-dropdown">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -484,7 +526,9 @@ Accepted fields:
 | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. |
 | `dropdownActiveClassDisabled` | `boolean` | `false` | Do not add the link active class when browsing docs. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -513,7 +557,9 @@ If you use docs with versioning, this special navbar item type will link to the
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="navbar-docs-version">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -523,7 +569,9 @@ Accepted fields:
 | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
 | `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -554,7 +602,9 @@ The user will be able to switch from one locale to another, while staying on the
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="navbar-locale-dropdown">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -563,7 +613,9 @@ Accepted fields:
 | `dropdownItemsBefore` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the beginning of the dropdown. |
 | `dropdownItemsAfter` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the end of the dropdown. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -596,7 +648,9 @@ If you use the [search](../../search.md), the search bar will be the rightmost e
 
 However, with this special navbar item type, you can change the default location.
 
+```mdx-code-block
 <APITable name="navbar-search">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -604,7 +658,9 @@ However, with this special navbar item type, you can change the default location
 | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
 | `className` | `string` | / | Custom CSS class for this navbar item. |
 
+```mdx-code-block
 </APITable>
+```
 
 ```js title="docusaurus.config.js"
 module.exports = {
@@ -627,7 +683,9 @@ module.exports = {
 
 You can also render your own HTML markup inside a navbar item using this navbar item type.
 
+```mdx-code-block
 <APITable name="navbar-html">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -636,7 +694,9 @@ You can also render your own HTML markup inside a navbar item using this navbar
 | `className` | `string` | `''` | Custom CSS class for this navbar item. |
 | `value` | `string` | `''` | Custom HTML to be rendered inside this navbar item. |
 
+```mdx-code-block
 </APITable>
+```
 
 ```js title="docusaurus.config.js"
 module.exports = {
@@ -694,7 +754,9 @@ Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-r
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="codeblock">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -703,7 +765,9 @@ Accepted fields:
 | `defaultLanguage` | `string` | `undefined` | The side of the navbar this item should appear on. |
 | `magicComments` | `MagicCommentConfig[]` | _see below_ | The list of [magic comments](../../guides/markdown-features/markdown-features-code-blocks.mdx#custom-magic-comments). |
 
+```mdx-code-block
 </APITable>
+```
 
 ```ts
 type MagicCommentConfig = {
@@ -771,7 +835,9 @@ You can add logo and a copyright to the footer via `themeConfig.footer`. Logo ca
 
 Accepted fields:
 
+```mdx-code-block
 <APITable name="footer">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -780,7 +846,9 @@ Accepted fields:
 | `style` | <code>'dark' \| 'light'</code> | `'light'` | The color theme of the footer component. |
 | `links` | <code>(Column \| FooterLink)[]</code> | `[]` | The link groups to be present. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 
@@ -809,18 +877,24 @@ You can add links to the footer via `themeConfig.footer.links`. There are two ty
 
 Multi-column footer links have a `title` and a list of `FooterItem`s for each column.
 
+```mdx-code-block
 <APITable name="footer-links">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `title` | `string` | `undefined` | Label of the section of these links. |
 | `items` | `FooterItem[]` | `[]` | Links in this section. |
 
+```mdx-code-block
 </APITable>
+```
 
 Accepted fields of each `FooterItem`:
 
+```mdx-code-block
 <APITable name="footer-items">
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -829,7 +903,9 @@ Accepted fields of each `FooterItem`:
 | `href` | `string` | **Required** | A full-page navigation, used for navigating outside of the website. **Only one of `to` or `href` should be used.** |
 | `html` | `string` | `undefined` | Renders the html pass-through instead of a simple link. In case `html` is used, no other options should be provided. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example multi-column configuration:
 
@@ -919,14 +995,18 @@ module.exports = {
 
 You can adjust the default table of contents via `themeConfig.tableOfContents`.
 
+```mdx-code-block
 <APITable>
+```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `minHeadingLevel` | `number` | `2` | The minimum heading level shown in the table of contents. Must be between 2 and 6 and lower or equal to the max value. |
 | `maxHeadingLevel` | `number` | `3` | Max heading level displayed in the TOC. Should be an integer between 2 and 6. |
 
+```mdx-code-block
 </APITable>
+```
 
 Example configuration:
 

website/src/components/ConfigTabs.tsx

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {useActiveVersion} from '@docusaurus/plugin-content-docs/client';
+import Translate, {translate} from '@docusaurus/Translate';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+type Props = {
+  code: string;
+  pluginName: string;
+  presetOptionName: string;
+};
+
+export default function ConfigTabs({
+  code,
+  pluginName,
+  presetOptionName,
+}: Props): JSX.Element {
+  const versionPath = useActiveVersion()!.path;
+
+  return (
+    <Tabs groupId="api-config-ex">
+      <TabItem value="preset" label={translate({message: 'Preset options'})}>
+        <p>
+          <Translate
+            id="apiDocs.configTabs.presetOptions.description"
+            values={{
+              presetLink: (
+                <Link
+                  to={`${versionPath}/using-plugins#docusauruspreset-classic`}>
+                  <Translate>preset options</Translate>
+                </Link>
+              ),
+            }}>
+            {
+              'If you use a preset, configure this plugin through the {presetLink}:'
+            }
+          </Translate>
+        </p>
+        <p>
+          <CodeBlock language="js" title="docusaurus.config.js">
+            {`module.exports = {
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        // highlight-start
+        ${presetOptionName}: ${code.replace(/\n/g, '\n        ')},
+        // highlight-end
+      },
+    ],
+  ],
+};`}
+          </CodeBlock>
+        </p>
+      </TabItem>
+      <TabItem value="plugin" label={translate({message: 'Plugin options'})}>
+        <p>
+          <Translate>
+            If you are using a standalone plugin, provide options directly to
+            the plugin:
+          </Translate>
+        </p>
+        <p>
+          <CodeBlock language="js" title="docusaurus.config.js">
+            {`module.exports = {
+  plugins: [
+    [
+      '${pluginName}',
+      // highlight-start
+      ${code.replace(/\n/g, '\n      ')},
+      // highlight-end
+    ],
+  ],
+};`}
+          </CodeBlock>
+        </p>
+      </TabItem>
+    </Tabs>
+  );
+}

website/src/pages/showcase/index.tsx

@@ -33,8 +33,10 @@ import ShowcaseTooltip from './_components/ShowcaseTooltip';
 
 import styles from './styles.module.css';
 
-const TITLE = 'Docusaurus Site Showcase';
-const DESCRIPTION = 'List of websites people are building with Docusaurus';
+const TITLE = translate({message: 'Docusaurus Site Showcase'});
+const DESCRIPTION = translate({
+  message: 'List of websites people are building with Docusaurus',
+});
 const EDIT_URL =
   'https://github.com/facebook/docusaurus/edit/main/website/src/data/users.tsx';
 

website/src/remark/configTabs.mjs

@@ -12,159 +12,51 @@ import visit from 'unist-util-visit';
  * options" tab
  */
 export default function plugin() {
+  /** @type {import("unified").Transformer} */
   const transformer = (root) => {
-    let tabsImported = false;
-    let codeBlockImported = false;
-    let transformed = false;
-    visit(root, ['code', 'import'], (node, index, parent) => {
-      if (node.type === 'import') {
-        if (node.value.includes('@theme/Tabs')) {
-          tabsImported = true;
-        } else if (node.value.includes('@theme/CodeBlock')) {
-          codeBlockImported = true;
-        }
-      } else if (node.meta?.includes('config-tabs')) {
-        transformed = true;
-        const {value} = node;
-        const [presetMeta, pluginMeta] = value.split('\n');
-        const {
-          groups: {presetOptionName, presetOptionText},
-        } = presetMeta.match(
-          /\/\/(?<presetOptionText>.*?): (?<presetOptionName>[A-Z]+)/i,
-        ) ?? {
-          groups: {
-            presetOptionName: '[translation failure]',
-            presetOptionText: 'Preset Options',
-          },
-        };
-        const {
-          groups: {pluginName, pluginText},
-        } = pluginMeta.match(
-          /\/\/(?<pluginText>.*?): (?<pluginName>[A-Z@/-]+)/i,
-        ) ?? {
-          groups: {
-            pluginName: '[translation failure]',
-            pluginText: 'Plugin Options',
-          },
-        };
-        // Replace leading "const config = " and trailing semi
-        const config = value
-          .replace(presetMeta, '')
-          .replace(pluginMeta, '')
-          .trim()
-          .replace(/^.*?= /, '')
-          .replace(/;$/, '')
-          .replace(/`/g, '\\`')
-          .replace(/\$/g, '\\$');
-        const newNodes = [
-          {
-            type: 'jsx',
-            value: `<Tabs>\n<TabItem value="${presetOptionText.trim()}">`,
-          },
-          {
-            type: 'paragraph',
-            children: [
-              {
-                type: 'text',
-                value:
-                  'If you use a preset, configure this plugin through the ',
-              },
-              {
-                type: 'link',
-                title: null,
-                // TODO make this version-aware; maybe we need a
-                // useVersionedLink() hook
-                url: '/docs/using-plugins#docusauruspreset-classic',
-                children: [
-                  {
-                    type: 'text',
-                    value: 'preset options',
-                  },
-                ],
-              },
-              {
-                type: 'text',
-                value: ':',
-              },
-            ],
-          },
-          {
-            type: 'jsx',
-            value: `<CodeBlock className="language-js" title="docusaurus.config.js">
-{\`module.exports = {
-  presets: [
-    [
-      '@docusaurus/preset-classic',
-      {
-        // highlight-start
-        ${presetOptionName.trim()}: ${config
-              .split('\n')
-              .map((line) => `        ${line}`)
-              .join('\n')
-              .trim()},
-        // highlight-end
-      },
-    ],
-  ],
-};\`}
-</CodeBlock>`,
-          },
-          {
-            type: 'jsx',
-            value: `</TabItem>\n<TabItem value="${pluginText.trim()}">`,
-          },
-          {
-            type: 'paragraph',
-            children: [
-              {
-                type: 'text',
-                value:
-                  'If you are using a standalone plugin, provide options directly to the plugin:',
-              },
-            ],
-          },
-          {
-            type: 'jsx',
-            value: `<CodeBlock className="language-js" title="docusaurus.config.js">
-{\`module.exports = {
-  plugins: [
-    [
-      '${pluginName.trim()}',
-      // highlight-start
-      ${config
-        .split('\n')
-        .map((line) => `      ${line}`)
-        .join('\n')
-        .trim()},
-      // highlight-end
-    ],
-  ],
-};\`}
-</CodeBlock>`,
-          },
-          {
-            type: 'jsx',
-            value: '</TabItem>\n</Tabs>',
-          },
-        ];
-        parent.children.splice(index, 1, ...newNodes);
+    visit(root, 'code', (node, index, parent) => {
+      if (!node.meta?.includes('config-tabs')) {
+        return;
       }
+      const {value} = node;
+      const [presetMeta, pluginMeta] = value.split('\n');
+      const {
+        groups: {presetOptionName},
+      } = presetMeta.match(/\/\/.*?: (?<presetOptionName>[A-Z]+)/i) ?? {
+        groups: {presetOptionName: '[translation failure]'},
+      };
+      const {
+        groups: {pluginName},
+      } = pluginMeta.match(/\/\/.*?: (?<pluginName>[A-Z@/-]+)/i) ?? {
+        groups: {pluginName: '[translation failure]'},
+      };
+      // Replace pragma comments
+      const config = value
+        .replace(presetMeta, '')
+        .replace(pluginMeta, '')
+        .trim()
+        .replace(/^.*?= /, '')
+        .replace(/;$/, '')
+        // eslint-disable-next-line prefer-named-capture-group
+        .replace(/([`$\\])/g, '\\$1');
+
+      parent.children.splice(
+        index,
+        1,
+        {
+          type: 'import',
+          value: `import ConfigTabs from "@site/src/components/ConfigTabs";`,
+        },
+        {
+          type: 'jsx',
+          value: `<ConfigTabs
+            pluginName="${pluginName.trim()}"
+            presetOptionName="${presetOptionName.trim()}"
+            code={\`${config}\`}
+          />`,
+        },
+      );
     });
-    if (transformed) {
-      if (!tabsImported) {
-        root.children.unshift({
-          type: 'import',
-          value:
-            "import Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';",
-        });
-      }
-      if (!codeBlockImported) {
-        root.children.unshift({
-          type: 'import',
-          value: "import CodeBlock from '@theme/CodeBlock';",
-        });
-      }
-    }
   };
   return transformer;
 }