Rocket Docs

Creating docs

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:

descriptionNoPage description
imageNoUsed for og:image
disableTableOfContentsNoDisables Table Of Contents


title: 'My Example'
description: 'A simple description for this page'
image: /banner.jpeg
disableTableOfContents: false
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). Make sure to check the supported services.

Code Highlight

We support many options for code components.


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

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

Line numbers

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

1const rocket = {
2 launch: () => console.log('Launching...'),

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.

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:

function MyComponent() {
function handleButtonClick() {
return <button onClick={handleButtonClick}>Hey, click me!</button>;
render(<MyComponent />);
Edit this page on GitHub