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.

This will render the inline code with syntax highlighting based on the specified language when used with MDXComponents.

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) => JSX.Element

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

Parameters
CodeInlineProps
Returns
Element

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