docs: document MDXComponents scope (#7503)

* docs: document MDXComponents scope

* address reviews

* add info

website/src/components/Highlight.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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, {type ReactNode} from 'react';
+
+export default function Highlight({
+  children,
+  color,
+}: {
+  children: ReactNode;
+  color: string;
+}): JSX.Element {
+  return (
+    <span
+      style={{
+        backgroundColor: color,
+        borderRadius: '2px',
+        color: '#fff',
+        padding: '0.2rem',
+      }}>
+      {children}
+    </span>
+  );
+}

website/src/theme/MDXComponents.tsx

@@ -0,0 +1,14 @@
+/**
+ * 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 MDXComponents from '@theme-original/MDXComponents';
+import Highlight from '@site/src/components/Highlight';
+
+export default {
+  ...MDXComponents,
+  highlight: Highlight,
+};