docs(content): consistent callouts links style (nuxt#2786)

docs/content/1.getting-started/3.theme.md

@@ -570,14 +570,14 @@ These default values can be customized in your [`vite.config.ts`](#config) to ad
 You have multiple ways to customize the appearance of Nuxt UI components, you can do it for all components at once or on a per-component basis.
 
 ::note
-Tailwind Variants uses [tailwind-merge](https://github.com/dcastil/tailwind-merge) under the hood to merge classes so you don't have to worry about conflicting classes.
+Tailwind Variants uses [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) under the hood to merge classes so you don't have to worry about conflicting classes.
 ::
 
 ::tip
 You can explore the theme for each component in two ways:
 
 - Check the `Theme` section in the documentation of each individual component.
-- Browse the source code directly in the GitHub repository at https://github.com/nuxt/ui/tree/v3/src/theme.
+- Browse the source code directly in the GitHub repository at [`v3/src/theme`](https://github.com/nuxt/ui/tree/v3/src/theme).
 ::
 
 ### Config

docs/content/2.composables/use-toast.md

@@ -18,7 +18,7 @@ const toast = useToast()
 - When removing a toast, there's a 200ms delay before it's actually removed from the state, allowing for exit animations.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
+Make sure to wrap your app with the [`App`](/components/app) component which uses our [`Toaster`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [`ToastProvider`](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
 ::
 
 ::tip{to="/components/toast"}

docs/content/3.components/calendar.md

@@ -12,7 +12,7 @@ navigation.badge: New
 ---
 
 ::note
-This component relies on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
+This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
 ::
 
 ## Usage

docs/content/3.components/chip.md

@@ -120,7 +120,7 @@ props:
 ::
 
 ::note
-It's used this way in the [CommandPalette](/components/command-palette), [InputMenu](/components/input-menu), [Select](/components/select) or [SelectMenu](/components/select-menu) components for example.
+It's used this way in the [`CommandPalette`](/components/command-palette), [`InputMenu`](/components/input-menu), [`Select`](/components/select) or [`SelectMenu`](/components/select-menu) components for example.
 ::
 
 ## Examples

docs/content/3.components/collapsible.md

@@ -79,7 +79,7 @@ name: 'collapsible-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Collapsible by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Collapsible by pressing :kbd{value="O"}.
 ::
 
 ::tip

docs/content/3.components/command-palette.md

@@ -491,7 +491,7 @@ class: '!p-0'
 ::
 
 ::note
-This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
+This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
 ::
 
 ### With post-filtered items
@@ -585,7 +585,7 @@ name: 'command-palette-open-example'
 ::
 
 ::note
-This can be useful when using the CommandPalette inside a [Modal](/components/modal) for example.
+This can be useful when using the CommandPalette inside a [`Modal`](/components/modal) for example.
 ::
 
 ### With custom slot

docs/content/3.components/drawer.md

@@ -259,7 +259,7 @@ name: 'drawer-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Drawer by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Drawer by pressing :kbd{value="O"}.
 ::
 
 ::tip

docs/content/3.components/dropdown-menu.md

@@ -301,7 +301,7 @@ name: 'dropdown-menu-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the DropdownMenu by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the DropdownMenu by pressing :kbd{value="O"}.
 ::
 
 ### With custom slot

docs/content/3.components/form.md

@@ -117,7 +117,7 @@ options:
 ::
 
 ::tip
-You can use the [useFormField](/composables/use-form-field) composable to implement this inside your own components.
+You can use the [`useFormField`](/composables/use-form-field) composable to implement this inside your own components.
 ::
 
 ### Error Event

docs/content/3.components/input-menu.md

@@ -15,11 +15,11 @@ links:
 Use the `v-model` directive to control the value of the InputMenu or the `default-value` prop to set the initial value when you do not need to control its state.
 
 ::tip
-Use this over an [Input](/components/input) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers autocomplete capabilities.
+Use this over an [`Input`](/components/input) to take advantage of Radix Vue's [`Combobox`](https://www.radix-vue.com/components/combobox.html) component that offers autocomplete capabilities.
 ::
 
 ::note
-This component is similar to the [SelectMenu](/components/select-menu) but it's using an Input instead of a Select.
+This component is similar to the [`SelectMenu`](/components/select-menu) but it's using an Input instead of a Select.
 ::
 
 ### Items
@@ -701,7 +701,7 @@ name: 'input-menu-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the InputMenu by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the InputMenu by pressing :kbd{value="O"}.
 ::
 
 ### Control open state on focus
@@ -757,7 +757,7 @@ name: 'input-menu-filter-example'
 ::
 
 ::note
-This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
+This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
 ::
 
 ### With custom search

docs/content/3.components/input-number.md

@@ -12,7 +12,7 @@ navigation.badge: New
 ---
 
 ::note
-This component relies on the [@internationalized/number](https://react-spectrum.adobe.com/internationalized/number/index.html) package which provides utilities for formatting and parsing numbers across locales and numbering systems.
+This component relies on the [`@internationalized/number`](https://react-spectrum.adobe.com/internationalized/number/index.html) package which provides utilities for formatting and parsing numbers across locales and numbering systems.
 ::
 
 ## Usage

docs/content/3.components/link.md

@@ -18,7 +18,7 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
 The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
 
 ::note
-It is used by the [Breadcrumb](/components/breadcrumb), [Button](/components/button), [ContextMenu](/components/context-menu), [DropdownMenu](/components/dropdown-menu) and [NavigationMenu](/components/navigation-menu) components.
+It is used by the [`Breadcrumb`](/components/breadcrumb), [`Button`](/components/button), [`ContextMenu`](/components/context-menu), [`DropdownMenu`](/components/dropdown-menu) and [`NavigationMenu`](/components/navigation-menu) components.
 ::
 
 ### Tag

docs/content/3.components/modal.md

@@ -295,7 +295,7 @@ name: 'modal-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Modal by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Modal by pressing :kbd{value="O"}.
 ::
 
 ::tip
@@ -307,7 +307,7 @@ This allows you to move the trigger outside of the Modal or remove it entirely.
 You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses the [ModalProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
+Make sure to wrap your app with the [`App`](/components/app) component which uses the [`ModalProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
 ::
 
 First, create a modal component that will be opened programatically:

docs/content/3.components/navigation-menu.md

@@ -552,7 +552,7 @@ name: 'navigation-menu-model-value-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can switch the active item by pressing :kbd{value="1"}, :kbd{value="2"}, or :kbd{value="3"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can switch the active item by pressing :kbd{value="1"}, :kbd{value="2"}, or :kbd{value="3"}.
 ::
 
 ::tip

docs/content/3.components/pagination.md

@@ -14,7 +14,7 @@ links:
 Use the `default-page` prop or the `v-model:page` directive to control the current page.
 
 ::note
-The Pagination component uses some [Button](/components/button) to display the pages, use [`color`](#color), [`variant`](#variant) and [`size`](#size) props to style them.
+The Pagination component uses some [`Button`](/components/button) to display the pages, use [`color`](#color), [`variant`](#variant) and [`size`](#size) props to style them.
 ::
 
 ### Total

docs/content/3.components/popover.md

@@ -64,7 +64,7 @@ slots:
 ::
 
 ::note
-When using the `hover` mode, the Radix Vue [HoverCard](https://www.radix-vue.com/components/hover-card.html) component is used instead of the [Popover](https://www.radix-vue.com/components/popover.html).
+When using the `hover` mode, the Radix Vue [`HoverCard`](https://www.radix-vue.com/components/hover-card.html) component is used instead of the [`Popover`](https://www.radix-vue.com/components/popover.html).
 ::
 
 ### Delay
@@ -174,7 +174,7 @@ name: 'popover-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
 ::
 
 ### With command palette

docs/content/3.components/select-menu.md

@@ -15,11 +15,11 @@ links:
 Use the `v-model` directive to control the value of the SelectMenu or the `default-value` prop to set the initial value when you do not need to control its state.
 
 ::tip
-Use this over a [Select](/components/select) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
+Use this over a [`Select`](/components/select) to take advantage of Radix Vue's [`Combobox`](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
 ::
 
 ::note
-This component is similar to the [InputMenu](/components/input-menu) but it's using a Select instead of an Input with the search inside the menu.
+This component is similar to the [`InputMenu`](/components/input-menu) but it's using a Select instead of an Input with the search inside the menu.
 ::
 
 ### Items
@@ -746,7 +746,7 @@ name: 'select-menu-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the SelectMenu by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the SelectMenu by pressing :kbd{value="O"}.
 ::
 
 ### Control search term
@@ -792,7 +792,7 @@ name: 'select-menu-filter-example'
 ::
 
 ::note
-This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
+This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
 ::
 
 ### With custom search

docs/content/3.components/select.md

@@ -650,7 +650,7 @@ name: 'select-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Select by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Select by pressing :kbd{value="O"}.
 ::
 
 ### With rotating icon

docs/content/3.components/slideover.md

@@ -294,7 +294,7 @@ name: 'slideover-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Slideover by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Slideover by pressing :kbd{value="O"}.
 ::
 
 ::tip
@@ -306,7 +306,7 @@ This allows you to move the trigger outside of the Slideover or remove it entire
 You can use the [`useSlideover`](/composables/use-slideover) composable to open a Slideover programatically.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses the [SlideoverProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
+Make sure to wrap your app with the [`App`](/components/app) component which uses the [`SlideoverProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
 ::
 
 First, create a slideover component that will be opened programatically:

docs/content/3.components/table.md

@@ -245,7 +245,7 @@ You can use the `expanded` prop to control the expandable state of the rows (can
 ::
 
 ::note
-You could also add this action to the [DropdownMenu](/components/dropdown-menu) component inside the `actions` column.
+You could also add this action to the [`DropdownMenu`](/components/dropdown-menu) component inside the `actions` column.
 ::
 
 ### With row selection

docs/content/3.components/toast.md

@@ -14,7 +14,7 @@ links:
 Use the [useToast](/composables/use-toast) composable to display a toast in your application.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
+Make sure to wrap your app with the [`App`](/components/app) component which uses our [`Toaster`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [`ToastProvider`](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
 ::
 
 ::tip{to="/components/app#props"}

docs/content/3.components/tooltip.md

@@ -14,7 +14,7 @@ links:
 Use a [Button](/components/button) or any other component in the default slot of the Tooltip.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses the [TooltipProvider](https://www.radix-vue.com/components/tooltip.html#provider) component from Radix Vue.
+Make sure to wrap your app with the [`App`](/components/app) component which uses the [`TooltipProvider`](https://www.radix-vue.com/components/tooltip.html#provider) component from Radix Vue.
 ::
 
 ::tip{to="/components/app#props"}
@@ -89,7 +89,7 @@ slots:
 ::
 
 ::tip
-This can be configured globally through the `tooltip.delayDuration` option in the [App](/components/app) component.
+This can be configured globally through the `tooltip.delayDuration` option in the [`App`](/components/app) component.
 ::
 
 ### Content
@@ -182,7 +182,7 @@ name: 'tooltip-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Tooltip by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Tooltip by pressing :kbd{value="O"}.
 ::
 
 ## API