fix: steps not rendering - use plain text

docs/content/3.cookbook/2.pass-custom-headers-and-cookies-to-requests.md

@@ -18,27 +18,27 @@ This guide uses the integrations boilerplate with the nuxt option. The same basi
 All SDK modules export a client instance of axios. This is the axios instance that is used to make requests to the Server Middleware. You can access this instance by importing the `client` from the SDK.
 
 ## Steps
-::steps
-#step-1
-**Import Required Modules**
+
+step 1.
+###  **Import Required Modules**
 
 ```javascript
 import { initSDK, buildModule } from '@vue-storefront/sdk';
 import { client, boilerplateModule, BoilerplateModuleType } from '../../packages/sdk/src';
 import useHeaders from 'path-to-useHeaders-file'; // Replace with the correct path to the `useHeaders` composable.
 ```
 
-#step-2
-**Define the SDK Configuration**
+step 2.
+### **Define the SDK Configuration**
 ```javascript
 const sdkConfig = {
   boilerplate: buildModule<BoilerplateModuleType>(boilerplateModule, {
     apiUrl: 'http://localhost:8181/boilerplate',
   }),
 };
 ```
-#step-3
-**Fetch Headers with the useHeaders Composable**
+step 3.
+### **Fetch Headers with the useHeaders Composable**
 
 Use the `useHeaders` composable to fetch the necessary headers. This composable manages both server-side and client-side headers for you.
 
@@ -47,8 +47,8 @@ const { addHeadersToState, headerData } = useHeaders();
 addHeadersToState();
 ```
 
-#step-4
-**Setting Up Axios Interceptor**
+step 4.
+### **Setting Up Axios Interceptor**
 
 Before making requests using axios, establish an interceptor to automatically append the desired headers.
 
@@ -88,17 +88,17 @@ interceptorId = client.interceptors.request.use(
 );
 ```
 
-#step-4
-**Initialize and Export the SDK**
+step 5.
+### **Initialize and Export the SDK**
 
 Finally, initialize the SDK with your configuration and export it.
 
 ```javascript
 return initSDK<typeof sdkConfig>(sdkConfig);
 ```
 
-#step-5
-**sdk.config.ts** all together
+step 6.
+### **sdk.config.ts** all together
 
 ```javascript
 import { initSDK, buildModule } from '@vue-storefront/sdk';
@@ -150,7 +150,7 @@ export const useSdk = () => {
 This guide uses a `useHeaders` composable. This composable manages both server-side and client-side headers for you. This is just an example, you can use any method you want to fetch the headers.
 ::
 
-#step-6
+step 7.
 **Create a Composable to Handle Headers**
 
 ```javascript
@@ -201,15 +201,13 @@ export default function () {
 
 You've now set up an interceptor to append custom headers to requests using the axios client in the Vue Storefront SDK. This ensures that all outgoing requests contain the headers you've defined and the Server Middleware will be able to access them through the request object.
 
-::
-
 ## Passing Headers from API Client to external services
 
 Now that you're passing headers from the Vue Storefront SDK client to the Server Middleware, you may want to pass them further to external services (e.g. SAP OCC API). To achieve that, you're going to create a Server Middleware extension which reads the headers from the request object and appends them as defaults to the Server Middleware client.
 
 ## Steps
-::steps
-#step-1
+step 8.
+### Creat server middleware extension
 
 Create a new Server Middleware extension in the `middleware.config.ts` file. In the extension, utilize the `afterCreate` hook which fires after the Server Middleware client had been created. 
 
@@ -260,4 +258,3 @@ You can verify the extension is loading by checking the console output when you
 If everything is working correctly, you should now be able to see the custom header in your external service.
 
 You can verify this by logging the headers in your external service, or by using a tool like HTTP Toolkit to inspect the requests.
-::