Code

import Code from 'frui/dist/formats/Code';

Copy

Props

Name	Type	Required	Notes
children	string	Yes	Get code from children
language	string	Yes	Set programming language
copy	boolean	No	Show copy button
copyFunction	function	No	Additional behavior for copy button
className	string	No	Additional classes to the code block
inline	boolean	No	Inline code block
numbers	boolean	No	Show line numbers
syntaxStyle	React Object	No	Custom syntax style
quote	boolean	No	Wrap inline code block in quotes

Basics

print("Hello, world!")

<Code language="python">
  print("Hello, world!")
</Code>

Copy

Defining a code block requires passing a language prop to the component.

attributes: [Object object]

<Code>{`attributes: [Object object]`}</Code>

Copy

Not supplying a language prop will instead create an inline component.

Customize

You can use different languages for a code block.

Line Numbers

Line numbers can be added to a code block by passing the numbers prop.

console.log("Hello, world!");

<Code language="typescript" numbers>
  console.log("Hello, world!");
</Code>

Copy

Copy Button

A copy button can be added to a code block by passing the copy prop. To customize the behavior of the copy button, you can pass a function to the onCopy prop.

console.log("Hello, world!");

Copy

<Code language="typescript"
  copy onCopy={() => alert("Code copied!")}
>
  console.log("Hello, world!");
</Code>

Copy

Formats

Color