From 4b380f9334aebb5df82f9d617fa94075ae4f3974 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sat, 25 Jan 2025 16:22:46 +0000
Subject: [PATCH] docs: highlight code in all docs

---
 website/src/docs/astro.mdx    | 4 ++--
 website/src/docs/index.mdx    | 4 ++--
 website/src/docs/nextjs.mdx   | 6 +++---
 website/src/docs/remix.mdx    | 6 +++---
 website/src/docs/tanstack.mdx | 6 +++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/website/src/docs/astro.mdx b/website/src/docs/astro.mdx
index 1df3284..79cc6ec 100644
--- a/website/src/docs/astro.mdx
+++ b/website/src/docs/astro.mdx
@@ -60,7 +60,7 @@ npx astro add react
 
 > 💡 Add [`client:load`](https://docs.astro.build/es/reference/directives-reference/#clientload) directive to the `Toaster` component.
 
-```js
+```js {8,25}
 // 📄 layouts/Layout.astro
 
 ---
@@ -118,7 +118,7 @@ export default ShowToast;
 
 > 💡 Add [`client:load`](https://docs.astro.build/es/reference/directives-reference/#clientload) directive to the `ShowToast` component.
 
-```js
+```js {5,11}
 // 📄 pages/index.astro
 
 ---
diff --git a/website/src/docs/index.mdx b/website/src/docs/index.mdx
index 726c32c..d564dd5 100644
--- a/website/src/docs/index.mdx
+++ b/website/src/docs/index.mdx
@@ -20,7 +20,7 @@ category: "Introduction"
 
 2. Add the toast provider:
 
-```jsx {8}
+```jsx {3,8}
 // 📃 main.tsx
 
 import { Toaster } from '@pheralb/toast';
@@ -35,7 +35,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 
 3. Usage:
 
-```jsx {10-13}
+```jsx {3, 10-13}
 // 📃 index.tsx
 
 import { toast } from "@pheralb/toast";
diff --git a/website/src/docs/nextjs.mdx b/website/src/docs/nextjs.mdx
index e8a8a09..4132ebe 100644
--- a/website/src/docs/nextjs.mdx
+++ b/website/src/docs/nextjs.mdx
@@ -35,7 +35,7 @@ npx create-next-app@latest
 
 > 💡 By default, `Toaster` includes `use client` directive.
 
-```tsx {1,13}
+```tsx {3,14}
 // 📃 layout.tsx
 
 import { Toaster } from "@pheralb/toast";
@@ -58,7 +58,7 @@ export default function RootLayout({
 
 3. Use the [`toast`](/toast) function in your **client** components:
 
-```tsx
+```tsx {9-11}
 "use client";
 
 import { toast } from "@pheralb/toast";
@@ -82,7 +82,7 @@ export default function MyComponent() {
 
 The library exports a CSS file that you can include in your project. Only use in cases where the toast styles do not render correctly:
 
-```tsx
+```tsx {5}
 // 📄 app/layout.tsx
 
 import type { ReactNode } from "react";
diff --git a/website/src/docs/remix.mdx b/website/src/docs/remix.mdx
index 1299f43..b738196 100644
--- a/website/src/docs/remix.mdx
+++ b/website/src/docs/remix.mdx
@@ -39,7 +39,7 @@ npx create-remix@latest
 
 2. Add the [`Toaster`](/toaster) to the `root.tsx` file:
 
-```tsx
+```tsx {3,16}
 // 📃 root.tsx
 
 import { Toaster } from "@pheralb/toast";
@@ -70,7 +70,7 @@ export default function App() {
 
 3. Use the [`toast`](/toast) function in your components or pages:
 
-```tsx
+```tsx {11-13}
 // 📃 index.tsx
 
 import { toast } from "@pheralb/toast";
@@ -99,7 +99,7 @@ The library exports a CSS file that you can include in your project. Only use in
 
 > 💡 Add the following code to the **global `root.tsx` file**.
 
-```tsx
+```tsx {5}
 // 📄 app/root.tsx
 
 import type { LinksFunction } from "@remix-run/node";
diff --git a/website/src/docs/tanstack.mdx b/website/src/docs/tanstack.mdx
index 50e4d5d..8c42b68 100644
--- a/website/src/docs/tanstack.mdx
+++ b/website/src/docs/tanstack.mdx
@@ -31,7 +31,7 @@ pnpm create @tanstack/router
 
 2. Add the [`Toaster`](/toaster) to the `routes/__root.tsx` file:
 
-```tsx {13}
+```tsx {3,13}
 import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import { Toaster } from "@pheralb/toast";
@@ -53,7 +53,7 @@ function RootComponent() {
 
 3. Use the [`toast`](/toast) function in your components or pages:
 
-```tsx
+```tsx {2,14-16}
 import { createFileRoute } from "@tanstack/react-router";
 import { toast } from "@pheralb/toast";
 
@@ -85,7 +85,7 @@ The library exports a CSS file that you can include in your project. Only use in
 
 > 💡 Add the following code to the **global `src/routes/__root.tsx` file**.
 
-```tsx
+```tsx {3,7}
 // 📄 src/routes/__root.tsx
 
 import pheralbToastStyles from "@pheralb/toast/dist/styles.css?url";