Geist Design System

Code Block

Code Block component used across Vercel and Next.js.

Default
Table.jsx
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

No filename

 
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Highlighted lines
Table.jsx
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Language switcher
Table.jsx
function MyComponent(props) {
	return (
	  <div>
		<h1>Hello, {props.name}!</h1>
		<p>Good to see you</p>
	  </div>
	);
  }

Hidden line numbers
Table.jsx
function MyComponent(props) {
	return (
	  <div>
		<h1>Hello, {props.name}!</h1>
		<p>Good to see you</p>
	  </div>
	);
  }