facebook · slorber · Oct 6, 2023 · Sep 17, 2023 · Sep 17, 2023 · Sep 17, 2023
diff --git a/examples/classic-typescript/docusaurus.config.js b/examples/classic-typescript/docusaurus.config.js
diff --git a/examples/classic-typescript/package.json b/examples/classic-typescript/package.json
diff --git a/examples/classic/docusaurus.config.js b/examples/classic/docusaurus.config.js
diff --git a/examples/classic/package.json b/examples/classic/package.json
@@ -19,7 +19,7 @@
     "@docusaurus/preset-classic": "3.0.0-beta.0",
     "@mdx-js/react": "^2.3.0",
     "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.0.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

@@ -4,8 +4,10 @@
 // There are various equivalent ways to declare your Docusaurus config.
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const {themes} = require('prism-react-renderer');
+
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {

@@ -18,7 +18,7 @@
     "@docusaurus/preset-classic": "3.0.0-beta.0",
     "@mdx-js/react": "^2.3.0",
     "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.0.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

@@ -39,7 +39,7 @@
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.26",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.0.6",
     "prismjs": "^1.29.0",
     "react-router-dom": "^5.3.4",
     "rtlcss": "^4.1.0",

@@ -11,8 +11,7 @@ import {
   normalizeThemeConfig,
   normalizePluginOptions,
 } from '@docusaurus/utils-validation';
-import theme from 'prism-react-renderer/themes/github';
-import darkTheme from 'prism-react-renderer/themes/dracula';
+import {themes} from 'prism-react-renderer';
 import {ThemeConfigSchema, DEFAULT_CONFIG, validateOptions} from '../options';
 import type {Options, PluginOptions} from '@docusaurus/theme-classic';
 import type {ThemeConfig} from '@docusaurus/theme-common';
@@ -36,8 +35,8 @@ describe('themeConfig', () => {
   it('accepts valid theme config', () => {
     const userConfig = {
       prism: {
-        theme,
-        darkTheme,
+        theme: themes.github,
+        darkTheme: themes.dracula,
         defaultLanguage: 'javaSCRIPT',
         additionalLanguages: ['koTLin', 'jaVa'],
         magicComments: [
@@ -579,7 +578,7 @@ describe('themeConfig', () => {
       const prismConfig = {
         prism: {
           additionalLanguages: ['kotlin', 'java'],
-          theme: darkTheme,
+          theme: themes.dracula,
           magicComments: [],
         },
       };
@@ -590,7 +589,7 @@ describe('themeConfig', () => {
       const prismConfig2 = {
         prism: {
           additionalLanguages: [],
-          theme: darkTheme,
+          theme: themes.dracula,
           magicComments: [
             {
               className: 'a',
@@ -606,7 +605,7 @@ describe('themeConfig', () => {
       const prismConfig3 = {
         prism: {
           additionalLanguages: [],
-          theme: darkTheme,
+          theme: themes.dracula,
           magicComments: [
             {
               className: 'a',

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import defaultPrismTheme from 'prism-react-renderer/themes/palenight';
+import {themes} from 'prism-react-renderer';
 import {Joi, URISchema} from '@docusaurus/utils-validation';
 import type {Options, PluginOptions} from '@docusaurus/theme-classic';
 import type {ThemeConfig} from '@docusaurus/theme-common';
@@ -14,6 +14,7 @@ import type {
   OptionValidationContext,
 } from '@docusaurus/types';
 
+const defaultPrismTheme = themes.palenight;
 const DEFAULT_DOCS_CONFIG: ThemeConfig['docs'] = {
   versionPersistence: 'localStorage',
   sidebar: {

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import Prism from 'prism-react-renderer/prism';
+import {Prism} from 'prism-react-renderer';
 import prismIncludeLanguages from '@theme/prism-include-languages';
 
 prismIncludeLanguages(Prism);
@@ -400,23 +400,20 @@ declare module '@theme/CodeBlock/Content/String' {
 }
 
 declare module '@theme/CodeBlock/Line' {
-  import type {ComponentProps} from 'react';
-  import type Highlight from 'prism-react-renderer';
-
-  // Lib does not make this easy
-  type RenderProps = Parameters<
-    ComponentProps<typeof Highlight>['children']
-  >[0];
-  type GetLineProps = RenderProps['getLineProps'];
-  type GetTokenProps = RenderProps['getTokenProps'];
-  type Token = RenderProps['tokens'][number][number];
+  import type {
+    LineInputProps,
+    LineOutputProps,
+    Token,
+    TokenInputProps,
+    TokenOutputProps,
+  } from 'prism-react-renderer';
 
   export interface Props {
     readonly line: Token[];
     readonly classNames: string[] | undefined;
     readonly showLineNumbers: boolean;
-    readonly getLineProps: GetLineProps;
-    readonly getTokenProps: GetTokenProps;
+    readonly getLineProps: (input: LineInputProps) => LineOutputProps;
+    readonly getTokenProps: (input: TokenInputProps) => TokenOutputProps;
   }
 
   export default function CodeBlockLine(props: Props): JSX.Element;

@@ -15,7 +15,8 @@ import {
   containsLineNumbers,
   useCodeWordWrap,
 } from '@docusaurus/theme-common/internal';
-import Highlight, {defaultProps, type Language} from 'prism-react-renderer';
+import {Highlight, type Language} from 'prism-react-renderer';
+import Prism from 'prismjs';
 import Line from '@theme/CodeBlock/Line';
 import CopyButton from '@theme/CodeBlock/CopyButton';
 import WordWrapButton from '@theme/CodeBlock/WordWrapButton';
@@ -74,16 +75,17 @@ export default function CodeBlockString({
       {title && <div className={styles.codeBlockTitle}>{title}</div>}
       <div className={styles.codeBlockContent}>
         <Highlight
-          {...defaultProps}
+          prism={Prism}
           theme={prismTheme}
           code={code}
           language={(language ?? 'text') as Language}>
-          {({className, tokens, getLineProps, getTokenProps}) => (
+          {({className, style, tokens, getLineProps, getTokenProps}) => (
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
               ref={wordWrap.codeBlockRef}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
+              style={style}>
               <code
                 className={clsx(
                   styles.codeBlockLines,

@@ -42,7 +42,7 @@
     "@types/react-router-config": "*",
     "clsx": "^1.2.1",
     "parse-numeric-range": "^1.3.0",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.0.6",
     "tslib": "^2.6.0",
     "utility-types": "^3.10.0"
   },

@@ -254,7 +254,7 @@ export function parseLines(
 }
 
 export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties {
-  const mapping: {[name: keyof PrismTheme['plain']]: string} = {
+  const mapping: {[name: string]: string} = {
     color: '--prism-color',
     backgroundColor: '--prism-background-color',
   };

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import darkTheme from 'prism-react-renderer/themes/vsDark/index.cjs.js';
+import {themes} from 'prism-react-renderer';
+
+const darkTheme = themes.vsDark;
 
 export default {
   plain: {

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import lightTheme from 'prism-react-renderer/themes/github/index.cjs.js';
+import {themes} from 'prism-react-renderer';
+
+const lightTheme = themes.github;
 
 export default {
   ...lightTheme,

@@ -13636,11 +13636,19 @@ pretty-time@^1.1.0:
   resolved "https://registry.yarnpkg.com/pretty-time/-/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e"
   integrity sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==
 
-prism-react-renderer@^1.0.1, prism-react-renderer@^1.3.5:
+prism-react-renderer@^1.0.1:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz#786bb69aa6f73c32ba1ee813fbe17a0115435085"
   integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==
 
+prism-react-renderer@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-2.0.6.tgz#24f0c1afbc07d4a268677fb05e77079ea80b6a2f"
+  integrity sha512-ERzmAI5UvrcTw5ivfEG20/dYClAsC84eSED5p9X3oKpm0xPV4A5clFK1mp7lPIdKmbLnQYsPTGiOI7WS6gWigw==
+  dependencies:
+    "@types/prismjs" "^1.26.0"
+    clsx "^1.2.1"
+
 prismjs@^1.29.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"