#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

code^*

Required

true

Type

string

Default

none

Notes

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

Required

false

Type

string

Default

none

Notes

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

...rest

Required

false

Type

ComponentProps<"pre">

Default

none

Notes

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>