Newer
Older

Whitney Armstrong
committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
---
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 />);
```