Docs Cheatsheet
On this page you'll find every markdown & mdx component used in our docs.
Page Title & Dataβ
For the title of the page, and the name of the tab, at the very top of your file, add this code snippet at the top.
Anything inbetween the ---
tags will be used for the page meta data.
---
title: Cheatsheet
id: page-id-when-linking-to-it
---
For Heading 1 specifically, you should set the page title in the meta data.
# Heading 1
Heading 2β
## Heading 2
Heading 3β
### Heading 3
Heading 4β
#### Heading 4
Heading 5β
##### Heading 5
Heading 6β
###### Heading 6
Line breaksβ
Some text
With a line break between each line
Listsβ
Unordered listsβ
- Unordered list 1
- Unordered list 2
- Unordered list 3
- Unordered list 1
- Unordered list 2
- Unordered list 3
Unordered listsβ
As long as there is a number at the start of a list, docusaurus will count incrementally starting with the first number in the list
- Ordered list 1
- Ordered list 2
- Ordered list 3
1. Ordered list 1
2. Ordered list 2
3. Ordered list 3
Nested & Mixed listsβ
- Ordered list
- Sable
- Ferret
- Cat rat
- Fox weasel
- Lamp
- Ordered list
- Grape
- Potatoes
- Chips
- Crisps
- Fondant
- Frites
- Chips
- Lemons
- Three cats
- Pasta
- Ragu
- Ordered list
1. Ordered list
1. Sable
2. Ferret
- Cat rat
- Fox weasel
3. Lamp
2. Ordered list
- Grape
- Potatoes
- Chips
1. Crisps
1. Fondant
1. Frites
- Lemons
1. Three cats
1. Pasta
1. Ragu
3. Ordered list
Text stylingβ
Italic/Emphasize
_Italic/Emphasize_
Strong/Bold
**Strong/Bold**
Italic & Bold
**_Italic & Bold_**
Codeblocksβ
Define a section using ```
. Anything between two lines that contain these 3 back quotes will be in a code block.
To get syntax highlighting and formatting for a certain language such as Javascript:
const threeCats = ['cat', 'cat', 'cat'];
Mind indentation here, code blocks in code blocks is not standard
`js const threeCats = ["cat", "cat", "cat"] `
There are many different formattings to use, md
, js
, ts
, etc. The package used to render Prism react render
Quotesβ
Quoted text.
Quoted quote.
Quoted text.
Quoted quote.
Quoted quote.
Quoted text.
Quoted quote.
Quoted quote.
Quoted quote.
> Quoted text.
> > Quoted quote.
> Quoted text.
>
> > Quoted quote.
> >
> > > Quoted quote.
> Quoted text.
>
> > Quoted quote.
> >
> > > Quoted quote.
> > >
> > > > Quoted quote.
Admonitionsβ
These are nifty notification blocks from Docusaurus.
note
The content and title can include markdown.
Your Title
The content and title can include markdown.
You can specify an optional title
Heads up! Here's a pro tip.
info
Useful information.
caution
Warning! You better pay attention!
danger
Danger danger, mayday!
:::note
The content and title *can* include markdown.
:::
:::note Your Title
The content and title *can* include markdown.
:::
:::tip You can specify an optional title
Heads up! Here's a pro-tip.
:::
:::info
Useful information.
:::
:::caution
Warning! You better pay attention!
:::
:::danger
Danger danger, mayday!
:::
Linksβ
The links in this paragraph are being pulled from a list a link and another link.
The links in this paragraph are being pulled from a list [a link][1] and
another [link][2].
This is that list
[1]: http://example.com/ 'Title'
[2]: http://example.org/ 'Title'
Imagesβ
Alt tags for imagesβ
You can update the alt tag data for text like this:
Logo:
Logo: ![Alt](/img/logo.png 'Warp logo')
You can create an image with a hyperlink to another page or a hash link on the page by adding the link in the brackets next to it.
Linked logo: [![alt text](//img/logo.png)](https://nethermindeth.github.io/warp/ 'Off to the docs')
MDX featuresβ
A quick note on using what's called .mdx
features, mdx
means markdown extended, to use these features, you need to name your file to have the extension .mdx
For example cheatsheet.mdx
This lets you use react components that are a bit more intricate that the standard markdown features.
To make use of an mdx
component like Tabs
, you need to add any import ... from ...
lines to the top of the page, but below the metadata section. Here's an example:
---
title: Cheatsheet (Heading 1)
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
Tabsβ
This is an example of the tabs
component.
For extended usage, please refer to the Docusaurus documentation.
- Apple
- Orange
- Banana
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs
defaultValue="apple"
values={[
{ label: 'Apple', value: 'apple' },
{ label: 'Orange', value: 'orange' },
{ label: 'Banana', value: 'banana' },
]}
>
<TabItem value="apple">This is an apple π</TabItem>
<TabItem value="orange">This is an orange π</TabItem>
<TabItem value="banana">This is a banana π</TabItem>
</Tabs>
Inline Table of Contentsβ
If you need a table contents literally anywhere, you can make use of the <TOCInline>
component.
For extended usage, please refer to the Docusaurus documentation.
import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} />
Footnotes & referencesβ
This is how we make a reference to a footnote or reference that's found at the bottoms of the page.1
This is how we make a reference to a footnote [^1] that's found at the bottoms of the page
To create lists of footnotes, you just add lists like this somewhere, preferably at the bottom of the file
[^1]: an amazing footnote, you can add links n things here as usual
- an amazing footnote, you can add links n things here as usualβ©