CodeBlock

Source code

console.log("Hello world");

import { CodeBlock } from "rfui";

#Basic

console.log("Hello world");

<CodeBlock code={`console.log("Hello world");`} />

#Whitespace

Preserving whitespace and line breaks is a little tricky. In short, just try to follow the example below and make sure you use a template string instead of a normal string.

function sayHello() {
  console.log("Hello world");
}

<CodeBlock
  language="ts"
  code={`function sayHello() {
  console.log("Hello world");
}`}
/>

#Language

See this list. And make sure when you download Prism (see Getting started) that you check off the languages you need.

const firstName = 'John';
const lastName = 'Doe';
const fullName = firstName + " " + lastName;

<CodeBlock
 language="ts"
 code={`const firstName = 'John';
const lastName = 'Doe';
const fullName = firstName + " " + lastName;`}
/>

#Props

Prop	Required	Default	Type and notes
`code`	✔	-	`string` Preserving whitespace and line breaks is a little tricky. In short, just try to follow the example here and make sure you use a template string instead of a normal string.
`language`	-	-	`string` See this list. And make sure when you download Prism (see Getting started) that you check off the languages you need.
`...rest`	-	-	`ComponentProps<"pre">` See the docs for rest parameters. For `CodeBlock`, you could pass anything you normally would pass to `<pre>` because the return value looks something like this: `<pre class={className} {...restWithoutClass}><code>{code}</code></pre>`