# Integrations

Configure Iconify preloading, Expressive Code, callout directives, CJK Markdown, and package manager tabs.

import { Card, CardGrid } from '@prosefly/astro-components';

Dahlia includes integrations for icons, syntax highlighting, callout directives,
CJK-friendly Markdown, image galleries, and package-manager command tabs.

<CardGrid>
  <Card icon="lucide:sparkles" title="Iconify" href="#iconify">
    Preload icon data used by the theme, MDX components, theme config, and
    static `Icon` usage.
  </Card>
  <Card icon="lucide:code-2" title="Expressive Code" href="#expressive-code">
    Render syntax-highlighted code blocks with frames, copy buttons, markers,
    and theme-aware styling.
  </Card>
  <Card icon="lucide:terminal" title="Package Manager Tabs" href="#package-manager-tabs">
    Turn recognized npm and Python install commands into synchronized tabbed
    command blocks.
  </Card>
  <Card icon="lucide:message-square-warning" title="Callout Directives" href="#callout-directives">
    Write admonitions with Markdown directive syntax such as `:::tip`.
  </Card>
  <Card icon="lucide:languages" title="CJK-Friendly Markdown" href="#cjk-friendly-markdown">
    Make emphasis and GFM strikethrough work better in Chinese, Japanese, and
    Korean text.
  </Card>
  <Card icon="lucide:images" title="Image Galleries" href="#image-galleries">
    Transform Markdown image-only paragraphs into responsive gallery figures.
  </Card>
</CardGrid>

## Iconify

Dahlia installs the `@prosefly/astro-components/icon` integration internally.
It preloads icons used by Dahlia, icons used by Prosefly components, theme config
icons, and static `<Icon name="...">` usage in Astro and MDX files.

```ts
dahlia({
  iconify: {
    apiBase: 'https://api.iconify.design',
    preload: ['lucide:sparkles'],
    scan: true,
  },
})
```

Use `preload` for icons that cannot be detected statically.

Set `scan: false` when a project wants only explicit preload names.

## Expressive Code

Expressive Code is enabled by default.

```ts
dahlia({
  markdown: {
    expressiveCode: {
      defaultProps: {
        showLineNumbers: false,
      },
    },
  },
})
```

Dahlia configures light and dark Shiki themes, line numbers, copy button styling,
and code frame styling to match the theme tokens.

Disable Expressive Code when a project should use Astro's built-in Shiki
renderer.

```ts
dahlia({
  markdown: {
    expressiveCode: false,
  },
})
```

## Package Manager Tabs

Dahlia enables the Prosefly package-manager tabs remark plugin by default. It
turns recognized install commands into tabbed command blocks.

```ts
dahlia({
  markdown: {
    packageManagerTabs: false,
  },
})
```

Set `markdown.packageManagerTabs` to `false` to keep package-manager commands
as normal code blocks.

## Callout Directives

Dahlia enables the Prosefly callout directive remark plugin by default. This adds
Starlight-style admonition syntax for `note`, `tip`, `warning`, `caution`, and
`danger`. See [Admonitions](/docs/essentials/admonitions/) for authoring syntax
and usage guidance.

Set `markdown.calloutDirectives` to `false` to keep Markdown directives
untouched.

```ts
dahlia({
  markdown: {
    calloutDirectives: false,
  },
})
```

## CJK-Friendly Markdown

`markdown.cjkFriendly` controls CJK-friendly parsing for emphasis and GFM
strikethrough. The default is `auto`: Dahlia enables it when `locales` contains a
Chinese, Japanese, or Korean locale key or `lang` value.

```ts
dahlia({
  locales: {
    root: { label: 'English', directory: 'en' },
    'zh-cn': { label: '简体中文', lang: 'zh-CN', directory: 'zh-cn' },
  },
  markdown: {
    cjkFriendly: 'auto',
  },
})
```

Set it to `true` to force the parser support on, or `false` to keep plain
CommonMark and GFM parsing.

## Image Galleries

Dahlia also installs the Prosefly image gallery rehype plugin. Paragraphs that
contain only Markdown images are transformed into responsive gallery figures.

See [Images](/docs/essentials/images/) for authoring details.

Disable the transform when a project wants image-only paragraphs to stay as
normal Markdown output.

```ts
dahlia({
  markdown: {
    imageGallery: false,
  },
})
```

## Component Overrides

Use `components` to replace selected Dahlia theme components. See
[Overriding Components](/docs/customization/overriding-components/) for the
complete override surface and examples.