Creating docs

All MDX files created inside your docs folder will become pages, with the path defined by the filename. Inside all docs files, you can define the following options:

Example

Copy
---
title: 'My Example'
description: 'A simple description for this page'
image: /banner.jpeg
disableTableOfContents: false
---

Wow, this is a nice page

Embedding 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). Make sure to check the supported services.

Code Highlight

We support many options for code components.

Title

To show a title, just add it to your code block. Ex: title=src/myfile.css

Copy
.gatsby::before {
  content: 'niceee...';
}

Line numbers

To add line numbers for that code block, pass an option lineNumbers=true.

Copy
1const rocket = {
2  launch: () => console.log('Launching...'),
3};
4
5rocket.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.

function MyComponent() {
  function handleButtonClick() {
    alert('wowww');
  }

  return <button onClick={handleButtonClick}>Hey, click me!</button>;
}

render(<MyComponent />);

If you need to add elements to the scope, check this guide.

Highlight lines

To highlight lines, you can pass ranges to a highlight option. For example highlight={1-4,6-7,9} on the code below would result in:

Copy
function MyComponent() {
  function handleButtonClick() {
    alert('wowww');
  }

  return <button onClick={handleButtonClick}>Hey, click me!</button>;
}

render(<MyComponent />);