--- title: "代码块" description: "掌握 Movk Nuxt Docs 代码块的全部功能：语法高亮、文件名标注、::code-group 分组展示、::code-tree 目录树视图、::code-collapse 可折叠代码块，以及 ::code-preview 并排预览，高效、直观地呈现技术内容。" seo_title: "Code Blocks" seo_description: "Use Movk Nuxt Docs code blocks with syntax highlighting, filenames, code groups, directory trees, collapsible snippets, and live previews." canonical_url: "https://docs.mhaibaraai.cn/docs/typography/code-blocks" --- # 代码块 > 掌握 Movk Nuxt Docs 代码块的全部功能：语法高亮、文件名标注、::code-group 分组展示、::code-tree 目录树视图、::code-collapse 可折叠代码块，以及 ::code-preview 并排预览，高效、直观地呈现技术内容。 ## 基础用法 ### 内联代码 使用反引号包裹内联代码，适合在句子中引用代码元素。 ```vue ``` ### 代码块 使用三个反引号展示带语法高亮的多行代码。 ```vue ``` 在编写代码块时，您可以指定一个文件名显示在代码块的顶部。图标会根据文件扩展名或名称自动匹配。这有助于用户理解代码在项目中的位置和用途。 ```vue ``` 每个代码块都内置了一个复制按钮，方便用户将代码复制到剪贴板。 > \[\!TIP\] > See: https://ui.nuxt.com/getting-started/icons/nuxt#theme > > 图标已默认定义，但您可以在 `app/app.config.ts` 中进行自定义： > > ```ts [app/app.config.ts] > export default defineAppConfig({ > ui: { > prose: { > codeIcon: { > terminal: 'i-ph-terminal-window-duotone' > } > } > } > }) > ``` ## 高级用法 ### 代码组 使用 `code-group` 组件在选项卡中对多个代码块进行分组，非常适合用于展示多种语言或包管理器的代码示例。 ```vue ``` ### 代码树 使用 `code-tree` 在文件树视图中显示代码块。`code-tree` 非常适合展示项目结构和文件关系。 ```vue filename=app/app.vue language=vue meta= style=> < template > < UApp > < NuxtPage /> UApp > template > 
  
  
  
  {
  
  
  
    "
  
  name
  
  "
  
  :
  
   "
  
  nuxt-app
  
  "
  
  ,
  
  
  
    "
  
  private
  
  "
  
  :
  
   true,
  
  
  
    "
  
  type
  
  "
  
  :
  
   "
  
  module
  
  "
  
  ,
  
  
  
    "
  
  scripts
  
  "
  
  :
  
   {
  
  
  
      "
  
  build
  
  "
  
  :
  
   "
  
  nuxt build
  
  "
  
  ,
  
  
  
      "
  
  dev
  
  "
  
  :
  
   "
  
  nuxt dev
  
  "
  
  ,
  
  
  
      "
  
  generate
  
  "
  
  :
  
   "
  
  nuxt generate
  
  "
  
  ,
  
  
  
      "
  
  preview
  
  "
  
  :
  
   "
  
  nuxt preview
  
  "
  
  ,
  
  
  
      "
  
  lint
  
  "
  
  :
  
   "
  
  eslint .
  
  "
  
  ,
  
  
  
      "
  
  lint:fix
  
  "
  
  :
  
   "
  
  eslint --fix .
  
  "
  
  
  
    },
  
  
  
    "
  
  dependencies
  
  "
  
  :
  
   {
  
  
  
      "
  
  @iconify-json/lucide
  
  "
  
  :
  
   "
  
  ^1.2.18
  
  "
  
  ,
  
  
  
      "
  
  @nuxt/ui
  
  "
  
  :
  
   "
  
  ^4.0.0
  
  "
  
  ,
  
  
  
      "
  
  nuxt
  
  "
  
  :
  
   "
  
  ^4.3.0
  
  "
  
  ,
  
  
  
    },
  
  
  
    "
  
  devDependencies
  
  "
  
  :
  
   {
  
  
  
      "
  
  eslint
  
  "
  
  :
  
   "
  
  ^9.34.0
  
  "
  
  ,
  
  
  
      "
  
  typescript
  
  "
  
  :
  
   "
  
  ^5.9.3
  
  "
  
  ,
  
  
  
      "
  
  vue-tsc
  
  "
  
  :
  
   "
  
  ^3.0.6
  
  "
  
  
  
    }
  
  
  
  }
  
  
  
  
  {
  
  
  
    "
  
  extends
  
  "
  
  :
  
   "
  
  ./.nuxt/tsconfig.json
  
  "
  
  
  
  }
  
  
  
  
  # 
  
  Nuxt 4 Minimal Starter
  
  
  
  
  
  Look at the 
  
  [
  
  Nuxt 4 documentation
  
  ](
  
  https://nuxt.com/docs/getting-started/introduction
  
  )
  
   to learn more.
  
  
  
  
  
  ## 
  
  Setup
  
  
  
  
  
  Make sure to install the dependencies:
  
  
  
  
  
  ```
  
  bash
  
  
  
  # npm
  
  
  
  npm
  
   install
  
  
  
  
  
  # pnpm
  
  
  
  pnpm
  
   install
  
  
  
  
  
  # yarn
  
  
  
  yarn
  
   install
  
  
  
  
  
  # bun
  
  
  
  bun
  
   install
  
  
  
  ```
  
  
  
  
  
  ## 
  
  Development Server
  
  
  
  
  
  Start the development server on 
  
  `
  
  http://localhost:3000
  
  `
  
  :
  
  
  
  
  
  ```
  
  bash
  
  
  
  # npm
  
  
  
  npm
  
   run
  
   dev
  
  
  
  
  
  # pnpm
  
  
  
  pnpm
  
   run
  
   dev
  
  
  
  
  
  # yarn
  
  
  
  yarn
  
   dev
  
  
  
  
  
  # bun
  
  
  
  bun
  
   run
  
   dev
  
  
  
  ```
  
  
  
  
  
  ## 
  
  Production
  
  
  
  
  
  Build the application for production:
  
  
  
  
  
  ```
  
  bash
  
  
  
  # npm
  
  
  
  npm
  
   run
  
   build
  
  
  
  
  
  # pnpm
  
  
  
  pnpm
  
   run
  
   build
  
  
  
  
  
  # yarn
  
  
  
  yarn
  
   build
  
  
  
  
  
  # bun
  
  
  
  bun
  
   run
  
   build
  
  
  
  ```
  
  
  
  
  
  Locally preview production build:
  
  
  
  
  
  ```
  
  bash
  
  
  
  # npm
  
  
  
  npm
  
   run
  
   preview
  
  
  
  
  
  # pnpm
  
  
  
  pnpm
  
   run
  
   preview
  
  
  
  
  
  # yarn
  
  
  
  yarn
  
   preview
  
  
  
  
  
  # bun
  
  
  
  bun
  
   run
  
   preview
  
  
  
  ```
  
  
  
  
  
  Check out the 
  
  [
  
  deployment documentation
  
  ](
  
  https://nuxt.com/docs/getting-started/deployment
  
  )
  
   for more information.
``` ### `CodePreview` 使用 `code-preview` 显示代码输出与代码并排。`code-preview` 非常适合交互式示例和演示代码结果。 在 `default` 插槽中编写要预览的代码，在 `code` 插槽中编写实际代码。 ```vue ``` ### `CodeCollapse` 使用 `code-collapse` 对于长代码块以保持页面整洁。`code-collapse` 允许用户仅在需要时展开代码块，提高可读性。 ```vue ``` ## Sitemap See the full [sitemap](/sitemap.md) for all pages.