--- title: Creating docs --- By creating a MDX file inside your docs folder it will be created as a page, with the path defined by the filename. Inside all docs files, you can define the following options: <div style="overflow-x:auto;"> <table> <tr> <th>Key</th> <th>Required?</th> <th>Description</th> </tr> <tr> <td>title</td> <td>Yes</td> <td>Page title</td> </tr> <tr> <td>description</td> <td>No</td> <td>Page description</td> </tr> <tr> <td>image</td> <td>No</td> <td>Used for og:image</td> </tr> </table> </div> ### Example: ```mdx --- title: 'My Example' description: 'A simple description for this page' image: /banner.jpeg --- Wow, this is a nice page ``` ## Embeding files In a documentation website, sometimes you will need to embed well known services (like CodeSandbox, Twitter, or others...). If you need to do it, you can simply copy-paste the link (powered by the awesome [gatsby-remark-embeder](https://www.gatsbyjs.org/packages/gatsby-remark-embedder/)). Make sure to check the [supported services](https://github.com/MichaelDeBoey/gatsby-remark-embedder#supported-services). https://youtu.be/QfcozcbDhNM ## Code Highlight ### Title To show the title, just add it to your code block. Ex: `title=src/myfile.css` ```css title=src/myfile.css .gatsby::before { content: 'niceee...'; } ``` ### Line numbers If you want to show line number, just add a option `lineNumbers=true`. ```js lineNumbers=true const rocket = { launch: () => console.log('Launching...'), }; rocket.launch(); ``` ### React live As mentioned in the introduction, this theme uses `react-live`, so you can create a playground for live editing React components. To use it, just add a `live=true` option to your code block. ```jsx live=true function MyComponent() { function handleButtonClick() { alert('wowww'); } return <button onClick={handleButtonClick}>Hey, click me!</button>; } render(<MyComponent />); ```