feat: add mdx as a title to code blocks

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

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

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'`,
       },