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.
API Reference
CodeInline
({ paddingX, paddingY, ...props }: CodeInlineProps) => JSX.ElementRenders an inline code element with optional syntax highlighting and copy button.
Parameters
CodeInlinePropsReturns
ElementCodeInlineProps
CodeInlinePropsProperties
value *
stringCode snippet to be highlighted.
language
Languages | undefinedLanguage of the code snippet.
allowCopy
boolean | undefinedShow or hide a persistent button that copies the value to the clipboard.
allowErrors
string | boolean | undefinedWhether or not to allow errors. Accepts a boolean or comma-separated list of allowed error codes.
paddingX
string | undefinedHorizontal padding to apply to the wrapping element.
paddingY
string | undefinedVertical padding to apply to the wrapping element.
css
CSSObject | undefinedCSS styles to apply to the wrapping element.
className
string | undefinedClass name to apply to the wrapping element.
style
React.CSSProperties | undefinedStyle to apply to the wrapping element.