CodeInline

Renders an inline code element with optional syntax highlighting and copy button.

In React, <span style={{ color: 'blue' }} /> changes the color of the text to blue.

import { CodeInline } from 'renoun'

export function Basic() {
  return (
    <p>
      In React,{' '}
      <CodeInline language="jsx">{`<span style={{ color: 'blue' }} />`}</CodeInline>{' '}
      changes the color of the text to blue.
    </p>
  )
}

In development, the component uses a Suspense fallback to render immediately while asynchronous syntax highlighting and analysis load in the background. In production, it renders the fully-resolved code block directly.

MDX Inline Code

When using MDX with the rehypePlugins from renoun/mdx you can prefix the inline code with a language similar to fenced code blocks. For example:

When using inline code `js console.log('Hello, World!')`, you can specify the language for syntax highlighting.

When using inline code js console.log('Hello, World!'), you can specify the language for syntax highlighting.

Examples

  • Allow Copy

    View Source
    npx create-renoun
    import { CodeInline } from 'renoun'

export function AllowCopy() {
  return (
    <CodeInline allowCopy language="sh" paddingX="0.8em" paddingY="0.5em">
      npx create-renoun
    </CodeInline>
  )
}

API Reference

Last updated