코드 (Code)

클립보드에 복사 지원을 통해 인라인 코드 및 구문 강조 표시된 코드 블록을 표시합니다.

Code 코드 블록

코드 블록은 ProsePre 구성 요소에 의해 렌더링되며 구문 강조 표시는 Shiki에 의해 제공됩니다.

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

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

언어 Name

구문 강조 표시는 수십 개의 프로그래밍 언어에서 사용할 수 있습니다.

<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
<script setup lang="ts">
const message = ref('Hello World!')

function updateMessage() {
  message.value= '버튼을 클릭했습니다!'
}
</script> 공식

<template>
  <div> 이미지
    <h1> </h1> </h1>
    <UButton @click="updateMessage"> 이미지
      나를 클릭하십시오.
    </UButton>
  </div>
</template> 이미지
```
기본적으로 material-theme-lighter 및 material-theme-palenight Shiki 테마는 밝은 모드와 어두운 모드에 각각 사용됩니다. @nuxt/content를 사용하는 경우 nuxt.config.ts의 content.build.markdown.highlight 키를 사용하여 변경할 수 있습니다. 독립형 @nuxtjs/mdc를 사용할 때는 mdc.highlight 키를 사용하여 테마를 구성합니다. Comark를 사용하는 경우 shiki 플러그인 옵션을 사용하여 테마를 구성합니다.Comark를 사용하여 어두운 모드를 지원하려면 스타일시트에 다음 CSS를 추가합니다.
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;
}

Filename 이름

코드 블록은 자동 아이콘 감지를 통해 파일 이름 표시를 지원합니다.

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

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```
파일 이름 아이콘은 ProseCodeIcon 구성 요소에 의해 렌더링되며 앱 구성에서 사용자 지정할 수 있는 미리 정의된 아이콘 집합이 포함되어 있습니다.The filename icon is rendered by the ProseCodeIcon component and contains a set of predefined icons which you can customize in your app configuration:
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'
          }
        }
      }
    })
  ]
})
이러한 파일 이름 아이콘은 vscode-icons 모음에서 제공되며, 나머지 구성 요소에서 사용하는 lucide 아이콘과는 별도로 파일 확장자에서 필요에 따라 해결됩니다. @iconify-json/vscode-icons를 설치하여 다른 모음과 마찬가지로 로컬 및 오프라인에서 서비스를 제공합니다.

Copy 버튼

모든 코드 블록에는 코드를 클립보드에 복사하는 기본 제공 복사 단추가 있습니다.

copy prop을 false로 설정하여 버튼을 숨기거나 Button props를 전달하여 사용자 정의합니다.

앱 구성에서 ui.icons.copy 및 ui.icons.copyCheck 키를 사용하여 아이콘을 변경할 수 있습니다.You can change the icon through the ui.icons.copy and ui.icons.copyCheck keys in your app configuration:
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 강조표시

특정 선을 강조 표시하여 중요한 부분에 주의를 끕니다.

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({
  modules: ['@nuxt/ui'], // 이 줄은 강조표시됩니다.
  css: ['~/assets/css/main.css']
})
```

Code 차이

diff 언어를 사용하여 코드 버전 간의 변경 사항을 표시합니다.

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

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

인라인 코드

인라인 코드 조각은 ProseCode 구성 요소에 의해 렌더링됩니다.

inline code

Color 이미지

color 소품을 사용하여 인라인 코드의 색상을 변경합니다. 기본값은 neutral입니다.

inline code

`inline code`{color="error"}

lang

lang prop을 사용하여 인라인 코드의 언어를 지정합니다.

nuxt.config.ts

`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.