switch to prism on homepage

components/blocks/Features.tsx

@@ -1,6 +1,6 @@
 import { Actions } from './Actions'
 import { Container } from './Container'
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { Prism } from '../styles/Prism'
 import { tinaField } from 'tinacms/dist/react'
 
 export function FeatureBlock({ data, index }) {
@@ -72,18 +72,17 @@ export function FeatureBlock({ data, index }) {
                       'em',
                   }}
                 >
-                  <SyntaxHighlighter
-                    language={
-                      data.media[0].language
-                        ? data.media[0].language
-                        : 'javascript'
-                    }
-                    useInlineStyles={false}
-                    // wrapLines={true}
-                    // wrapLongLines={true}
-                  >
-                    {data.media[0].code}
-                  </SyntaxHighlighter>
+                  <div className="p-2 [&>pre]:!bg-transparent">
+                    <Prism
+                      lang={
+                        data.media[0].language
+                          ? data.media[0].language
+                          : 'javascript'
+                      }
+                      theme="nightOwl"
+                      value={data.media[0].code}
+                    />
+                  </div>
                 </div>
               </div>
             )}

components/blocks/Story.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { useInView } from 'react-intersection-observer'
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { Container } from './Container'
 import { Actions } from './Actions'
-import type { TinaTemplate } from '@tinacms/cli'
+import { Prism } from '../styles/Prism'
 
 const features = [
   {
@@ -228,16 +227,13 @@ const Pane = ({ data, position, ...props }) => {
                   1.25 * (data.file.textScale ? data.file.textScale : 1) + 'em',
               }}
             >
-              <SyntaxHighlighter
-                language={
-                  data.file.language ? data.file.language : 'javascript'
-                }
-                useInlineStyles={false}
-                // wrapLines={true}
-                // wrapLongLines={true}
-              >
-                {data.file.code}
-              </SyntaxHighlighter>
+              <div className="p-2 [&>pre]:!bg-transparent">
+                <Prism
+                  lang={data.file.language ? data.file.language : 'javascript'}
+                  theme="nightOwl"
+                  value={data.file.code}
+                />
+              </div>
             </div>
           </div>
         )}

components/styles/Prism.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Highlight, themes } from 'prism-react-renderer'
+
+export const Prism = (props: {
+  value: string
+  lang?: string
+  theme?: keyof typeof themes
+}) => {
+  return (
+    <Highlight
+      theme={themes[props.theme || 'github']}
+      code={props.value}
+      language={props.lang || ''}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre className={className} style={style}>
+          {tokens.map((line, i) => (
+            <div {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <span {...getTokenProps({ token, key })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  )
+}

content/blocksPages/home.json

@@ -117,7 +117,7 @@
             {
               "file": "about.mdx",
               "code": "---\ntitle: Collaborate With Your Team\n---\n\nOnline tools help drive your business forward.\nReach new audiences and collaborate with your\nteam – **All in the cloud.**\n\n<Button\ntext=\"Get Started\"\nlink=\"/get-started\"\n/>",
-              "language": "mdx",
+              "language": "markdown",
               "scale": 1,
               "_template": "code"
             }

package.json

@@ -75,6 +75,7 @@
     "parse-numeric-range": "^1.3.0",
     "polished": "^3.4.4",
     "postcss": "^8.4.18",
+    "prism-react-renderer": "^2.0.6",
     "prop-types": "^15.7.2",
     "qs": "^6.9.1",
     "raw-loader": "^4.0.0",
@@ -133,4 +134,4 @@
     "tslint-react": "^4.0.0",
     "typescript": "^4.5.5"
   }
-}
+}