Update responsive-images.mdx

Author: mohith2883

docs/src/content/docs/guides/responsive-images.mdx

@@ -6,7 +6,6 @@ head:
     content: Responsive Images - Astro Cloudinary
 ---
 import { CldImage } from '../../../../../astro-cloudinary';
-
 import CodeBlock from '../../../components/CodeBlock.astro';
 import HeaderImage from '../../../components/HeaderImage.astro';
 
@@ -60,7 +59,7 @@ in order to provide the responsive sizing.
 
 In the example above, the output would look like:
 
-```
+```html
 <img
   class="astro-cloudinary-cldimage"
   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
@@ -118,7 +117,7 @@ In an example such as:
   import { CldImage } from 'astro-cloudinary';
 
   <CldImage
-    src="Public ID>"
+    src="<Public ID>"
     width="<Width>"
     height="<Height>"
     crop="fill"
@@ -130,10 +129,10 @@ In an example such as:
 
 Each image will be cropped to a 1:1 ratio represented by the width and height provided.
 
-As the underlaying Unpic Image component generates an image for each responsive size,
+As the underlying Unpic Image component generates an image for each responsive size,
 Cloudinary will use those sizes when building the URL, for example:
 
-```
+```html
 <img
   alt="Turtle"
   loading="lazy"
@@ -183,7 +182,7 @@ than a 640x640 image.
   import { CldImage } from 'astro-cloudinary';
 
   <CldImage
-    src="Public ID>"
+    src="<Public ID>"
     width="<Width>"
     height="<Height>"
     crop="thumb"
@@ -195,7 +194,7 @@ than a 640x640 image.
 
 The resulting transformations may look like:
 
-```
+```text
 .../w_256,h_256,c_thumb/...
 .../w_384,h_384,c_thumb/...
 .../w_640,h_640,c_thumb/...
@@ -254,7 +253,7 @@ values by explicitly setting them.
 
 The resulting transformations may look like:
 
-```
+```text
 .../w_960,h_960,c_thumb/<Other Transformations>/w_256,h_256,c_limit/...
 .../w_960,h_960,c_thumb/<Other Transformations>/w_384,h_384,c_limit/...
 .../w_960,h_960,c_thumb/<Other Transformations>/w_640,h_640,c_limit/...