Code

Exiba código inline e blocos de código com realce de sintaxe e suporte a copiar para a área de transferência.

Blocos de código

Os blocos de código são renderizados pelo componente ProsePre com realce de sintaxe fornecido pelo Shiki.

export default defineNuxtConfig({
  modules: ['@nitro/ui']
})

```ts
export default defineNuxtConfig({
  modules: ['@nitro/ui']
})
```

Idioma

O realce de sintaxe está disponível para dezenas de linguagens de programação.

<script setup lang="ts">
const message = ref('Hello World!')

function updateMessage() {
  message.value = 'Button clicked!'
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <NButton @click="updateMessage">
      Click me
    </NButton>
  </div>
</template>

```vue
<script setup lang="ts">
const message = ref('Hello World!')

function updateMessage() {
  message.value = 'Button clicked!'
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <NButton @click="updateMessage">
      Click me
    </NButton>
  </div>
</template>
```
Por padrão, os temas material-theme-lighter e material-theme-palenight do Shiki são usados para os modos claro e escuro, respectivamente. Ao usar o @nuxt/content, você pode alterar isso pela chave content.build.markdown.highlight no seu nuxt.config.ts. Ao usar o @nuxtjs/mdc de forma independente, configure os temas pela chave mdc.highlight. Ao usar o Comark, configure os temas pelas opções do plugin highlight.Para dar suporte ao modo escuro com o Comark, adicione o seguinte CSS à sua folha de estilo:
main.css
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

Nome do arquivo

Os blocos de código suportam a exibição do nome do arquivo com detecção automática de ícone.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nitro/ui']
})

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nitro/ui']
})
```
O ícone do nome do arquivo é renderizado pelo componente ProseCodeIcon e contém um conjunto de ícones predefinidos que você pode personalizar na configuração do seu app:
app/app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone',
        config: 'i-lucide-settings',
        package: 'i-lucide-package'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          codeIcon: {
            terminal: 'i-ph-terminal-window-duotone',
            config: 'i-lucide-settings',
            package: 'i-lucide-package'
          }
        }
      }
    })
  ]
})
Esses ícones de nome de arquivo vêm da coleção vscode-icons, que é separada dos ícones lucide usados pelo resto dos componentes, e são resolvidos sob demanda a partir da extensão do arquivo. Instale o @iconify-json/vscode-icons para servi-los localmente e offline, como qualquer outra coleção.

Botão de copiar

Todo bloco de código tem um botão de copiar embutido que copia o código para a sua área de transferência.

Você pode alterar o ícone pelas chaves ui.icons.copy e ui.icons.copyCheck na configuração do seu app:
app/app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          copy: 'i-lucide-copy',
          copyCheck: 'i-lucide-copy-check'
        }
      }
    })
  ]
})

Realce de linhas

Destaque linhas específicas para chamar a atenção para partes importantes.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nitro/ui'], // This line is highlighted
  css: ['~/assets/css/main.css']
})

```ts [nuxt.config.ts] {2}
export default defineNuxtConfig({
  modules: ['@nitro/ui'], // This line is highlighted
  css: ['~/assets/css/main.css']
})
```

Diff de código

Use a linguagem diff para mostrar as mudanças entre versões do código.

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
-   '@nitro/ui-pro'
+   '@nitro/ui'
  ]
})

```diff [nuxt.config.ts]
export default defineNuxtConfig({
  modules: [
-   '@nitro/ui-pro'
+   '@nitro/ui'
  ]
})
```

Código inline

Trechos de código inline são renderizados pelo componente ProseCode.

inline code

Cor

Use a prop color para alterar a cor do código inline. O padrão é neutral.

inline code

`inline code`{color="error"}

Idioma

Use a prop lang para especificar a linguagem do código inline.

nuxt.config.ts

`nuxt.config.ts`{lang="ts-type"}

Imagens e incorporações

Imagens, vídeos e incorporações de mídia responsivas para enriquecer e ilustrar a sua documentação.

Accordion

Crie seções de conteúdo expansíveis para uma melhor organização das informações.