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

CodeInlineProps

CodeInlineProps
Properties

children *

string

Code snippet to be highlighted.

language

Languages

Language of the code snippet.

allowCopy

boolean | string

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

allowErrors

boolean | string

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

showErrors

boolean

Show or hide error diagnostics when a language is specified.

shouldAnalyze

boolean

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

paddingX

string

Horizontal padding to apply to the wrapping element.

paddingY

string

Vertical padding to apply to the wrapping element.

css

CSSObject

CSS styles to apply to the wrapping element.

className

string

Class name to apply to the wrapping element.

style

React.CSSProperties

Style to apply to the wrapping element.

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

(props: React.ComponentProps<"code">) => { children: string; language?: Languages; } & Omit<React.ComponentProps<"code">, "children" | "className" | "style">

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

Parameters

props *

React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
Returns
{ children: string; language?: Languages | undefined; } & Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "style" | ... 1 more ... | "children">
Last updated