docs: cleanup highlighted lines and imports (#5294)

docs/guides/api-routes.md

@@ -45,7 +45,7 @@ export async function loader({ request }: LoaderArgs) {
 
 And then `useFetcher` along with Reach UI's combobox input:
 
-```tsx [2,11,14,19,21,23]
+```tsx lines=[2,11,14,19,21,23]
 function CitySearchCombobox() {
   const cities = useFetcher();
 

docs/guides/constraints.md

@@ -265,7 +265,7 @@ The most common scenario is initializing a third party API when your module is i
 
 This ensures the library is only initialized if there is a `document`, meaning you're in the browser. We recommend `document` over `window` because server runtimes like Deno have a global `window` available.
 
-```js [3]
+```js lines=[3]
 import firebase from "firebase/app";
 
 if (typeof document !== "undefined") {
@@ -279,7 +279,7 @@ export { firebase };
 
 This strategy defers initialization until the library is actually used:
 
-```js [4]
+```js lines=[4]
 import { loadStripe } from "@stripe/stripe-js";
 
 export async function redirectToStripeCheckout(sessionId) {
@@ -331,7 +331,7 @@ function useLocalStorage(key) {
 
 You can fix this by moving the code into `useEffect`, which only runs in the browser.
 
-```js [2,4-6]
+```jsx lines=[2,4-6]
 function useLocalStorage(key) {
   const [state, setState] = useState(null);
 

docs/guides/data-writes.md

@@ -209,9 +209,9 @@ const [errors, project] = await createProject(formData);
 
 If there are validation errors, we want to go back to the form and display them.
 
-```tsx lines=[1, 5, 7-10]
-import { redirect, json } from "@remix-run/node"; // or cloudflare/deno
-// ...
+```tsx lines=[1,5,7-10]
+import { json, redirect } from "@remix-run/node"; // or cloudflare/deno
+
 export const action = async ({ request }: ActionArgs) => {
   const formData = await request.formData();
   const [errors, project] = await createProject(formData);
@@ -229,7 +229,7 @@ Just like `useLoaderData` returns the values from the `loader`, `useActionData`
 
 ```tsx lines=[3,10,20,25-29,37,42-46]
 import type { ActionArgs } from "@remix-run/node"; // or cloudflare/deno
-import { redirect, json } from "@remix-run/node"; // or cloudflare/deno
+import { json, redirect } from "@remix-run/node"; // or cloudflare/deno
 import { useActionData } from "@remix-run/react";
 
 export const action = async ({ request }: ActionArgs) => {
@@ -291,8 +291,8 @@ You can ship this code as-is. The browser will handle the pending UI and interru
 
 Let's use progressive enhancement to make this UX a bit more fancy. By changing it from `<form>` to `<Form>`, Remix will emulate the browser behavior with `fetch`. It will also give you access to the pending form data so you can build pending UI.
 
-```tsx [2, 11]
-import { redirect, json } from "@remix-run/node"; // or cloudflare/deno
+```tsx lines=[2,11]
+import { json, redirect } from "@remix-run/node"; // or cloudflare/deno
 import { useActionData, Form } from "@remix-run/react";
 
 // ...
@@ -315,8 +315,8 @@ If you don't have the time or drive to do the rest of the job here, use `<Form r
 
 Now let's add some pending UI so the user has a clue something happened when they submit. There's a hook called `useTransition`. When there is a pending form submission, Remix will give you the serialized version of the form as a <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">`FormData`</a> object. You'll be most interested in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/get">`formData.get()`</a> method.
 
-```tsx [5, 13, 19, 65-67]
-import { redirect, json } from "@remix-run/node"; // or cloudflare/deno
+```tsx lines=[5,13,19,65-67]
+import { json, redirect } from "@remix-run/node"; // or cloudflare/deno
 import {
   useActionData,
   Form,
@@ -428,7 +428,7 @@ function ValidationMessage({ error, isSubmitting }) {
 
 Now we can wrap our old error messages in this new fancy component, and even turn the borders of our fields red that have errors:
 
-```tsx [21-24, 31-34, 44-48, 53-56]
+```tsx lines=[21-24,31-34,44-48,53-56]
 export default function NewProject() {
   const transition = useTransition();
   const actionData = useActionData<typeof action>();

docs/guides/disabling-javascript.md

@@ -17,7 +17,7 @@ export const handle = { hydrate: true };
 
 Now open `root.tsx`, bring in `useMatches` and add this:
 
-```tsx [6,10,13-15,27]
+```tsx lines=[6,10,13-15,27]
 import {
   Meta,
   Links,

docs/guides/envvars.md

@@ -81,7 +81,7 @@ Instead we recommend keeping all of your environment variables on the server (al
 
 1. **Return `ENV` for the client from the root loader** - Inside your loader you can access your server's environment variables. Loaders only run on the server and are never bundled into your client-side JavaScript.
 
-   ```tsx [3-6]
+   ```tsx lines=[3-6]
    export async function loader() {
      return json({
        ENV: {
@@ -109,7 +109,7 @@ Instead we recommend keeping all of your environment variables on the server (al
 
 2. **Put `ENV` on window** - This is how we hand off the values from the server to the client. Make sure to put this before `<Scripts/>`
 
-   ```tsx [10, 19-25]
+   ```tsx lines=[10,19-25]
    export async function loader() {
      return json({
        ENV: {
@@ -144,7 +144,7 @@ Instead we recommend keeping all of your environment variables on the server (al
 
 3. **Access the values**
 
-   ```tsx [6-8]
+   ```tsx lines=[6-8]
    import { loadStripe } from "@stripe/stripe-js";
 
    export async function redirectToStripeCheckout(

docs/hooks/use-matches.md

@@ -60,8 +60,7 @@ You can put whatever you want on a route `handle`. Here we'll use `breadcrumb`.
 
 3. Now we can put it all together in our root route with `useMatches`.
 
-   ```tsx [6, 20-31]
-   // root.tsx
+   ```tsx filename=root.tsx lines=[5,19-30]
    import {
      Links,
      Scripts,

docs/other-api/adapter.md

@@ -43,7 +43,7 @@ createRequestHandler({ build, getLoadContext });
 
 Here's a full example with express:
 
-```ts [2-4, 11-22]
+```ts lines=[2-4,11-22]
 const express = require("express");
 const {
   createRequestHandler,

docs/pages/technical-explanation.md

@@ -34,7 +34,7 @@ It's built on the [Web Fetch API][fetch] instead of Node.js. This enables Remix
 
 This is what Remix looks like when running in an express app:
 
-```js [2,6-9]
+```js lines=[2,6-9]
 const express = require("express");
 const remix = require("@remix-run/express");