CodeInline

This component is automatically set up to override the code element when using the Next.js plugin.

Examples

  • Basic

    View Source

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

    import React from 'react'
import { CodeInline } from 'renoun/components'

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
    import React from 'react'
import { CodeInline } from 'renoun/components'

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

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

Parameters
CodeInlineProps
Return
Promise<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.

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.

allowErrors

string | boolean | undefined

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

Last updated