--- title: "Code Blocks" description: "[object Object]" canonical_url: "https://docs.mhaibaraai.cn/en/docs/typography/code-blocks" --- # Code Blocks > [object Object] ## Basic usage ### Inline code Wrap inline code in backticks, which is great for referencing code elements within a sentence. ```vue ``` ### Code blocks Use three backticks to display multi-line code with syntax highlighting. ```vue ``` When writing a code block, you can specify a filename to display at the top of the block. The icon is matched automatically based on the file extension or name. This helps users understand where the code lives in the project and what it is for. ```vue ``` Every code block has a built-in copy button, making it easy for users to copy the code to their clipboard. > [!TIP] > See: https://ui.nuxt.com/getting-started/icons/nuxt#theme > > The icons are defined by default, but you can customize them in `app/app.config.ts`: > > ```ts [app/app.config.ts] > export default defineAppConfig({ > ui: { > prose: { > codeIcon: { > terminal: 'i-ph-terminal-window-duotone' > } > } > } > }) > ``` ## Advanced usage ### Code groups Use the `code-group` component to group multiple code blocks into tabs, which is great for showing code examples across multiple languages or package managers. ```vue ``` ### Code tree Use `code-tree` to display code blocks in a file-tree view. `code-tree` is great for showing project structure and file relationships. ```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` Use `code-preview` to display code output side by side with the code. `code-preview` is great for interactive examples and demonstrating code results. Write the code to preview in the `default` slot, and the actual code in the `code` slot. ```vue ``` ### `CodeCollapse` Use `code-collapse` for long code blocks to keep the page tidy. `code-collapse` lets users expand the code block only when they need to, improving readability. ```vue ``` ## Sitemap See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.