Code

An inline code sample with syntax highlighting.

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

Props

Code props
Prop	Type	Description
`code` (required)	`string`	Source code to display
`language` (required)	`string`	Language identifier for syntax highlighting
`className`	`string`	Additional CSS classes
`highlightLines`	`number[]`	Line numbers to highlight
`showLineNumbers`	`boolean`	Shows the line number gutter for multi-line code default value: true
`size`	`"sm" \| "md" \| "lg"`	Font size variant default value: "md"

Required.

Usage

console.log('Hello, world') // single-line (small)

console.log('Hello, world') // single-line (medium)

console.log('Hello, world') // single-line (large)

1// Code with multiple lines (small)
2      export default defineConfig({
3      projectId: '<projectId>',
4      dataset: 'production',
5      plugins: [structureTool()],
6      schema: {
7        types: [],
8      },
9      })

1// Code with multiple lines (medium)
2      export default defineConfig({
3      projectId: '<projectId>',
4      dataset: 'production',
5      plugins: [structureTool()],
6      schema: {
7        types: [],
8      },
9      })

1// Code with multiple lines (large)
2      export default defineConfig({
3      projectId: '<projectId>',
4      dataset: 'production',
5      plugins: [structureTool()],
6      schema: {
7        types: [],
8      },
9      })

1import { Code } from "@sanity/sanity-id/components/code"
2
3export default () => {
4                return (
5                  <div className="flex flex-col gap-y-48">
6                    <Code
7                      size="sm"
8                      code="console.log('Hello, world') // single-line (small)"
9                      language="typescript"
10                    />
11                    <Code
12                      size="md"
13                      code="console.log('Hello, world') // single-line (medium)"
14                      language="typescript"
15                    />
16                    <Code
17                      size="lg"
18                      code="console.log('Hello, world') // single-line (large)"
19                      language="typescript"
20                    />
21                    <Code
22                      language="typescript"
23                      size="sm"
24                      highlightLines={[3]}
25                      code={`
26      // Code with multiple lines (small)
27      export default defineConfig({
28      projectId: '<projectId>',
29      dataset: 'production',
30      plugins: [structureTool()],
31      schema: {
32        types: [],
33      },
34      })
35                      `}
36                    />
37                    <Code
38                      language="typescript"
39                      size="md"
40                      code={`
41      // Code with multiple lines (medium)
42      export default defineConfig({
43      projectId: '<projectId>',
44      dataset: 'production',
45      plugins: [structureTool()],
46      schema: {
47        types: [],
48      },
49      })
50                      `}
51                    />
52                    <Code
53                      language="typescript"
54                      size="lg"
55                      code={`
56      // Code with multiple lines (large)
57      export default defineConfig({
58      projectId: '<projectId>',
59      dataset: 'production',
60      plugins: [structureTool()],
61      schema: {
62        types: [],
63      },
64      })
65                      `}
66                    />
67                  </div>
68                )
69              }