v1 to v2 Migration Guide

[RudraSen2]

It would be good if this project had a v1 to v2 Migration Guide which will help us to migrate successfully to v2 as the APIs were changed and it is challenging to look for the changes in the API by looking at the README. Any help would be appreciated.

[rohrlaf]

Change module imports

- import Highlight, { defaultProps } from "prism-react-renderer";
+ import { Highlight } from "prism-react-renderer"

const Content = (
-  <Highlight {...defaultProps} code={exampleCode} language="jsx">
+  <Highlight code={exampleCode} language="jsx">

Check language support

By default prism-react-renderer only includes a base set of languages that Prism supports. Depending on your app's build system you may need to await the import or use require to ensure window.Prism exists before importing the custom languages.

See: https://github.com/FormidableLabs/prism-react-renderer#custom-language-support

Install prismjs (if not available yet):

# npm
npm install --save prismjs
# yarn
yarn add prismjs
# pnpm
pnpm add prismjs

Add language component:

import { Highlight, Prism } from "prism-react-renderer";

(typeof global !== "undefined" ? global : window).Prism = Prism
await import("prismjs/components/prism-applescript")
/** or **/
require("prismjs/components/prism-applescript")

[RudraSen2]

Change module imports

- import Highlight, { defaultProps } from "prism-react-renderer";
+ import { Highlight } from "prism-react-renderer"

const Content = (
-  <Highlight {...defaultProps} code={exampleCode} language="jsx">
+  <Highlight code={exampleCode} language="jsx">

Check language support

By default prism-react-renderer only includes a base set of languages that Prism supports. Depending on your app's build system you may need to await the import or use require to ensure window.Prism exists before importing the custom languages.

See: https://github.com/FormidableLabs/prism-react-renderer#custom-language-support

Install prismjs (if not available yet):

# npm
npm install --save prismjs
# yarn
yarn add prismjs
# pnpm
pnpm add prismjs

Add language component:

import { Highlight, Prism } from "prism-react-renderer";

(typeof global !== "undefined" ? global : window).Prism = Prism
await import("prismjs/components/prism-applescript")
/** or **/
require("prismjs/components/prism-applescript")

so is this the whole migration guide?

[rohrlaf]

@RudraSen2 For me this was sufficient. Depending on the features you rely on this list could grow. Please provide an update if you needed to do some more tweaking.

[chris48s]

I found I also needed to update theme imports e.g:

- const theme = require('prism-react-renderer/themes/github')
+ const theme = require('prism-react-renderer').themes.github