#Using MDX

Island.js supports MDX, which is a powerful way to write content. You can write, import and use React components in Markdown file.

#Markdown

MDX is the super set of Markdown, which means you can write Markdown file as usual. For example:

# Hello World

#Use Components

When you want to use React components in Markdown file, you should name your file with .mdx extension. For example:

// docs/index.mdx
import { CustomComponent } from './custom';

# Hello World

<CustomComponent />

#Front Matter

You can use Front Matter to add metadata to your Markdown file. For example:

---
title: Hello World
---

Note: by default, Island.js use h1 title as the title of html.

You can also access the property defined in front matter, for example:

---
title: Hello World
---

# {frontmatter.title}

The properties defined in front matter will be passed to the component as meta property. So the final output will be:

<h1>Hello World</h1>

You can see more front matter config detail in config-front-matter.

#Custom Containers

Input:

:::tip
This is a `tip`.
:::

:::info
This ia an `info` box.
:::

:::warning
This is a warning.
:::

:::danger
This is a dangerous warning.
:::

:::other
`tip` as a custom container of the bottom-line type
:::

:::tip{title='Custom title'}
`tip` for customizing the title
:::

Output:

#Emoji

Input:

:tada: :100: :laughing:

Output:

🎉 💯 😆

The complete emoji list cound be found in the Emoji Cheat Sheet.

#Code Line Highlighting

Island.js supports highlighting of specified code lines. You can specify line highlighting in any of the following ways.

Input:

```js{1}
import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    navbar: [
      {
        text: 'Home',
        link: '/',
        activeMatch: '^/$|^/'
      }
    ]
  }
});
```

Output:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    navbar: [
      {
        text: 'Home',
        link: '/',
        activeMatch: '^/$|^/'
      }
    ]
  }
});

In addition to highlight the single line, you can also specify multiple lines to highlight at a time.

• A Line Range: {1-10}
• Multiple single lines: {1,3,5}
• Combine Line Range and Single Lines：{3,5-13,20}

Input:

```js{1,4-7,10}
import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    navbar: [
      {
        text: 'Home',
        link: '/',
        activeMatch: '^/$|^/'
      }
    ]
  }
});
```

Output:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    navbar: [
      {
        text: 'Home',
        link: '/',
        activeMatch: '^/$|^/'
      }
    ]
  }
});

#Codeblock Line Numbers

If you hold that codeblock shows the line numbers, you can open it through this config.

import { defineConfig } from 'islandjs';

export default defineConfig({
  markdown: {
    lineNumbers: true
  }
});