CodeBlock

Display

Code block with syntax highlighting, line numbers, and a copy button.

Props

Prop	Type	Default	Description
`code`	`string`	`""`	Code to display.
`language`	`string`	`"plaintext"`	Language for syntax highlighting (e.g. typescript, vue, bash).
`filename`	`string`	`undefined`	Filename displayed in the header.
`showLineNumbers`	`boolean`	`false`	Show line numbers.
`copyable`	`boolean`	`true`	Show the Copy button.

Examples

TypeScript snippet

utils/add.ts

const greeting = class="ds-token-string">'Hello, World!'

console.log(greeting)

function add(a: number, b: number): number {

return a + b

}

export default { add }

vue

<DsCodeBlock
  code="const greeting = 'Hello, World!'
console.log(greeting)"
  language="typescript"
  filename="hello.ts"
  :show-line-numbers="true"
  :copyable="true"
/>

Skeleton

Use DsCodeBlockSkeleton as a loading placeholder while content is being fetched.

Default (6 lines)

vue

<DsCodeBlockSkeleton />

Short (3 lines)

vue

<DsCodeBlockSkeleton :lines="3" />

Accessibility

The Copy button has a visible label "Copy" / "Copied".

Carousel

EmptyState