---
title: "Code"
description: "An inline code sample with syntax highlighting."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/code"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/code.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Code

An inline code sample with syntax highlighting.

```tsx
import { Code } from "@sanity/sanity-id/components/code"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `code` | `string` | yes | — | Source code to display |
| `language` | `string` | yes | — | Language identifier for syntax highlighting |
| `className` | `string` | no | — | Additional CSS classes |
| `highlightLines` | `number[]` | no | — | Line numbers to highlight |
| `showLineNumbers` | `boolean` | no | `true` | Shows the line number gutter for multi-line code |
| `size` | `"sm" \| "md" \| "lg"` | no | `"md"` | Font size variant |

## Usage

```tsx
import { Code } from "@sanity/sanity-id/components/code"

				export default () => {
					return (
						<div className="flex flex-col gap-y-48">
							<Code
								size="sm"
								code="console.log('Hello, world') // single-line (small)"
								language="typescript"
							/>
							<Code
								size="md"
								code="console.log('Hello, world') // single-line (medium)"
								language="typescript"
							/>
							<Code
								size="lg"
								code="console.log('Hello, world') // single-line (large)"
								language="typescript"
							/>
							<Code
								language="typescript"
								size="sm"
								highlightLines={[3]}
								code={`
// Code with multiple lines (small)
export default defineConfig({
projectId: '<projectId>',
dataset: 'production',
plugins: [structureTool()],
schema: {
  types: [],
},
})
								`}
							/>
							<Code
								language="typescript"
								size="md"
								code={`
// Code with multiple lines (medium)
export default defineConfig({
projectId: '<projectId>',
dataset: 'production',
plugins: [structureTool()],
schema: {
  types: [],
},
})
								`}
							/>
							<Code
								language="typescript"
								size="lg"
								code={`
// Code with multiple lines (large)
export default defineConfig({
projectId: '<projectId>',
dataset: 'production',
plugins: [structureTool()],
schema: {
  types: [],
},
})
								`}
							/>
						</div>
					)
				}
```