diff --git a/docs/content/2.guide/1.features.md b/docs/content/2.guide/1.features.md
index 04557f0f82..571d813d46 100644
--- a/docs/content/2.guide/1.features.md
+++ b/docs/content/2.guide/1.features.md
@@ -93,38 +93,42 @@ Quick access to online development environments detected from package READMEs:
 ### Custom badges
 
 You can add custom npmx badges to your markdown files using the following syntax:
-`[![Open on npmx.dev](https://npmx.dev/api/registry/badge/TYPE/YOUR_PACKAGE)](https://npmx.dev/package/YOUR_PACKAGE)`
 
-> [!IMPORTANT]
-> Make sure to replace `TYPE` with one of the options listed below and `YOUR_PACKAGE` with the actual package name (e.g., `vue`, `lodash`, or `@nuxt/kit`).
+```md
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/TYPE/YOUR_PACKAGE)](https://npmx.dev/package/YOUR_PACKAGE)
+```
+
+::tip
+Make sure to replace `TYPE` with one of the options listed below and `YOUR_PACKAGE` with the actual package name (e.g., `vue`, `lodash`, or `@nuxt/kit`).
+::
 
 #### Available Badge Types
 
-- **version**: Shows the latest or specific version of the package. ![](https://img.shields.io/badge/%233b82f6-3b82f6)
-- **license**: Displays the package license (e.g., MIT, Apache-2.0). ![](https://img.shields.io/badge/%2322c55e-22c55e)
-- **size**: Shows the install size (via Bundlephobia) or unpacked size. ![](https://img.shields.io/badge/%23a855f7-a855f7)
-- **downloads**: Displays monthly download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
-- **downloads-day**: Displays daily download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
-- **downloads-week**: Displays weekly download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
-- **downloads-month**: Alias for monthly download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
-- **downloads-year**: Displays yearly download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
-- **vulnerabilities**: Shows the number of vulnerabilities found via OSV. ![](https://img.shields.io/badge/%2322c55e-22c55e) / ![](https://img.shields.io/badge/%23ef4444-ef4444)
-- **dependencies**: Lists the total count of package dependencies. ![](https://img.shields.io/badge/%2306b6d4-06b6d4)
-- **created**: Displays the date the package was first published. ![](https://img.shields.io/badge/%2364748b-64748b)
-- **updated**: Displays the date of the most recent modification. ![](https://img.shields.io/badge/%2364748b-64748b)
-- **engines**: Shows the supported Node.js version range. ![](https://img.shields.io/badge/%23eab308-eab308)
-- **types**: Indicates if TypeScript types are included. ![](https://img.shields.io/badge/%233b82f6-3b82f6) / ![](https://img.shields.io/badge/%2364748b-64748b)
-- **maintainers**: Displays the total count of package maintainers. ![](https://img.shields.io/badge/%2306b6d4-06b6d4)
-- **deprecated**: Shows if the package is active or deprecated. ![](https://img.shields.io/badge/%2322c55e-22c55e) / ![](https://img.shields.io/badge/%23ef4444-ef4444)
-- **quality**: NPMS.io quality score based on linting and tests. ![](https://img.shields.io/badge/%23a855f7-a855f7)
-- **popularity**: NPMS.io popularity score based on downloads and stars. ![](https://img.shields.io/badge/%2306b6d4-06b6d4)
-- **maintenance**: NPMS.io maintenance score based on activity. ![](https://img.shields.io/badge/%23eab308-eab308)
-- **score**: The overall NPMS.io combined score. ![](https://img.shields.io/badge/%233b82f6-3b82f6)
-- **name**: Simple badge displaying the package name. ![](https://img.shields.io/badge/%2364748b-64748b)
+- **version**: Shows the latest or specific version of the package. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"}
+- **license**: Displays the package license (e.g., MIT, Apache-2.0). :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"}
+- **size**: Shows the install size (via Bundlephobia) or unpacked size. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"}
+- **downloads**: Displays monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **downloads-day**: Displays daily download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **downloads-week**: Displays weekly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **downloads-month**: Alias for monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **downloads-year**: Displays yearly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **vulnerabilities**: Shows the number of vulnerabilities found via OSV. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
+- **dependencies**: Lists the total count of package dependencies. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
+- **created**: Displays the date the package was first published. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
+- **updated**: Displays the date of the most recent modification. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
+- **engines**: Shows the supported Node.js version range. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"}
+- **types**: Indicates if TypeScript types are included. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
+- **maintainers**: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
+- **deprecated**: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
+- **quality**: NPMS.io quality score based on linting and tests. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"}
+- **popularity**: NPMS.io popularity score based on downloads and stars. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
+- **maintenance**: NPMS.io maintenance score based on activity. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"}
+- **score**: The overall NPMS.io combined score. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"}
+- **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
 
 #### Examples
 
-```markdown
+```md
 # Version Badge
 
 [![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/nuxt)](https://npmx.dev/package/nuxt)