added fixes to MDX pages that needed line highlights, code language titles and path specifications

src/pages/docs/how-to/authentication/index.mdx

@@ -113,7 +113,7 @@ Here are some things you can do to continue to test and add to your auth strateg
 
 - You can verify that authentication is working by adding a `console.log()` with the current user's name to check whether they are being authenticated properly. Using the above code example, it would look like this:
 
-```js
+```js title="pages/gated/index.js"
 import { useAuth, getApolloAuthClient, useLogout } from "@faustwp/core";
 import { gql, useQuery } from "@apollo/client";
 
@@ -142,7 +142,7 @@ function AuthenticatedView() {
   }
 
   // Console log the current user's name to verify authentication
-  console.log("Authenticated user's name:", data?.viewer?.name);
+  console.log("Authenticated user's name:", data?.viewer?.name); // [!code ++]
 
 // Rest of your component
 ```

src/pages/docs/how-to/post-previews/index.mdx

@@ -43,7 +43,7 @@ export default function MyApp({ Component, pageProps }) {
 
 With your headless secret set and the `authorizeHandler` ready to handle requests, you can now create a Next.js [page](https://nextjs.org/docs/basic-features/pages) for previews. Create a file at `pages/preview.js` with the following code:
 
-```js
+```js title="pages/preview.js"
 import { WordPressTemplate } from "@faustwp/core";
 
 export default function Preview(props) {
@@ -59,7 +59,7 @@ Just a note, we don't use the `getWordPressProps` here as opposed in some other
 
 Now that we have everything set up, it is time to add post previews to your WPGraphQL queries. Navigate to your `wp-templates` folder. You should have a `single.js` from the template hierarchy step. This `single.js` file is the component that is responsible for rendering post-type data from WordPress. In your `single.js` file, add this code block:
 
-```js
+```js title="wp-templates/single.js"
 import { gql } from "@apollo/client";
 
 export default function Component(props) {

src/pages/docs/how-to/rendering-blocks-with-the-template-hierarchy/index.mdx

@@ -28,36 +28,31 @@ Set up the [template hierarchy](/docs/how-to/template-hierarchy/) in Faust.js.
 
 The `@faust/blocks` package contains a small reference list of blocks that you can use in your site. To use them, you need to import the relevant blocks into your block list:
 
-JavaScript
-
-```
+```js title="wp-blocks/index.js"
 // wp-blocks/index.js
-import { CoreBlocks } from '@faustwp/blocks';
+import { CoreBlocks } from "@faustwp/blocks";
 
 export default {
-  CoreParagraph: CoreBlocks.CoreParagraph,
-  CoreColumns: CoreBlocks.CoreColumns,
-  CoreColumn: CoreBlocks.CoreColumn,
-  CoreCode: CoreBlocks.CoreCode,
-  CoreQuote: CoreBlocks.CoreQuote,
-  CoreImage: CoreBlocks.CoreImage,
-  CoreSeparator: CoreBlocks.CoreSeparator,
-  CoreList: CoreBlocks.CoreList,
-  CoreButton: CoreBlocks.CoreButton,
-  CoreButtons: CoreBlocks.CoreButtons,
-  CoreHeading: CoreBlocks.CoreHeading,
+	CoreParagraph: CoreBlocks.CoreParagraph,
+	CoreColumns: CoreBlocks.CoreColumns,
+	CoreColumn: CoreBlocks.CoreColumn,
+	CoreCode: CoreBlocks.CoreCode,
+	CoreQuote: CoreBlocks.CoreQuote,
+	CoreImage: CoreBlocks.CoreImage,
+	CoreSeparator: CoreBlocks.CoreSeparator,
+	CoreList: CoreBlocks.CoreList,
+	CoreButton: CoreBlocks.CoreButton,
+	CoreButtons: CoreBlocks.CoreButtons,
+	CoreHeading: CoreBlocks.CoreHeading,
 };
 ```
 
 You can add the code block above to your `wp-blocks/index.js` file.
 
 Then in your template query, you need to pass the provided fragment entries:
 
-JavaScript
-
-```
-// wp-templates/front-page.js
-import blocks from '../wp-blocks';
+```js title=" wp-templates/front-page.js"
+import blocks from "../wp-blocks";
 
 Component.query = gql`
   ${blocks.CoreParagraph.fragments.entry}
@@ -103,10 +98,8 @@ Component.query = gql`
 
 Now that you have all the queries ready, you can render the blocks using the provided `flatListToHierarchical` method and `WordPressBlocksViewer`:
 
-JavaScript
+```js title="wp-templates/front-page.js"
 
-```
-// wp-templates/front-page.js
 
 import { gql } from '@apollo/client';
 import { flatListToHierarchical } from '@faustwp/core';
@@ -134,10 +127,8 @@ export default function Component({ loading, data }) {
 
 ### WordPressBlocksProvider- Theme Use
 
-If you do not need a theme, you must pass `null` as the `theme` prop for the `WordPressBlocksProvider` like below. If you don’t pass a theme, it will fail.
+If you do not need a theme, you must pass `null` as the `theme` prop for the `WordPressBlocksProvider` like the example below. If you don’t pass a theme, it will fail.
 
-JavaScript
-
-```
+```js
 <WordPressBlocksProvider config={{ blocks, theme: null }}>
 ```

src/pages/docs/how-to/rendering-blocks/index.mdx

@@ -52,8 +52,6 @@ In WordPress block development, a `block.json` file is a configuration file that
 
 As an example, given the following `block.json` definition of a block:
 
-JSON
-
 ```json title="block.json"
 // block.json
 {
@@ -133,7 +131,7 @@ export default {
 
 To query specific block data you need to define that data in the `contentBlock` as the appropriate type. Here is an example query to get all the rendered HTML from the `editorBlocks` field:
 
-```gql
+```graphql
 query GetBlocksByURI($uri: ID!) {
 	post(id: $uri, idType: URI) {
 		title