Versioning Directives

Directives for marking version-specific documentation content

4 min read 883 words

Mark content as added, changed, or deprecated in specific versions. Use these directives to help users understand API evolution and migration paths.

Quick Reference

Directive Alias Purpose Theme Color
:::{since} {versionadded} New feature/API Success (green)
:::{deprecated} {versionremoved} Deprecated feature Warning (orange)
:::{changed} {versionchanged} Behavior change Info (blue)

since

Marks content that was added in a specific version.

Alias:{versionadded}

Syntax

:::{since} v2.0
This feature was added in version 2.0.
:::

Options

Option Type Description
(argument) string Required. Version identifier (e.g.,v2.0,2.0,2024.1)
:class: string Additional CSS class (default:version-since)

Examples

Example: Basic Usage

:::{since} v2.0
Webhooks allow real-time event notifications.
:::

Example: Inline Badge (No Content)

:::{since} v2.0
:::

Example: Inline in Tables

| Option | Description |
|--------|-------------|
| `retries` | Retry count :::{since} v3.1 ::: |

Rendered Output

Inline badge (no content):

  • Neumorphic badge with subtle shadow
  • SVG sparkles icon
  • Success/green theme colors

Full directive (with content):

  • Left-edge accent border with palette-aware colors
  • Subtle background blob animation
  • Rounded container with badge header

deprecated

Marks content that is deprecated and will be removed.

Alias:{versionremoved}

Syntax

:::{deprecated} v3.0
Use `new_function()` instead.
:::

Options

Option Type Description
(argument) string Version when deprecated. If omitted, displays "Deprecated" without version.
:class: string Additional CSS class (default:version-deprecated)

Examples

Example: Basic Usage

:::{deprecated} v3.0
This function is deprecated. Use `new_api()` instead.
:::

Example: With Migration Path

:::{deprecated} v3.0
The `legacy_mode` option is deprecated.

**Migration:**
1. Remove `legacy_mode: true` from config
2. Add `compatibility.version: 2`

See [[docs/migration|migration guide]] for details.
:::

Example: Without Version

:::{deprecated}
This feature is deprecated and will be removed.
:::

Rendered Output

Inline badge (no content):

  • Neumorphic badge with subtle shadow
  • SVG alert triangle icon
  • Warning/orange theme colors

Full directive (with content):

  • Left-edge accent border with palette-aware colors
  • Subtle background blob animation (warning colors)
  • Rounded container with badge header

changed

Marks content where behavior changed in a specific version.

Alias:{versionchanged}

Syntax

:::{changed} v2.5
Default timeout changed from 30s to 60s.
:::

Options

Option Type Description
(argument) string Version when changed. If omitted, displays "Changed" without version.
:class: string Additional CSS class (default:version-changed)

Examples

Example: Basic Usage

:::{changed} v2.5
The default batch size increased from 100 to 1000.
:::

Example: API Response Change

:::{changed} v3.0
Response now includes a `metadata` field:

```json
{
  "data": [...],
  "metadata": { "total": 100, "page": 1 }
}

:::


:::{example-label} Without Version
:::

```markdown
:::{changed}
This behavior has been updated.
:::

Rendered Output

Inline badge (no content):

  • Neumorphic badge with subtle shadow
  • SVG refresh icon
  • Info/blue theme colors

Full directive (with content):

  • Left-edge accent border with palette-aware colors
  • Subtle background blob animation (info colors)
  • Rounded container with badge header

CSS Classes

All versioning directives use consistent CSS classes that integrate with Bengal's theme system:

/* Container classes - full directive with content */
.version-directive { }        /* Base container with glow animation */
.version-directive-header { } /* Badge container */
.version-directive-content { } /* Content wrapper */

/* Type-specific containers */
.version-since { }            /* Success/green theme */
.version-deprecated { }       /* Warning/orange theme */
.version-changed { }          /* Info/blue theme */

/* Badge classes - inline badges */
.version-badge { }            /* Base neumorphic badge */
.version-badge-since { }      /* New in X.X badge */
.version-badge-deprecated { } /* Deprecated badge */
.version-badge-changed { }    /* Changed badge */
.version-badge-icon { }       /* SVG icon styling */

Customizing Styles

Version directives use CSS custom properties for easy theming:

/* Override colors for custom themes */
.version-since {
  --version-color: var(--color-success);
}

.version-deprecated {
  --version-color: var(--color-warning);
}

.version-changed {
  --version-color: var(--color-info);
}

Animation respectsprefers-reduced-motion. For complete customization, seeassets/css/components/versioning.cssin the default theme.


Best Practices

Be Specific

Include details about what changed:

<!-- ❌ Vague -->
:::{changed} v2.0
This was updated.
:::

<!-- ✅ Specific -->
:::{changed} v2.0
Return type changed from `list[dict]` to `Iterator[dict]`
for improved memory efficiency with large datasets.
:::

Include Migration Paths

For deprecations, explain the alternative:

:::{deprecated} v3.0
`old_function()` is deprecated.

**Use instead:**
```python
from mylib import new_function
result = new_function(data)

See [docs/api] for details. :::


### Use Sparingly

Version directives are most valuable for:

- ✅ Breaking changes
- ✅ Major new features
- ✅ Deprecations with removal timeline
- ✅ Significant behavior changes

Avoid for:
- ❌ Minor bug fixes
- ❌ Internal changes
- ❌ Every small addition

---

## Related

- [Versioning Documentation](/docs/content/versioning/) — Full versioning guide
- [Cross-Version Links](/docs/content/versioning/cross-version-links/) — Link between versions
- [Admonitions](/docs/reference/directives/admonitions/) — Standard callout directives