Bloc de Code

Une présentation de tous les variants de blocs de code.

Usage

export default () => {
  console.log('Bloc de code');
};

```ts
export default () => {
  console.log('Bloc de code');
};
```

Avec Titre

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

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

Mise en Surbrillance des Lignes

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')
```

Numéros de Ligne

// les numéros de ligne sont activés
const line2 = 'Ceci est la ligne 2';
const line3 = 'Ceci est la ligne 3';

```ts{1} line-numbers
// les numéros de ligne sont activés
const line2 = 'Ceci est la ligne 2';
const line3 = 'Ceci est la ligne 3';
```

Hauteur Fixe

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;
});
```

Réduire le 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;
});
```

Icône Personnalisée

Icône Personnalisée
// les numéros de ligne sont activés
const line2 = 'Ceci est la ligne 2';
const line3 = 'Ceci est la ligne 3';

```ts [Icône Personnalisée] icon=lucide:code-xml line-numbers
// les numéros de ligne sont activés
const line2 = 'Ceci est la ligne 2';
const line3 = 'Ceci est la ligne 3';
```

Transformers

Diff

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

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

Niveau d'erreur

console.log(`Pas d'erreurs ou d'avertissements`);
console.error('Erreur'); console.warn('Avertissement'); 
```ts
console.log(`Pas d'erreurs ou d'avertissements`);
console.error('Erreur'); // [\!code error]
console.warn('Avertissement'); // [\!code warning]
```

Mise en focus

console.log('Non focalisé');
console.log('Focalisé'); console.log('Non focalisé');

```ts
console.log('Non focalisé');
console.log('Focalisé'); // [\!code focus]
console.log('Non focalisé');
```

Code en Ligne

code en ligne

const codeEnLigne: string = 'code en ligne mis en surbrillance'

`code en ligne`

`const codeEnLigne: string = 'code en ligne mis en surbrillance'`{lang="ts"}
Modifier cette page
Markdown
Une présentation de tous les composants prose de shadcn-docs.
Alert