After searching extensively, I discovered that formatted code can be added within another tag called CodeBlock and imported. Finally, the code appears as follows:

```mdx-code-block
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
```
<mdx-code-block>
<Tabs>
<TabItem value="current" label="Current">
<CodeBlock language="php">
{`$event = request()->event;
$causerName = request()->causerName;
$causerLastName = request()->causerLastName;
$action = request()->action;
$role = request()->role;
$initDate = request()->initDate;
$finDate = request()->finDate;
`}
</CodeBlock>
</TabItem>

I hope this helps you.

I found a way to do it by swizzle https://docusaurus.io/docs/swizzling the codeblock. Swizzling is essentially just copying the default source code from Docusaurus library into your project and Docusausrus will automatically use your edited codeblock code instead of the default.

First I tried to swizzle the entire codeblock.

npm run swizzle @docusaurus/theme-classic CodeBlock -- --eject

but that broke the live code editor https://docusaurus.io/docs/markdown-features/code-blocks#interactive-code-editor that I also want to use. It became a normal codeblock.

Then I swizzled the codeblock with wrap.

npm run swizzle @docusaurus/theme-classic CodeBlock -- --wrap

But then I had problem positioning the new edit button nicely.

Then I swizzled only the content part.

npm run swizzle @docusaurus/theme-classic CodeBlock/Content -- --eject

This did not break the live editor and it was easy to position the new edit button next to the copy button. I edited the files String.js and styles.modules.css.

In the markup file I then can use an edit attribute.

```js edit
let a = 1;
console.log(a);  
```

and in String.js I look for this attribute.

{(metastring ?? "").includes("edit") && <button onClick={handleEditCode}>Edit</button>}