コード

クリップボードへのコピーをサポートしたインラインコードと構文ハイライトされたコードブロックを表示します。

Codeブロック

コードブロックはProsePreコンポーネントによってレンダリングされ、Shikiによるシンタックスハイライト付きです。

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

```ts
export defineNuxtConfig {
  モジュール['@ nuxt/ui']
})
```

言語

シンタックスハイライトは、数十のプログラミング言語で利用できます。

<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！'

関数updateMessage {
  message. value ='ボタンがクリックされました！'
}
</script>

<template>
  <div>
    <h1> {{ message }} </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 defineNuxtConfig {
  モジュール['@ nuxt/ui']
})
```
ファイル名アイコンはProseCodeIconコンポーネントによってレンダリングされ、アプリ設定でカスタマイズできる定義済みのアイコンのセットが含まれています。
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プロパティをfalseに設定してボタンを非表示にするか、Buttonプロパティを渡してカスタマイズします。

アプリ設定のui.icons.copyキーとui.icons.copyCheckキーでアイコンを変更できます。
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 defineNuxtConfig {
  modules：['@ nuxt/ui']，//この行はハイライトされます
  css ['～/assets/css/main.css']
})
```

コード差分

コードバージョン間の変更を表示するにはdiff言語を使用します。

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

```diff [nuxt.config.ts]
export defineNuxtConfig {
  モジュール[
-    '@ nuxt/ui—pro'
+    '@ nuxt/ui'
  ]
})
```

Inlineコード

インラインコードスニペットはProseCodeコンポーネントによってレンダリングされます。

inline code

Color

colorプロパティを使用してインラインコードの色を変更します。デフォルトはneutralです。

inline code

`inline code`{color="error"}

Lang

langプロパティを使用して、インラインコードの言語を指定します。

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.