Interpolate variables inside codeblock

[zeeyang]

Maybe this is a mdx/rehype question. MDX supports interpolating variables like so,

export const name = "Bob"

## Hello {name}

Is it possible to do the same inside code blocks?

export const name = "Bob"

'''js
const nameVar = {name}
'''

[robations]

Hey, did you find an answer to this?

I'm guessing you’d need to use:

<Code language="js">
const nameVar = {name}
</Code>

but I'm not sure what Code would be or from where you can import it.

[robations]

Similar question here for rehype:

rehype-pretty/rehype-pretty-code#47

[robations]

Docusaurus offers a <CodeBlock> component:

https://docusaurus.io/docs/markdown-features/code-blocks#using-jsx-markup

[robations]

I'm part way there. Nextra exports some components (as can be found in package.json/exports).

import { Pre } from "nextra/components";

<Pre filename="bananas">
{expression}
</Pre>

This will give you a block with Tailwind formatting, consistent with regular code blocks, but w/o syntax highlighting.

[zeeyang]

@robations I ended up using lowlight for syntax highlighting.

import type { ForwardedRef, ReactNode } from 'react';
import type { RootContent, Element, Text } from "hast"
import { createElement, forwardRef } from 'react'
import { lowlight as low } from 'lowlight/lib/core.js'

interface ILowlightProps {
  language?: string;
  value: string;
  prefix?: string;
  subset?: string[];
}

const mapChild = (child: RootContent, index: number): ReactNode | string | null => {
    if (child.type === 'element') {
      const childElement = child as Element
      const children = childElement.children ? childElement.children.map(mapChild) : null
      const childProps = { key: index, ...childElement.properties }
      return createElement(childElement.tagName, childProps, children)
    } else if (child.type === 'text') {
      return (child as Text).value
    } else {
      return null
    }
}

const Lowlight = forwardRef(({ language, value, prefix, subset }: ILowlightProps, ref: ForwardedRef<HTMLPreElement>) => {
  if (process.env.NODE_ENV !== 'production') {
    if (!language && low.listLanguages().length === 0) {
      console.warn('No language definitions seems to be registered. See `Lowlight.registerLanguage`?')
    }
  }
  
  const result = language ? low.highlight(language, value, { prefix }) : low.highlightAuto(value, { prefix, subset })
  const ast = result.children
  const source = ast.length === 0 ? value : ast.map(mapChild)
  
  const codeProps = {
    className: 'hljs nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10',
  }
  
  const preProps = {
    ref,
    className: 'nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-font-medium nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em] contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40',
  }
  
  if (result.data.language) {
    codeProps.className += (' ' + result.data.language)
  }
  
  const code = createElement('code', codeProps, source)
  return createElement('pre', preProps, code)
})

Lowlight.displayName = 'Lowlight'

Lowlight.defaultProps = {
  prefix: 'hljs-'
}

// Lowlight.registerLanguage = low.registerLanguage
export const registerLanguage = low.registerLanguage

export default Lowlight

[robations]

Thanks very much, managed to get this working 👍

For any one else looking at this, I had to add the CSS import from highlight.js:

import "highlight.js/styles/github.css";