format a bit better

Author: kentcdodds

exercises/06.seo/02.solution.nested/README.mdx

@@ -5,53 +5,51 @@
 👨‍💼 Great! Now we can customize the meta tags on our routes! Let's do a bit more
 for our profile pages.
 
-<callout-warning>
-	🦉 You'll notice that if you navigate to the `/users/kody` route, you'll see
-	the `Profile | Epic Notes` in the title, which is expected. But if you
-	navigate to a child path, like `/users/kody/notes`, you'll see only
-	`Epic Notes` again. It may looks like this is an unexpected behavior as we
-	might be expecting the children paths to inherit the parent's meta
-	overrides.
-
-	## Use case: `/users/kody` and `/users/kody/notes`
-
-	Let's focus on `/users/kody` and `/users/kody/notes` URL paths case for a
-	while: regardless they have a parent-child relationship in terms of their
-	paths, they *do not* have the same relashionship in the REMIX's layout
-	hierarchy. This is how our pages are organized in terms of files
-	inside of the `routes` directory:
-
-	```shell
-	/users/kody 			<=> routes/users+/$username.tsx
-	/users/kody/notes <=> routes/users+/$username_+/notes.tsx
-	```
-	That little underscore in the name of the folder `$username_+` means that
-	the pages inside of it don't use the layout defined in the
-	`routes/users+/$username.tsx` file (and consequently, they won't use the
-	meta override defined over there). In other words: they aren't
-	"layout-nested", even when *they are* "url-nested". In summary:
-	- In terms of URL path: `/users/kody/notes` *is* a child of `/users/kody`
-	- In terms of layout: `/users/kody/notes` *is not* a child of `/users/kody`
-
-	The page in `/users/kody/notes` will, in fact, use the meta override from
-	the first route module hierarchically above `routes/users+/$username.tsx`,
-	which is the override we defined in the `root.tsx`. You can always have a
-	better view of the layout-nesting by running `npx remix routes` in a
-	terminal at the root of a remix project:
-
-	```shell
-  ➜  playground :> npx remix routes
-	<Routes>
-		<Route file="root.tsx">
-			<Route index file="routes/index.tsx" />
-			<Route path="resources/healthcheck" file="routes/resources+/healthcheck.tsx" />
-			<Route path="users/:username" file="routes/users+/$username.tsx" />
-			<Route path="users/:username/notes" file="routes/users+/$username_+/notes.tsx">
-				<Route path=":noteId" file="routes/users+/$username_+/notes.$noteId.tsx" />
-				<Route path=":noteId/edit" file="routes/users+/$username_+/notes.$noteId_.edit.tsx" />
-				<Route index file="routes/users+/$username_+/notes.index.tsx" />
-			</Route>
+🦉 You'll notice that if you navigate to the `/users/kody` route, you'll see the
+`Profile | Epic Notes` in the title, which is expected. But if you navigate to a
+child path, like `/users/kody/notes`, you'll see only `Epic Notes` again. It may
+look like this is an unexpected behavior as we might be expecting the children
+paths to inherit the parent's meta overrides.
+
+## Use case: `/users/kody` and `/users/kody/notes`
+
+Let's focus on `/users/kody` and `/users/kody/notes` URL paths case for a while:
+regardless they have a parent-child relationship in terms of their paths, they
+_do not_ have the same relashionship in the REMIX's layout hierarchy. This is
+how our pages are organized in terms of files inside of the `routes` directory:
+
+```
+/users/kody 			<=> routes/users+/$username.tsx
+/users/kody/notes <=> routes/users+/$username_+/notes.tsx
+```
+
+That little underscore in the name of the folder `$username_+` means that the
+pages inside of it don't use the layout defined in the
+`routes/users+/$username.tsx` file (and consequently, they won't use the meta
+override defined over there). In other words: they aren't "layout-nested", even
+when _they are_ "url-nested". In summary:
+
+- In terms of URL path: `/users/kody/notes` _is_ a child of `/users/kody`
+- In terms of layout: `/users/kody/notes` _is not_ a child of `/users/kody`
+
+The page in `/users/kody/notes` will, in fact, use the meta override from the
+first route module hierarchically above `routes/users+/$username.tsx`, which is
+the override we defined in the `root.tsx`. You can always have a better view of
+the layout-nesting by running `npx remix routes` in a terminal at the root of a
+remix project. Doing that you should get something like this:
+
+{/* prettier-ignore */}
+```tsx
+<Routes>
+	<Route file="root.tsx">
+		<Route index file="routes/index.tsx" />
+		<Route path="resources/healthcheck" file="routes/resources+/healthcheck.tsx" />
+		<Route path="users/:username" file="routes/users+/$username.tsx" />
+		<Route path="users/:username/notes" file="routes/users+/$username_+/notes.tsx">
+			<Route path=":noteId" file="routes/users+/$username_+/notes.$noteId.tsx" />
+			<Route path=":noteId/edit" file="routes/users+/$username_+/notes.$noteId_.edit.tsx" />
+			<Route index file="routes/users+/$username_+/notes.index.tsx" />
 		</Route>
-	</Routes>
-	```
-</callout-warning>
+	</Route>
+</Routes>
+```