Replace prism-react-renderer with react-syntax-highlighter

.storybook/main.cjs

@@ -7,6 +7,7 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-essentials"
   ],
+  "framework": "@storybook/react",
   "core": {
     "builder": "storybook-builder-vite"
   }

package.json

@@ -17,11 +17,11 @@
     "fela": "^12.0.2",
     "fela-dom": "^12.0.2",
     "fs-extra": "^10.0.0",
-    "prism-react-renderer": "^1.2.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-fela": "^12.0.2",
     "react-head": "^3.4.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rehype-slug": "^5.0.1",
     "storybook-builder-vite": "^0.1.10",
     "tropical-islands": "^1.0.0",

src/components/TropicalCodeBlock/TropicalCodeBlock.jsx

@@ -1,45 +1,22 @@
 /*
-This component is used to render MDX fenced code blocks (```)
-You can change it to suit your needs. For more info:
-https://mdxjs.com/guides/syntax-highlighting
-https://github.com/FormidableLabs/prism-react-renderer
+<TropicalCodeBlock> is used by <Renderer> (in entry-server.jsx) to render MDX fenced code blocks, e.g.
 
-⚠️ prism-react-renderer only highlights certain languages by default:
-https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js
+```js
+console.log('Hello world')
+```
 
-To add more languages, uncomment this and import the syntax you need: */
-// import Prism from 'prism-react-renderer/prism';
-// ;(typeof global !== 'undefined' ? global : window).Prism = Prism
-// import 'prismjs/components/prism-ruby'
+You can restyle it and change it to suit your needs. For more info:
+https://mdxjs.com/guides/syntax-highlighting (Tropical currently does "Runtime" syntax highlighting — though only during prerendering)
+https://github.com/react-syntax-highlighter/react-syntax-highlighter
+*/
 
-import { useFela } from 'react-fela'
-import Highlight, { defaultProps } from 'prism-react-renderer'
-import dracula from 'prism-react-renderer/themes/dracula'
-
-export function TropicalCodeBlock({ children, language }) {
-  const { css } = useFela()
-
-  // Tropical tweaks to the dracula theme
-  const tropicalOverrideStyles = css({
-    borderRadius: '4px',
-    fontSize: '0.9rem',
-    overflow: 'auto',
-    padding: '15px'
-  })
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 
+export function TropicalCodeBlock ({ children, language }) {
   return (
-    <Highlight {...defaultProps} code={children.trim()} language={language} theme={dracula}>
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <pre className={`${className} ${tropicalOverrideStyles}`} style={{ ...style }}>
-          {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token, key })} />
-              ))}
-            </div>
-          ))}
-        </pre>
-      )}
-    </Highlight>
+    <SyntaxHighlighter language={language} style={dracula} customStyle={{ fontSize: '0.9rem' }}>
+      {children}
+    </SyntaxHighlighter>
   )
 }

src/components/TropicalCodeBlock/TropicalCodeBlock.stories.mdx

@@ -54,3 +54,31 @@ See <a href='https://github.com/FormidableLabs/prism-react-renderer#theming'>pri
 >
   {Template.bind({})}
 </Story>
+
+### JSX
+
+<Story
+  name='Ruby'
+  args={{
+    children: `def relax (drink = 'Singapore Sling')
+  puts "Welcome to Tropical! Enjoy a #{drink}."
+end`,
+    language: 'ruby'
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+### No language
+
+<Story
+  name='No language'
+  args={{
+    children: `This is
+      not
+  any particular
+        language`
+  }}
+>
+  {Template.bind({})}
+</Story>

src/components/TropicalPhotoButton/TropicalPhotoButton.jsx

@@ -11,7 +11,7 @@ opt it (or a parent component) into hydration.
 See https://tropical.js.org/docs/browser-js
 */
 
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { useFela } from 'react-fela'
 import image from './gunayala.jpg'
 

src/entry-server.jsx

@@ -13,7 +13,7 @@ export class Renderer {
   feeds = null
   transformedTemplate = null
 
-  constructor (transformedTemplate) {
+  constructor(transformedTemplate) {
     this.pages = gatherPages()
     this.feeds = gatherFeeds()
     this.transformedTemplate = transformedTemplate
@@ -49,8 +49,11 @@ export class Renderer {
         <RendererProvider renderer={felaRenderer}>
           <MDXProvider
             components={{
-              pre: (props) => <div {...props} />,
-              code: ({ className, ...props }) => <TropicalCodeBlock language={className?.replace(/language-/, '')} {...props}/>
+              pre: ({ children }) => (
+                <TropicalCodeBlock language={children.props.className?.replace(/language-/, '')}>
+                  {children.props.children.trim()}
+                </TropicalCodeBlock>
+              )
             }}
           >
             {Object.entries(this.feeds).map(([pathname, { type }]) => (

vite.config.js

@@ -8,7 +8,7 @@ import rehypeSlug from 'rehype-slug'
 const dir = dirname(fileURLToPath(import.meta.url))
 
 export default defineConfig({
-  plugins: [react(), mdx({ rehypePlugins: [rehypeSlug] })],
+  plugins: [react(), mdx({ rehypePlugins: [rehypeSlug], providerImportSource: '@mdx-js/react' })],
   build: {
     assetsInlineLimit: 0,
     rollupOptions: {

vite.config.server.js

@@ -3,8 +3,8 @@ import react from '@vitejs/plugin-react'
 import mdx from '@mdx-js/rollup'
 import rehypeSlug from 'rehype-slug'
 
-export default defineConfig({
-  plugins: [react(), mdx({ rehypePlugins: [rehypeSlug] })],
+export const config = {
+  plugins: [react(), mdx({ rehypePlugins: [rehypeSlug], providerImportSource: '@mdx-js/react' })],
   build: {
     assetsInlineLimit: 0,
     rollupOptions: {
@@ -13,4 +13,6 @@ export default defineConfig({
       }
     }
   }
-})
+}
+
+export default defineConfig(config)

yarn.lock

@@ -5969,7 +5969,7 @@ header-case@^2.0.4:
     capital-case "^1.0.4"
     tslib "^2.0.3"
 
-highlight.js@^10.1.1, highlight.js@~10.7.0:
+highlight.js@^10.1.1, highlight.js@^10.4.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
@@ -6953,7 +6953,7 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-lowlight@^1.14.0:
+lowlight@^1.14.0, lowlight@^1.17.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
   integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
@@ -8505,12 +8505,7 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
-prism-react-renderer@^1.2.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.1.tgz#88fc9d0df6bed06ca2b9097421349f8c2f24e30d"
-  integrity sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==
-
-prismjs@^1.21.0, prismjs@~1.27.0:
+prismjs@^1.21.0, prismjs@^1.27.0, prismjs@~1.27.0:
   version "1.27.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
   integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
@@ -8888,6 +8883,17 @@ react-syntax-highlighter@^13.5.3:
     prismjs "^1.21.0"
     refractor "^3.1.0"
 
+react-syntax-highlighter@^15.5.0:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
+  integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.27.0"
+    refractor "^3.6.0"
+
 react-textarea-autosize@^8.3.0:
   version "8.3.3"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"
@@ -8962,7 +8968,7 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-refractor@^3.1.0:
+refractor@^3.1.0, refractor@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
   integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==