Code Blocks

A showcase of code blocks variants.

Usage

export default () => {
  console.log('Code block');
};

```ts
export default () => {
  console.log('Code block');
};
```

With Title

nuxt.config.ts
export default defineNuxtConfig({
  // My Nuxt config
});

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  // My Nuxt config
});
```

Highlight Lines

console.log('1');
console.log('2');
console.log('3');
console.log('4');

```ts {1,3-4}
console.log('1')
console.log('2')
console.log('3')
console.log('4')
```

Line Numbers

// line-numbers is enabled
const line2 = 'This is line 2';
const line3 = 'This is line 3';

```ts{1} line-numbers
// line-numbers is enabled
const line2 = 'This is line 2';
const line3 = 'This is line 3';
```

Fixed Height

const parsedMeta = computed(() => {
  const split = meta?.split(' ') ?? [];
  const params = new Map<string, string | undefined>();

  for (const param of split) {
    const [key, val] = param.split('=');
    params.set(key, val);
  }

  return params;
});

```ts height=150
const parsedMeta = computed(() => {
  const split = meta?.split(' ') ?? [];
  const params = new Map<string, string | undefined>();

  for (const param of split) {
    const [key, val] = param.split('=');
    params.set(key, val);
  }

  return params;
});
```

Collapse Code

const parsedMeta = computed(() => {
  const split = meta?.split(' ') ?? [];
  const params = new Map<string, string | undefined>();

  for (const param of split) {
    const [key, val] = param.split('=');
    params.set(key, val);
  }

  return params;
});

```ts height=150 collapse
const parsedMeta = computed(() => {
  const split = meta?.split(' ') ?? [];
  const params = new Map<string, string | undefined>();

  for (const param of split) {
    const [key, val] = param.split('=');
    params.set(key, val);
  }

  return params;
});
```

Custom Icon

Custom Icon
// line-numbers is enabled
const line2 = 'This is line 2';
const line3 = 'This is line 3';

```ts [Custom Icon] icon=lucide:code-xml line-numbers
// line-numbers is enabled
const line2 = 'This is line 2';
const line3 = 'This is line 3';
```

Transformers

Diff

console.log('hewwo'); console.log('hello'); console.log('goodbye');

```ts
console.log('hewwo'); // [\!code --]
console.log('hello'); // [\!code ++]
console.log('goodbye');
```

Error level

console.log('No errors or warnings');
console.error('Error'); console.warn('Warning'); 
```ts
console.log('No errors or warnings');
console.error('Error'); // [\!code error]
console.warn('Warning'); // [\!code warning]
```

Focus

console.log('Not focused');
console.log('Focused'); console.log('Not focused');

```ts
console.log('Not focused');
console.log('Focused'); // [\!code focus]
console.log('Not focused');
```

Inline Code

code inline

const codeInline: string = 'highlighted code inline'

`code inline`

`const codeInline: string = 'highlighted code inline'`{lang="ts"}
Edit this page
Markdown
A showcase of all shadcn-docs prose components.
Images and embeds
How to use images and embeds in markdown.