Necessary steps

1. Install the expressive code plugin
2. Update your astro.config.mjsfile so that expressiveCode() comes before mdx() (Source)
3. Use a code block in your .mdx files
4. Add the line numbers plugin (make sure to put the required ec.config.mjs on the same folder level as astro.config.mjs)
5. Optional: Override some styles

   1
   // @ts-check
   2
   import { defineConfig } from "astro/config";
   3
   import preact from "@astrojs/preact";
   4
   import tailwindcss from "@tailwindcss/vite";
   5
   import mdx from "@astrojs/mdx";
   6
   import astroExpressiveCode from "astro-expressive-code";
   7
   // https://astro.build/config
   8
   export default defineConfig({
   9
    site: "https://example.com",
   10
    integrations: [
   11
      astroExpressiveCode({
   12
      styleOverrides: {
   13
        borderRadius: '0.5rem',
   14
        frames: {
   15
          shadowColor: '#124',
   16
        },
   17
        codePaddingBlock: '0rem',
   18
        codePaddingInline: '0rem',
   19
        uiPaddingBlock: '0rem',
   20
      }}),
   21
      preact(),
   22
      mdx()
   23
    ],
   24
    vite: {
   25
      plugins: [tailwindcss()],
   26
    },
   27
   });