Pluma
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Overview
Status
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
VisuallyHidden
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1

CodeBlock

Github
Storybook

Displays a block of code with syntax highlighting.

Importing

The component can be imported via:

import { CodeBlock } from '@customerio/pluma-components/react';

Usage

The CodeBlock component requires two arguments:

  • code - a string of code to be shown
  • language - the language of the code

The component uses Shiki for syntax highlighting, and language must be one of the languages it supports.

export function Example() {
	return <div>Hello, world!</div>;
}
import { CodeBlock } from '@customerio/pluma-components/react';

const code = `export function Example() {
	return <div>Hello, world!</div>;
}`;

export default function Example() {
	return <CodeBlock
		code={code}
    language="jsx"
	/>
}

Themes

The CodeBlock component supports all themes supported by Shiki. They will be loaded lazily when the component is rendered.

To change the theme or display mode, the following props are available:

  • lightTheme - the theme to use when the mode is light (by default, catppuccin-latte)
  • darkTheme - the theme to use when the mode is dark (by default, catppuccin-mocha)
  • mode - the display mode to use (by default, dark)

The same values can be configured for every CodeBlock under a PlumaProvider with componentConfig.PlumaCodeBlock. Set shouldMatchColorScheme to use the provider's resolved light or dark color scheme as the CodeBlock mode. An explicit prop on a CodeBlock still overrides the provider-level default.

For example, to use the default light mode, simply set mode to light.

export function Example() {
	return <div>Hello, world!</div>;
}
import { CodeBlock } from '@customerio/pluma-components/react';

const code = `export function Example() {
	return <div>Hello, world!</div>;
}`;

export default function Example() {
	return <CodeBlock
		code={code}
    language="jsx"
		mode="light"
	/>
}

Copy to clipboard

By default, the component renders a "Copy to clipboard" button. This can be disabled by setting withCopyButton to false.

export function Example() {
	return <div>Hello, world!</div>;
}
import { CodeBlock } from '@customerio/pluma-components/react';

const code = `export function Example() {
	return <div>Hello, world!</div>;
}`;

export default function Example() {
	return <CodeBlock
		code={code}
    language="jsx"
		withCopyButton={false}
	/>
}

Line numbers

The component supports showing line numbers in the left gutter by setting withLineNumbers to true. Additionally, it's possible to specify the starting line number with startLineNumber - in case the code block is not starting from line 1.

export function Example() {
	return <div>Hello, world!</div>;
}
export function Example() {
	return <div>Hello, world!</div>;
}
import { CodeBlock } from '@customerio/pluma-components/react';

const code = `export function Example() {
	return <div>Hello, world!</div>;
}`;

export default function Example() {
	return (<>
		<CodeBlock
			code={code}
			language="jsx"
			withLineNumbers={true}
		/>
		<CodeBlock
			mt="200"
			code={code}
			language="jsx"
			withLineNumbers={true}
			startLineNumber={10}
		/>
	</>);
}

JSON block folding

For JSON code blocks, the component supports collapsing/expanding nested blocks. When language is json this is enabled by default, but can be disabled by setting withLineFoldingControls to false.

{
	"menu": {
		"id": "file",
		"value": "File",
		"popup": {
			"menuitem": [{
					"value": "New",
					"onclick": "CreateNewDoc()"
				},
				{
					"value": "Open",
					"onclick": "OpenDoc()"
				},
				{
					"value": "Close",
					"onclick": "CloseDoc()"
				}
			]
		}
	}
}
import { CodeBlock } from '@customerio/pluma-components/react';

const code = `{
	"menu": {
		"id": "file",
		"value": "File",
		"popup": {
			"menuitem": [{
					"value": "New",
					"onclick": "CreateNewDoc()"
				},
				{
					"value": "Open",
					"onclick": "OpenDoc()"
				},
				{
					"value": "Close",
					"onclick": "CloseDoc()"
				}
			]
		}
	}
}`;

export default function Example() {
	return <CodeBlock
		code={code}
    language="json"
	/>
}

Highlights

The component supports highlighting specific lines and/or parts of lines via the highlights prop.

It accepts an array with values of the following types:

  • a number - highlights a specific line
  • a [number, number] tuple - highlights a range of lines (inclusive)
  • an object of shape { line: number } - highlights a specific line
  • an object of shape { lines: [number, number] | [number, number][] } - highlights a range or multiple ranges of lines
  • an object of shape { line: number, columns: [number, number] | [number, number][] } - highlights specific columns in a line
    • this only highlights the specified columns, but not the line itself
client := customerio.NewAPIClient("Insert your App API Key");

request := customerio.SendEmailRequest{
	TransactionalMessageID: "signup_with_existing_account",
	Identifiers: map[string]string{
		"id": "Customer id",
	},
	To: "Recipient email",
}

body, err := client.SendEmail(context.Background(), &request)
if err != nil {
	fmt.Println(err)
}

fmt.Println(body)
import { CodeBlock } from '@customerio/pluma-components/react';

const code = `client := customerio.NewAPIClient("Insert your App API Key");

request := customerio.SendEmailRequest{
	TransactionalMessageID: "signup_with_existing_account",
	Identifiers: map[string]string{
		"id": "Customer id",
	},
	To: "Recipient email",
}

body, err := client.SendEmail(context.Background(), &request)
if err != nil {
	fmt.Println(err)
}

fmt.Println(body)`;

const highlights = [
	1,
	{
		line: 1,
		columns: [36, 59],
	},
	{
		line: 6,
		columns: [10, 21],
	},
	{
		line: 8,
		columns: [7, 22],
	},
	[11, 14]
];

export default function Example() {
	return <CodeBlock
		code={code}
    language="go"
		highlights={highlights}
	/>
}

Variables

Similar to highlights, the component supports inserting label-like elements into the code block to highlight sections that should be replaced with other values.

It accepts an array of objects with the following keys:

  • line - the line number to insert the label at
  • column - the column number to insert the label at
  • value - the string value to insert into the label

The inserted variable labels won't be included in the content when the code block is copied to the clipboard.

client := customerio.NewAPIClient("");

request := customerio.SendEmailRequest{
	TransactionalMessageID: "signup_with_existing_account",
	Identifiers: map[string]string{
		"id": "",
	},
	To: "",
}

body, err := client.SendEmail(context.Background(), &request)
if err != nil {
	fmt.Println(err)
}

fmt.Println(body)
import { CodeBlock } from '@customerio/pluma-components/react';

const code = `client := customerio.NewAPIClient("");

request := customerio.SendEmailRequest{
	TransactionalMessageID: "signup_with_existing_account",
	Identifiers: map[string]string{
		"id": "",
	},
	To: "",
}

body, err := client.SendEmail(context.Background(), &request)
if err != nil {
	fmt.Println(err)
}

fmt.Println(body)`;

const variables = [
	{
		line: 1,
		column: 36,
		value: 'Insert your App API Key',
	},
	{
		line: 6,
		column: 10,
		value: 'Customer id',
	},
	{
		line: 8,
		column: 7,
		value: 'Recipient email',
	},
];

export default function Example() {
	return <CodeBlock
		code={code}
    language="go"
		variables={variables}
	/>
}

API

PlumaCodeBlock extends Box

code  string (required)

The code to be formatted

darkTheme  "none" | BundledTheme | undefined

Default:'catppuccin-mocha'

The theme to use for syntax highlighting when mode is dark. Must be one of the themes supported by Shiki.

highlights  (number | [number, number] | { line: number; } | { lines: [number, number] | [number, number][]; } | { line: number; columns: [number, number] | [number, number][]; })[] | undefined

Highlight specific lines and/or columns. Multiple formats are supported:

  • a number - highlights a specific line
  • a [number, number] tuple - highlights a range of lines (inclusive)
  • an object of shape { line: number } - highlights a specific line
  • an object of shape { lines: [number, number] | [number, number][] } - highlights a range or multiple ranges of lines
  • an object of shape { line: number, columns: [number, number] | [number, number][] } - highlights specific columns in a line
    • this only highlights the specified columns, but not the line itself

isRounded  boolean | undefined

Default:true

By default the code block renders with rounded corners, but you can disable this in case you need to embed it elsewhere with matching styling.

language  BundledLanguage | SpecialLanguage | "plain" (required)

The language to use for syntax highlighting. Must be one of the languages supported by Shiki.

languageDisplayName  string | undefined

When showing the language label, the component will use the language's displayName retrieved from Shiki. If you want to override the value, you can provide one with languageDisplayName.

lightTheme  "none" | BundledTheme | undefined

Default:'catppuccin-latte'

The theme to use for syntax highlighting when mode is light. Must be one of the themes supported by Shiki.

mode  ResolvedColorScheme | undefined

Default:dark

What theme mode to use.

startLineNumber  number | undefined

Default:1

Number of the first line.

variables  { line: number; column: number; value: string; }[] | undefined

Insert tag-like variables into the code block to highlight sections that should be replaced with other values. As opposed to highlights, the inserted variable tags won't be copied with the code block content.

withCopyButton  boolean | undefined

Default:true

Whether a "copy to clipboard" button should be shown.

withLanguageLabel  boolean | undefined

Default:false

Whether a label with the current language's display name should be shown.

withLineFoldingControls  boolean | undefined

Whether to show buttons for collapsing/expanding code blocks. Currently only available for JSON code blocks. Defaults to true when the language is json.

withLineNumbers  boolean | undefined

Default:false

Whether line numbers should be shown in the left gutter.

On this page

Importing
Usage
Themes
Copy to clipboard
Line numbers
JSON block folding
Highlights
Variables
API