Code Blocks

Basic

Inline Code

To denote a word or phrase as code, enclose it in backticks (`).

To denote a `word` or `phrase` as code, enclose it in backticks (`).

Code Block

Use fenced code blocks by enclosing code in three backticks and follow the leading ticks with the programming language of your snippet to get syntax highlighting. Optionally, you can also write the name of your code after the programming language. Syntax Highlighting is supported by default using Rehype Code.

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

```java title="HelloWorld.java"
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

Advanced

Package Install

The package install block automatically detects common package managers (npm, yarn, pnpm) and displays installation commands for each. Users can switch between different package managers using tabs.

```package-install
npm i next -D
```

npm install @types/react

pnpm add @types/react

yarn add @types/react

bun add @types/react

Shiki Transformers

We support some of the Shiki Transformers, allowing you to highlight/style specific lines.

```tsx
// highlight a line
<div>Hello World</div>  // [!code highlight]

// highlight a word
// [!code word:Fumadocs]
<div>Fumadocs</div>

// diff styles
console.log('hewwo'); // [!code --]
console.log('hello'); // [!code ++]
```

// highlight a line
<div>Hello World</div>

// highlight a word
<div>Fumadocs</div>

// diff styles:
console.log('hewwo');
console.log('hello');

Twoslash Notations

Learn more about Twoslash notations.

console.g
group
groupCollapsed
groupEnd;





const player: Player = { name: 'Hello World' };
       
const player: Player

const a = '123';

console.log(a);

import { generateFiles } from 'fumadocs-openapi';

void generateFiles({
  input: ['./museum.yaml'],
  output: './content/docs/ui',
});

const a = '123';

a = 132;
Cannot assign to 'a' because it is a constant.