Руководство для авторов

Блоки кода

Отображение встроенного кода и блоков кода

Это руководство для авторов объясняет инструменты подготовки материалов сайта; оно не является энциклопедической статьёй о тюркской культуре.

Основное

Встроенный код

Используйте встроенный код для отображения фрагментов кода внутри текстовых абзацев. Идеально подходит для упоминания элементов кода непосредственно в предложениях.

inline code

`inline code`

Блоки кода

Используйте блоки кода для отображения многострочных фрагментов с подсветкой синтаксиса. Блоки кода необходимы для наглядного представления примеров кода.

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

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

При написании блока кода можно указать имя файла, которое будет отображаться над блоком. Иконка автоматически определяется по расширению или имени файла. Имена файлов помогают пользователям понять расположение и назначение кода в проекте.

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

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```
Некоторые иконки уже определены по умолчанию, но вы можете добавить дополнительные в app.config.ts через ключ ui.prose.codeIcon:
app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone'
      }
    }
  }
})

Каждый блок кода имеет встроенную кнопку копирования, которая копирует код в буфер обмена.

Иконку можно изменить в app.config.ts через ключи ui.icons.copy и ui.icons.copyCheck:
app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})

Выделение строк

Чтобы выделить строки кода, добавьте {} с номерами строк, которые нужно выделить. Выделение строк полезно для акцентирования внимания на важных частях примеров кода.

nuxt.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})

```ts [nuxt.config.ts]{4-5}
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})
```

Расширенное

CodeGroup

Группируйте блоки кода во вкладках с помощью code-group. Отлично подходит для отображения примеров кода на нескольких языках или для разных пакетных менеджеров.

pnpm add @nuxt/ui

:::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```

```bash [bun]
bun add @nuxt/ui
```

::
Как и компонент ProsePre, CodeGroup поддерживает имена файлов, иконки и кнопку копирования.

CodeTree

Отображайте блоки кода в виде файлового дерева с помощью code-tree. Отлично подходит для демонстрации структуры проекта и взаимосвязей файлов.

app/app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})
Узнайте больше о компоненте code-tree.

CodePreview

Используйте code-preview для отображения результата выполнения кода рядом с самим кодом. Идеально подходит для интерактивных примеров и демонстрации результатов. Напишите предварительно просматриваемый код в слоте default, а сам код — в слоте code.

inline code

`inline code`

::code-preview
`inline code`

#code
```mdc
`inline code`
```
::

CodeCollapse

Используйте code-collapse для длинных блоков кода, чтобы страницы оставались чистыми. Позволяет пользователям раскрывать блоки кода только при необходимости, улучшая читаемость.

main.css
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

::code-collapse

```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
--font-sans: 'Public Sans', sans-serif;

--breakpoint-3xl: 1920px;

--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
```

::

Синтаксис Markdown

Текст, заголовки и стилизация в стандартном Markdown.

Компоненты прозы

Компоненты для структурирования содержимого.