docs: ScottAgirs/Add inline code example

[ScottAgirs]

If merged, this will add a usage example for inline code snippets

Why?

I couldn't find documentation on how to use highlighting for inline code snippets. Took me a few minutes to hack it together, so I thought this may be useful and save these minutes for some in future.

Please pardon the interruption, if I have missed instructions for this.

Signed-off-by: ScottAgirs [email protected]

[ZakKa89]

Whoa really old PR but a really important thing since I had no idea how else to differentiate between inline code blocks and others. I am using MDXProvider from @mdx/react and I couldn't figure out a way to pass inline vs normal code blocks so I basically checked if there's a className.

Here's my code.

export const SyntaxHighlighter = ({ className, children }) => {
  // remove 'language-' from className
  const language = className?.replace('language-', '') || 'jsx'
  if (className == 'pre') console.log({ children })

  // workaround to prevent inline code from being wrapped in a pre tag
  // Make to sure to always add the language class to the code tag if you don't want inline code
  const isInline = !className

  if (isInline) {
    return (
      <Highlight Prism={defaultProps.Prism} code={children} language="jsx">
        {({ className, style, tokens, getLineProps, getTokenProps }) =>
          tokens.map((line, i) => (
            <code
              // eslint-disable-next-line
              {...getLineProps({ key: i, line })}
              style={style}
              className={className}>
              {line.map((token, key) => (
                <span {...getTokenProps({ key, token })} />
              ))}
            </code>
          ))
        }
      </Highlight>
    )
  }

  return (
    <Highlight Prism={defaultProps.Prism} code={children} language={language}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={`${className}`} style={style}>
          {tokens.map((line, i) => (
            // eslint-disable-next-line
            <div {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                // eslint-disable-next-line
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  )

usage with @mdx-js/react

import { SyntaxHighlighter } from '@/lib/SyntaxHighlighter'

// ssr: false to prevent rehydration errors on the client
const MDXProvider = dynamic(
  () => import('@mdx-js/react').then((mod) => mod.MDXProvider),
  {
    ssr: false,
  }
)

const components = {
  code: SyntaxHighlighter,

  // code: SyntaxHighlighter,
}

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MDXProvider components={components}>
      <Component {...pageProps} />
    </MDXProvider>
  )
}

// custom typefaces