Fix prism re-highlighting code (#153)

Author: rohit-gohri

.changeset/rotten-windows-enjoy.md

@@ -0,0 +1,5 @@
+---
+'docusaurus-theme-redoc': patch
+---
+
+Fix prism re-highlighting all code on load

packages/docusaurus-theme-redoc/src/global.ts

@@ -0,0 +1,11 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+if (ExecutionEnvironment.canUseDOM) {
+  /**
+   * @see https://github.com/rohit-gohri/redocusaurus/issues/89#issuecomment-942256382
+   */
+  // @ts-expect-error prism global
+  window.Prism = window.Prism || {};
+  // @ts-expect-error prism global
+  window.Prism.manual = true;
+}

packages/docusaurus-theme-redoc/src/index.ts

@@ -53,7 +53,10 @@ export default function redocTheme(
       return path.join(__dirname, '..', 'src', 'theme');
     },
     getClientModules() {
-      return [path.join(__dirname, 'custom.css')];
+      return [
+        path.join(__dirname, 'custom.css'),
+        path.join(__dirname, 'global.js'),
+      ];
     },
   };
 }

packages/docusaurus-theme-redoc/src/redocData.ts

@@ -1,4 +1,4 @@
-import { RedocRawOptions } from 'redoc';
+import type { RedocRawOptions } from 'redoc';
 import merge from 'lodash/merge';
 import { GlobalData, RedocThemeOverrides, ThemeOptions } from './types/options';
 

packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import { ThemeProvider } from 'styled-components';
+import '../../global';
 import { SchemaDefinition } from 'redoc';
 import { useSpec } from '../../utils/useSpec';
 import { useSpecData } from '../useSpecData';

packages/docusaurus-theme-redoc/src/theme/Redoc/Redoc.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
+import '../../global';
 import { Redoc as RedocComponent } from 'redoc';
 import { SpecProps } from '../../types/common';
 import { useSpec } from '../../utils/useSpec';

packages/docusaurus-theme-redoc/src/theme/Redoc/ServerStyles.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../../global';
 import { AppStore, Redoc } from 'redoc';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { renderToString } from 'react-dom/server';

packages/docusaurus-theme-redoc/src/theme/Redoc/Styles.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../../global';
 import type { AppStore } from 'redoc';
 
 /**

packages/docusaurus-theme-redoc/src/utils/useSpec.ts

@@ -3,6 +3,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import { usePluginData } from '@docusaurus/useGlobalData';
 import { useColorMode } from '@docusaurus/theme-common';
+import '../global';
 import { AppStore, RedocRawOptions } from 'redoc';
 import { SpecProps } from '../types/common';
 import { GlobalData } from '../types/options';