Syntax Highlighting

Inlined syntax highlighting is also supported: `let x = 1{:jsx}`

console.log('hello, world')

```js filename="example.js"
console.log('hello, world')
```

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

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

  </Tabs.Tab>
</Tabs>

### Highlighting Substrings

You can highlight specific substrings of code by adding a `//` attribute to the code block:

<Tabs items={['Example', 'Code']}>
  <Tabs.Tab>
  ```js /useState/
  import { useState } from 'react'

  function Counter() {
    const [count, setCount] = useState(0)
    return <button onClick={() => setCount(count + 1)}>{count}</button>
  }
  ```
  </Tabs.Tab>

  <Tabs.Tab>
````md filename="Markdown"
```ts /useState/
import { useState } from 'react'

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

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

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

  </Tabs.Tab>
</Tabs>

### ANSI Highlighting

You can highlight ANSI escape codes:

<Tabs items={['Example', 'Code']}>
  <Tabs.Tab>
  ```ansi filename="ANSI escape codes"
   ✓ 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
  ```
  </Tabs.Tab>

  <Tabs.Tab>
````md filename="Markdown"
```ansi filename="ANSI escape codes"
 ✓ 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
```

import { useEffect, useRef } from 'react'
 
export function DynamicCode({ children }) {
const ref = useRef()
const tokenRef = useRef()
// Find the corresponding token from the DOM
useEffect(() => {
  if (ref.current) {
    const token = [...ref.current.querySelectorAll('code span')].find(
      (el) => el.innerText === '1',
    )
    tokenRef.current = token
  }
}, [])
return (
  <>
    <div ref={ref} style={{ marginTop: '1.5rem' }}>
      {children}
    </div>
    <a
      onClick={() => {
        tokenRef.current.innerText = (parseInt(tokenRef.current.innerText) || 0) + 1
      }}
      style={{
        cursor: 'pointer',
        userSelect: 'none',
      }}
    >
      Increase the number
    </a>
    <a
      onClick={() => {
        tokenRef.current.innerText = '1 + 1'
      }}
      style={{
        marginLeft: '.5rem',
        cursor: 'pointer',
        userSelect: 'none',
      }}
    >
      Change to `1 + 1`
    </a>
  </>
)
}
 
<DynamicCode>
```js filename="dynamic_code.js"
function hello () {
  const x = 2 + 3
  console.log(1)
}
```
</DynamicCode>

import { BUNDLED_LANGUAGES } from 'shiki'
 
nextra({
  // ... other options
  mdxOptions: {
    rehypePrettyCodeOptions: {
      getHighlighter: (options) =>
        getHighlighter({
          ...options,
          langs: [
            ...BUNDLED_LANGUAGES,
            // custom grammar options, see the Shiki documentation for how to provide these options
            {
              id: 'my-lang',
              scopeName: 'source.my-lang',
              aliases: ['mylang'], // Along with id, aliases will be included in the allowed names you can use when writing markdown.
              path: '@/public/syntax/grammar.tmLanguage.json',
            },
          ],
        }),
    },
  },
})

```js filename="next.config.js" {13-18}
import { BUNDLED_LANGUAGES } from 'shiki'
 
nextra({
  // ... other options
  mdxOptions: {
    rehypePrettyCodeOptions: {
      getHighlighter: (options) =>
        getHighlighter({
          ...options,
          langs: [
            ...BUNDLED_LANGUAGES,
            // custom grammar options, see the Shiki documentation for how to provide these options
            {
              id: 'my-lang',
              scopeName: 'source.my-lang',
              aliases: ['mylang'], // Along with id, aliases will be included in the allowed names you can use when writing markdown.
              path: '@/public/syntax/grammar.tmLanguage.json',
            },
          ],
        }),
    },
  },
})
```
 

nextra({
  // ... other options
  mdxOptions: {
    rehypePrettyCodeOptions: {
      // VSCode theme or built-in Shiki theme, see Shiki documentation for more information
      theme: JSON.parse(
        readFileSync('./public/syntax/arctis_light.json', 'utf8')
      )
    }
  }
})

```js filename="next.config.js" {4}
nextra({
  // ... other options
  mdxOptions: { rehypePrettyCodeOptions: {
      // VSCode theme or built-in Shiki theme, see Shiki documentation for more information
      theme: JSON.parse(
        readFileSync('./public/syntax/arctis_light.json', 'utf8')
      )
    }
  }
})
```