Code Blocks

Code blocks render syntax-highlighted snippets with a copy button and an optional title. In Markdown they're written as standard fenced code blocks — Scalar reads extra options from the info string after the language name. In MDX, the same fenced syntax works directly.

Properties

Properties are passed through the info string on the opening fence. The first space-separated token (before any name="value" pair) is the title.

Prop	Type	Default	Description
`lang`	`string`	required	The language identifier directly after the opening fence (e.g. `js`, `python`).
`title`	`string`	—	A filename or label shown in the code block header. The first bare token after `lang` is treated as the title.
`lineNumbers`	`boolean`	`false`	Show line numbers. Also accepted as `line-numbers` or `lines`.
`lineNumberStart`	`number`	`1`	First line number when `lineNumbers` is enabled.
`highlight`	`string`	—	Comma-separated line numbers or ranges to highlight (e.g. `1,3-5`).
`focus`	`string`	—	Lines to focus while dimming the rest.
`added`	`string`	—	Lines marked as added (diff-style green).
`removed`	`string`	—	Lines marked as removed (diff-style red).

Examples

Basic Code Block

function greet(name) {
  return `Hello, ${name}!`
}

```javascript
function greet(name) {
  return `Hello, ${name}!`
}
```

With a Title

function greet(name) {
  return `Hello, ${name}!`
}

```javascript greet.js
function greet(name) {
  return `Hello, ${name}!`
}
```

Line Numbers and Highlighting

function greet(name: string): string {
  const greeting = `Hello, ${name}!`
  return greeting
}

```typescript example.ts lineNumbers highlight="2-3"
function greet(name: string): string {
  const greeting = `Hello, ${name}!`
  return greeting
}
```

Diff Style (Added and Removed Lines)

{
  "version": "1.0.0",
  "version": "2.0.0",
  "name": "scalar"
}

```diff config.json added="3" removed="2"
{
  "version": "1.0.0",
  "version": "2.0.0",
  "name": "scalar"
}
```

Embeds

Images