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.

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

  • Allow Copy

    View Source
    npm install renoun
    export function AllowCopy() {
  return (
    <CodeInline
      allowCopy
      value={`npm install renoun`}
      language="sh"
      paddingX="0.8em"
      paddingY="0.5em"
    />
  )
}

API Reference

CodeInline

({ paddingX, paddingY, ...props }: CodeInlineProps) => React.JSX.Element
function CodeInline(CodeInlineProps): 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"]>>) => { value: string; language?: Languages; } & Omit<React.ComponentProps<NonNullable<MDXComponents["code"]>>, "children">
function parseCodeProps(any): { value: string; language?: Languages | undefined; } & Omit<any, "children">

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

Parameters

*

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

CodeInlineProps

CodeInlineProps
Properties

value *

string

Code snippet to be highlighted.

language

Languages | undefined

Language of the code snippet.

allowCopy

boolean | undefined

Show or hide a persistent button that copies the value to the clipboard.

allowErrors

string | boolean | undefined

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

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