El código

Mostrar código en línea y bloques de código resaltado con sintaxis con soporte de copia al portapapeles.

Bloques de ## Code

Los bloques de código se representan mediante el componente ProsePre con resaltado de sintaxis impulsado por Shiki.

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

```ts
export default defineNuxtConfig
  módulos:['@ nuxt/ui']
})
```

Español

El resaltado de sintaxis está disponible para docenas de lenguajes de programación.

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

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

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

```vue
xf043x
const message = ref ('Hola mundo!')

Actualizaciones (){
  message. value ='¡ Se ha hecho clic!'
}
</script> (Edición española)

xf045x
  <div> (Edición española)
    <h1> {{ message }} </h1>
    xf050x
      Clic en mí
    xf051x
  </div>
</template>
```
De forma predeterminada, los temas Shiki material-theme-lighter y material-theme-palenight se utilizan para el modo claro y oscuro respectivamente. Al usar @nuxt/content, puede cambiar esto a través de la clave content.build.markdown.highlight en su nuxt.config.ts. configure los temas a través de la clave mdc.highlight. Cuando use [Comarkxph073https://comark.dev), configure los temas a través de las opciones del complemento shiki.Para admitir el modo oscuro con Comark, agregue el siguiente CSS a su hoja 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;
}

Archivo

Los bloques de código admiten la visualización del nombre del archivo con detección automática de iconos.

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

```ts [nuxt.config.ts]
export default defineNuxtConfig
  módulos:['@ nuxt/ui']
})
```
El icono del nombre de archivo es representado por el componente ProseCodeIcon y contiene un conjunto de iconos predefinidos que puede personalizar en la configuración de su aplicación:
app/app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-lucide-square-terminal',
        config: 'i-lucide-settings',
        package: 'i-lucide-package'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          codeIcon: {
            terminal: 'i-lucide-square-terminal',
            config: 'i-lucide-settings',
            package: 'i-lucide-package'
          }
        }
      }
    })
  ]
})
Estos iconos de nombre de archivo provienen de la colección vscode-icons, que está separada de los iconos lucide que utilizan el resto de los componentes, y se resuelven a pedido desde la extensión de archivo.

Botón ### Copiar

Cada bloque de código tiene un botón de copia incorporado que copiará el código a su portapapeles.

Configure el accesorio copy en false para ocultar el botón, o pase los accesorios Button para personalizarlo.

Puede cambiar el icono a través de las teclas ui.icons.copy y ui.icons.copyCheck en la configuración de su aplicación:
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 '@nuxt/ui/vite'

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

Line resaltado

Resalta líneas específicas para llamar la atención sobre partes importantes.

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

```ts [nuxt.config.ts] {2}
export default defineNuxtConfig
  módulos:['@ nuxt/ui'],//Esta línea está resaltada
  css: ['/assets/css/main.css']
})
```

Código diff

Utiliza el lenguaje diff para mostrar los cambios entre versiones de código.

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

```diff [nuxt.config.ts]
export default defineNuxtConfig
  Módulos:[
-   '@ nuxt/ui-pro '(en inglés)
+   '@ nuxt/ui '
  ]
})
```

Código de línea

Los fragmentos de código en línea son renderizados por el componente ProseCode.

inline code en

Color (Edición)

Utilice el prop color para cambiar el color del código en línea.

inline codex{color="error"}

`inline code`{color="error"}

Lingón

Utilice el prop lang para especificar el idioma del código en línea.

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

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

Images and embeds

Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.

Accordion

Create expandable content sections for better information organization.