diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md
index e3830272a04a..53c3c9be95b9 100644
--- a/packages/integrations/mdx/README.md
+++ b/packages/integrations/mdx/README.md
@@ -42,9 +42,9 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
+__`astro.config.mjs`__
 
-```js
+```js ins={2} "mdx()"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -92,8 +92,9 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con
 There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
@@ -128,8 +129,9 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
 
 For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -155,8 +157,9 @@ export default defineConfig({
 
 You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';