You're viewing the dependabot/github_actions/pnpm/action-setup-6 deployment.
View on main →

Code

Code blocks with syntax highlighting, line numbers, file names and collapsing

Summary

Code blocks with syntax highlighting.

File name

A title="..." shows a file name above the code, with the icon of its file type:

```ts title="lib/utils.ts"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
```

result:

lib/utils.ts
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

The icon follows the file extension, or else the language of the block: TypeScript, React (.tsx, .jsx), JavaScript, CSS, JSON, YAML, HTML, Markdown, MDX, a terminal for shell scripts, a generic code file otherwise.

Collapsible

A long block can show only its first lines, until the reader expands it, with collapsible (with or without a title):

```css title="src/styles/globals.css" collapsible
@import 'tailwindcss';

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --radius-lg: var(--radius);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
}
```

result:

src/styles/globals.css
@import 'tailwindcss';

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --radius-lg: var(--radius);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
}

The copy button copies the whole block, collapsed or not. A collapsible block short enough to show whole stays as it is.

From a file

A file="..." fills the block with a file, relative to the page, so the page shows the file as it is rather than a copy of it that drifts. Whatever the fence holds is replaced, so leave it empty:

```tsx title="Example.tsx" file="Example.tsx" collapsible
```

result:

Example.tsx
'use client'

import { useState } from 'react'

type ExampleProps = {
  /** Starting value supplied by the MDX scope. */
  initialCount: number
}

/**
 * A documentation example registered through the repository's docs.config.ts.
 */
export function Example({ initialCount }: ExampleProps) {
  const [count, setCount] = useState(initialCount)

  return (
    <button
      type="button"
      className="rounded border px-3 py-2"
      data-testid="custom-component-example"
      data-count={count}
      onClick={() => setCount(count + 1)}
    >
      Count: {count}
    </button>
  )
}

A file that cannot be read fails the build. The path may lead out of the MDX folder, e.g. file="../../dev.sh" for a script at the root of the repository, but must stay inside the repository holding the page: a path out of it fails the build.

Line numbers and highlights

Line numbers/highlights are supported:

```tsx {1,4-6} showLineNumbers
type Props = {who: string}

function Hi({who}: Props) {
  return (
    <p>Hello, {who}!</p>
  )
}
```

result:

type Props = {who: string}

function Hi({who}: Props) {
  return (
    <p>Hello, {who}!</p>
  )
}

Starting line number

You can start at a specific X line number showLineNumbers=X:

```tsx {1,4-6} showLineNumbers=150
type Props = {who: string}

function Hi({who}: Props) {
  return (
    <p>Hello, {who}!</p>
  )
}
```

result:

type Props = {who: string}

function Hi({who}: Props) {
  return (
    <p>Hello, {who}!</p>
  )
}

Diff

diff format is supported:

```diff
diff --git a/example.txt b/example.txt
index 8c3317a..47ea956 100644
--- a/example.txt
+++ b/example.txt
@@ -1,4 +1,4 @@
-Hello, World!
+Hello, GitHub World!
 Here are some changes:
-This line will be modified.
+This line has been modified.
 This line will stay the same.
```

result:

diff --git a/example.txt b/example.txt
index 8c3317a..47ea956 100644
--- a/example.txt
+++ b/example.txt
@@ -1,4 +1,4 @@
-Hello, World!
+Hello, GitHub World!
 Here are some changes:
-This line will be modified.
+This line has been modified.
 This line will stay the same.

Package managers

npm commands in a bash, sh or shell block get a tab per package manager:

```bash
npm install three
```

result:

pnpm add three

docs/authoring/code.mdx

Edit this page