feat(theme-classic): Add CodeBlockToken component for swizzling

Author: Danielku15

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -502,6 +502,18 @@ declare module '@theme/CodeBlock/WordWrapButton' {
   export default function WordWrapButton(props: Props): ReactNode;
 }
 
+declare module '@theme/CodeBlock/Token' {
+  import type {ReactNode} from 'react';
+  import type {Props as LineProps} from '@theme/CodeBlock/Line';
+  import type {TokenOutputProps} from 'prism-react-renderer';
+
+  export interface Props extends TokenOutputProps {
+    line: LineProps;
+  }
+
+  export default function CodeBlockToken(props: Props): ReactNode;
+}
+
 declare module '@theme/DocCard' {
   import type {ReactNode} from 'react';
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';

packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx

@@ -8,6 +8,7 @@
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import type {Props} from '@theme/CodeBlock/Line';
+import CodeBlockToken from '@theme/CodeBlock/Token';
 
 import styles from './styles.module.css';
 
@@ -26,13 +27,14 @@ function fixLineBreak(line: Token[]) {
   return line;
 }
 
-export default function CodeBlockLine({
-  line: lineProp,
-  classNames,
-  showLineNumbers,
-  getLineProps,
-  getTokenProps,
-}: Props): ReactNode {
+export default function CodeBlockLine(props: Props): ReactNode {
+  const {
+    line: lineProp,
+    classNames,
+    showLineNumbers,
+    getLineProps,
+    getTokenProps,
+  } = props;
   const line = fixLineBreak(lineProp);
 
   const lineProps = getLineProps({
@@ -41,7 +43,7 @@ export default function CodeBlockLine({
   });
 
   const lineTokens = line.map((token, key) => (
-    <span key={key} {...getTokenProps({token})} />
+    <CodeBlockToken key={key} line={props} {...getTokenProps({token})} />
   ));
 
   return (

packages/docusaurus-theme-classic/src/theme/CodeBlock/Token/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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';
+import type {Props} from '@theme/CodeBlock/Token';
+
+export default function CodeBlockToken(props: Props): ReactNode {
+  // We omit the "line" information in the default rendering,
+  // but its meant for devs who devs who Swizzle this component.
+  const {line, ...tokenProps} = props;
+  return <span {...tokenProps} />;
+}

website/docs/guides/markdown-features/markdown-features-code-blocks.mdx

@@ -390,6 +390,12 @@ npm run swizzle @docusaurus/theme-classic CodeBlock/Line
 
 The `Line` component will receive the list of class names, based on which you can conditionally render different markup.
 
+```bash npm2yarn
+npm run swizzle @docusaurus/theme-classic CodeBlock/Token
+```
+
+The `Token` component will receive the CSS styles, a className, and the raw syntax token content, based on which you can conditionally render different markup. You also have access to the parent line via `props.line` to access information like the class names applied from magic comments.
+
 ## Line numbering {#line-numbering}
 
 You can enable line numbering for your code block by using `showLineNumbers` key within the language meta string (don't forget to add space directly before the key).