CodeInline

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

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 console.log('Hello, World!'), you can specify the language for syntax highlighting.

Examples

  • Basic

    View Source

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

    import { CodeInline } from 'renoun/components'

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

  • Allow Copy

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

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

API Reference

CodeInline

({ paddingX, paddingY, shouldAnalyze, ...props }: CodeInlineProps) => React.JSX.Element

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

Parameters
CodeInlineProps
Returns
Element

parseCodeProps

({ children, ...props }: React.ComponentProps<NonNullable<MDXComponents["code"]>>) => { children: string; language?: Languages; } & Omit<React.ComponentProps<NonNullable<MDXComponents["code"]>>, "children">

Parses the props of an MDX code element for passing to CodeInline.

Parameters

*

any
Returns
{ children: string; language?: Languages | undefined; } & Omit<any, "children">

CodeInlineProps

CodeInlineProps
Properties

children *

string

Code snippet to be highlighted.

language

Languages | undefined

Language of the code snippet.

allowCopy

string | boolean | undefined

Show or hide a persistent button that copies the children string or provided text to the clipboard.

allowErrors

string | boolean | undefined

Whether or not to allow errors when a language is specified. Accepts a boolean or comma-separated list of allowed error codes.

showErrors

boolean | undefined

Show or hide error diagnostics when a language is specified.

shouldAnalyze

boolean | undefined

Whether or not to analyze the source code for type errors and provide quick information on hover.

paddingX

string | undefined

Horizontal padding to apply to the wrapping element.

paddingY

string | undefined

Vertical padding to apply to the wrapping element.

css

CSSObject | undefined

CSS styles to apply to the wrapping element.

className

string | undefined

Class name to apply to the wrapping element.

style

React.CSSProperties | undefined

Style to apply to the wrapping element.

Last updated