Write a rehype plugin to fix live code blocks

Author: hasparus

packages/docs/gatsby-config.js

@@ -1,5 +1,6 @@
 const remarkGfm = require('remark-gfm-1')
 const remarkSlug = require('remark-slug')
+const { rehypeMetaAsAttributes } = require('./src/rehype-meta-props.cjs')
 
 module.exports = {
   siteMetadata: {
@@ -16,6 +17,7 @@ module.exports = {
         extensions: ['mdx', 'md'],
         mdxOptions: {
           remarkPlugins: [remarkGfm, remarkSlug],
+          rehypePlugins: [rehypeMetaAsAttributes],
         },
       },
     },

packages/docs/gatsby-node.js

@@ -1,6 +1,7 @@
 const presets = require('@theme-ui/presets')
 const fs = require('fs')
 const path = require('path')
+const { rehypeMetaAsAttributes } = require('./src/rehype-meta-props.cjs')
 
 const Preset = require.resolve('./src/templates/preset')
 
@@ -58,6 +59,7 @@ module.exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
                   require('remark-slug'),
                   require('remark-gfm-1'),
                 ],
+                rehypePlugins: [rehypeMetaAsAttributes],
               },
             },
           ],

packages/docs/package.json

@@ -18,6 +18,7 @@
     "icon": "npx repng src/components/logo.js -d static -f icon.png -w=32 -h=32 --props='{\"size\":32}'"
   },
   "dependencies": {
+    "unist-util-visit-2": "npm:unist-util-visit@^2.0.2",
     "@babel/helper-string-parser": "^7.22.5",
     "@emotion/react": "^11.11.1",
     "@mdx-js/loader": "^2.3.0",

packages/docs/src/components/code.tsx

@@ -5,6 +5,7 @@ import Prism, { ThemeUIPrismProps } from '@theme-ui/prism'
 import { LiveProvider, LiveEditor, LivePreview, LiveError } from 'react-live'
 import * as themeUI from 'theme-ui'
 import { ComponentPropsWithoutRef } from 'react'
+import { PrismTheme } from 'prism-react-renderer'
 
 const posts = [
   {
@@ -67,7 +68,7 @@ const transformCode = (src) => {
   return `<>${src}</>`
 }
 
-const liveTheme = { styles: [] }
+const liveTheme: PrismTheme = { plain: {}, styles: [] }
 
 export const LiveCode = ({ children, preview, xray }) => {
   const code = stripTrailingNewline(children)
@@ -112,7 +113,12 @@ export const LiveCode = ({ children, preview, xray }) => {
         />
       </div>
       <Themed.pre sx={{ p: 0, mt: 0, mb: 3 }}>
-        <LiveEditor padding="1rem" />
+        <LiveEditor
+          padding="1rem"
+          style={{
+            fontFamily: 'inherit',
+          }}
+        />
       </Themed.pre>
     </LiveProvider>
   )
@@ -136,7 +142,14 @@ const CodeBlock = (props: CodeBlockProps) => {
   }
 
   if (props.live) {
-    return <LiveCode {...props} />
+    return (
+      <LiveCode
+        {...props}
+        style={{
+          fontFamily: 'Menlo',
+        }}
+      />
+    )
   } else {
     const { live: _, filename, ...rest } = props as UsualCodeBlockProps
     if (filename) {

packages/docs/src/pages/components/avatar.mdx

@@ -9,7 +9,7 @@ import { Avatar } from 'theme-ui'
 ```
 
 ```jsx live=true
-<Avatar src={images.logo} />
+<Avatar src={images.logo} sx={{ backgroundColor: 'white' }} />
 ```
 
 ## Variants

packages/docs/src/pages/components/badge.mdx

@@ -23,7 +23,7 @@ import { Badge } from 'theme-ui'
 ```
 
 ```jsx live=true
-<Avatar src={images.logo} />
+<Avatar src={images.logo} sx={{ backgroundColor: 'white' }} />
 <Badge variant='circle' ml={-3} mt={-3}>16</Badge>
 ```
 

packages/docs/src/rehype-meta-props.cjs

@@ -0,0 +1,21 @@
+const visit = require('unist-util-visit-2')
+
+const META_ATTR_REGEX = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g
+
+/** @type {import('unified').Plugin<Array<void>, import('hast').Root>} */
+function rehypeMetaAsAttributes() {
+  return (tree) => {
+    visit(tree, 'element', (node) => {
+      if (node.tagName === 'code' && node.data && node.data.meta) {
+        META_ATTR_REGEX.lastIndex = 0 // Reset regex.
+
+        let match
+        while ((match = META_ATTR_REGEX.exec(node.data.meta))) {
+          node.properties[match[1]] = match[2] || match[3] || match[4] || ''
+        }
+      }
+    })
+  }
+}
+
+module.exports = { rehypeMetaAsAttributes }