docs: update prism-react-render to v2

Author: mrholek

packages/docs/package.json

@@ -29,7 +29,7 @@
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
     "@coreui/react-chartjs": "^2.1.2",
-    "@coreui/utils": "^2.0.1",
+    "@coreui/utils": "^2.0.2",
     "@docsearch/css": "^3.3.4",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
@@ -50,7 +50,7 @@
     "gatsby-transformer-sharp": "^5.9.0",
     "glob": "^7.2.0",
     "globby": "^11.1.0",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.0.4",
     "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

packages/docs/src/components/CodeBlock.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Highlight, { defaultProps } from 'prism-react-renderer'
+import { Highlight } from 'prism-react-renderer'
 
 interface CodeBlockProps {
   children: any
@@ -13,7 +13,7 @@ const CodeBlock: FC<CodeBlockProps> = ({ children }) => {
 
   return (
     <div className="highlight">
-      <Highlight {...defaultProps} theme={undefined} code={_children?.trim()} language={language}>
+      <Highlight code={_children?.trim()} language={language} theme={{ plain: {}, styles: [] }}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre className={className} style={{ ...style }}>
             {tokens.map((line, i) => (

packages/docs/src/components/ScssDocs.tsx

@@ -1,8 +1,12 @@
 import React, { FC } from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
-import Highlight, { defaultProps } from 'prism-react-renderer'
+import { Highlight, Prism } from 'prism-react-renderer'
 
 const ScssDocs: FC = ({ file, capture }: { file?: string; capture?: string }) => {
+  ;(typeof global === 'undefined' ? window : global).Prism = Prism
+  // eslint-disable-next-line unicorn/prefer-module
+  require('prismjs/components/prism-scss')
+
   const data = useStaticQuery(graphql`
     query {
       allFile(filter: { ext: { eq: ".scss" } }) {
@@ -29,15 +33,15 @@ const ScssDocs: FC = ({ file, capture }: { file?: string; capture?: string }) =>
   return (
     <div className="highlight">
       <Highlight
-        {...defaultProps}
         code={code
           .replaceAll('--#{$prefix}', '--cui-')
           .replaceAll('\n  -', '\n-')
           .replaceAll('\n  @', '\n@')}
-        language="sass"
+        language="scss"
+        theme={{ plain: {}, styles: [] }}
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <pre className={className}>
+          <pre className={className} style={{ ...style }}>
             {tokens.map((line, i) => {
               const lineProps = getLineProps({ line, key: i })
               return (