diff --git a/docs/docs/mdx/writing-pages.md b/docs/docs/mdx/writing-pages.md
index 22e23e9f25a60..31eed6d30391e 100644
--- a/docs/docs/mdx/writing-pages.md
+++ b/docs/docs/mdx/writing-pages.md
@@ -18,7 +18,7 @@ By default, `gatsby-plugin-mdx` supports [frontmatter](/docs/adding-markdown-pag
 so you can define things like titles and paths to use in your GraphQL
 queries. You can declare frontmatter at the beginning of your MDX document:
 
-```markdown
+```mdx
 ---
 title: Hello, world!
 path: /hello-world
@@ -53,7 +53,7 @@ query {
 Frontmatter is also available in `props.pageContext.frontmatter` and
 can be accessed in blocks of JSX in your MDX document:
 
-```markdown
+```mdx
 ---
 title: "Building with Gatsby"
 author: "Jay Gatsby"
@@ -71,7 +71,7 @@ author: "Jay Gatsby"
 Similarly to what you'd do in plain React, you can import and render JSX components
 directly in MDX files. You can also import other MDX documents.
 
-```markdown:title=src/pages/chart.mdx
+```mdx:title=src/pages/chart.mdx
 import { Chart } from "../components/chart"
 import FAQ from "../components/faq.mdx"
 
@@ -89,7 +89,7 @@ other React component, while the `<FAQ />` component coming from an `.mdx`
 file might look something like this:
 
 <!-- prettier-ignore -->
-```markdown:title=src/components/faq.mdx
+```mdx:title=src/components/faq.mdx
 ## Frequently Asked Questions
 
 ### Why Gatsby?
@@ -132,7 +132,7 @@ variable name you've assigned it.
 You can export variables, objects, or other data structures:
 
 <!-- prettier-ignore -->
-```markdown
+```mdx
 export const metadata = {
   name: "World",
   path: "/world",
@@ -174,7 +174,8 @@ If you have [provided a default layout](/packages/gatsby-plugin-mdx/?=mdx#defaul
 through the `gatsby-plugin-mdx` plugin options, the exported component you define
 from this file will replace the default.
 
-```markdown:title=src/pages/layout-example.mdx
+<!-- prettier-ignore -->
+```mdx:title=src/pages/layout-example.mdx
 import PurpleBorder from "../components/purple-border"
 
 # This will have a purple border
@@ -203,7 +204,7 @@ as a prop, and can be accessed inside any JSX block when writing in
 MDX:
 
 <!-- prettier-ignore -->
-```markdown
+```mdx
 import { graphql } from "gatsby"
 
 # My Awesome Page
diff --git a/docs/tutorial/writing-documentation-with-docz.md b/docs/tutorial/writing-documentation-with-docz.md
index 99fd1ca9cbfe4..9c83ff1343bdb 100644
--- a/docs/tutorial/writing-documentation-with-docz.md
+++ b/docs/tutorial/writing-documentation-with-docz.md
@@ -44,7 +44,7 @@ module.exports = {
 
 Docz searches your directories for `mdx` files and renders them. Create a `docs` folder at the root of your project. Place an `index.mdx` file inside this directory with the following content:
 
-```md:title=docs/index.mdx
+```mdx:title=docs/index.mdx
 ---
 name: Getting Started
 route: /
@@ -102,7 +102,7 @@ The button will display its text by default with a `font-size` of `18px` however
 
 Create a new file in the `docs` directory to document your newly created button component. Call the file `button.mdx`:
 
-```md:title=docs/button.mdx
+```mdx:title=docs/button.mdx
 ---
 name: Button
 menu: Components
@@ -115,7 +115,7 @@ Buttons make common actions more obvious and help users more easily perform them
 
 Docz offers some internal components you can use to display the component and its properties. Import both these and your component itself into the document and use them:
 
-```md:title=docs/button.mdx
+```mdx:title=docs/button.mdx
 ---
 name: Button
 menu: Components
diff --git a/www/src/utils/typography.js b/www/src/utils/typography.js
index ace1dcbf5b8a6..5a58c13090113 100644
--- a/www/src/utils/typography.js
+++ b/www/src/utils/typography.js
@@ -134,6 +134,12 @@ const _options = {
         color: colors.white,
         fontWeight: `400`,
       },
+      ".gatsby-highlight pre[class='language-mdx']::before": {
+        content: `'mdx'`,
+        background: `#f9ac00`,
+        color: colors.white,
+        fontWeight: `400`,
+      },
       ".gatsby-highlight pre[class='language-shell']::before": {
         content: `'shell'`,
       },