MDX Examples

Code extensions

````js filename="demo.js" copy {3} showLineNumbers
let a = 1;

console.log(a);
```

The copy directive adds a copy button to the code block.
THe showLineNumbers directive adds line numbers to the code block.
The filename directive adds a file name to the code block. At the top appears the file name.
The {3} directive highlights the specified line. Remarks line 3.

demo.js

let a = 1;
 
console.log(a);

Regular expressions

```js /useState/
import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```

You can highlight only a part of the occurrences of that substring by adding a number it: /str/1, or multiple: /str/1-3.

import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

ANSI highlighting

```ansi
[0m [0;32m✓[0m [0;2msrc/[0mindex[0;2m.test.ts (1)[0m
  [0;2m Test Files [0m [0;1;32m1 passed[0;98m (1)[0m
  [0;2m      Tests [0m [0;1;32m1 passed[0;98m (1)[0m
  [0;2m   Start at [0m 23:32:41
  [0;2m   Duration [0m 11ms
  [42;1;39;0m PASS [0;32m Waiting for file changes...[0m
         [0;2mpress [0;1mh[0;2m to show help, press [0;1mq[0;2m to quit
```

 ✓ src/index.test.ts (1)
   Test Files  1 passed (1)
        Tests  1 passed (1)
     Start at  23:32:41
     Duration  11ms
   PASS  Waiting for file changes...
         press h to show help, press q to quit

npm2yarn

Nextra uses @theguild/remark-npm2yarn (opens in a new tab) package that replaces the code block that has npm2yarn metadata with <Tabs /> (opens in a new tab) and <Tabs.Tab /> (opens in a new tab) components from nextra/components.

```sh npm2yarn
npm i -D @graphql-eslint/eslint-plugin
```

npm i -D @graphql-eslint/eslint-plugin

Steps component Expression Evaluation