Markdown Cheatsheet

Markdown Cheatsheet

Basic Syntax

Headings

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Emphasis

Italic text or Italic text Bold text or Bold text Bold and italic text or Bold and italic text Strikethrough text

_Italic text_ or _Italic text_
**Bold text** or **Bold text**
**_Bold and italic text_** or **_Bold and italic text_**
~~Strikethrough text~~

Custom aside titles

Did you know?

Astro helps you build faster websites with “Islands Architecture”.

Lists

Unordered Lists

• Item 1
• Item 2
  • Nested item 2.1
  • Nested item 2.2
• Item 3

- Item 1
- Item 2
    - Nested item 2.1
    - Nested item 2.2
- Item 3

Ordered Lists

1. First item
2. Second item
   1. Nested item 2.1
   2. Nested item 2.2
3. Third item

1. First item
2. Second item
    1. Nested item 2.1
    2. Nested item 2.2
3. Third item

Task Lists

• Completed task
• Incomplete task
• Another incomplete task

- [x] Completed task
- [ ] Incomplete task
- [ ] Another incomplete task

Links

Link text Link with title

[Link text](https://www.example.com)
[Link with title](https://www.example.com 'Link title')

Images

![Alt text](https://img.rhinorails.com/squooshed/rack-guard-menu-image-5.jpg?tr=w-811,h-298,f-auto,r-4,dpr-auto)
![Alt text](image-url.jpg 'Image title')

Blockquotes

This is a blockquote

This is a multi-line blockquote

> This is a blockquote
>
> This is a multi-line blockquote

Horizontal Rules

---

---

---

---
---

---

Code

Inline Code

inline code

`inline code`

Code Blocks

// Code block with syntax highlighting
function sayHello() {
    console.log('Hello, world!');
}

```
Code block without syntax highlighting
```

```javascript
// Code block with syntax highlighting
function sayHello() {
    console.log('Hello, world!');
}
```

Extended Syntax

Tables

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Alignment

Left-aligned	Center-aligned	Right-aligned
Left	Center	Right
Left	Center	Right

| Left-aligned | Center-aligned | Right-aligned |
| :----------- | :------------: | ------------: |
| Left         |     Center     |         Right |
| Left         |     Center     |         Right |

Footnotes

Here’s a sentence with a ¹footnote.

Here's a sentence with a footnote[^1].

[^1]: This is the footnote.

Definition Lists

term : definition

term
: definition

term : definition

Escaping Characters

* This is not italic * _ This is not italic _ ** This is not bold **

\* This is not italic \*
\_ This is not italic \_
\*\* This is not bold \*\*

HTML in Markdown

This is HTML within Markdown

Secondary

Primary

Primary Button

Secondary Button

Tetriary Button

<div className="custom-class">
    <p>This is HTML within Markdown</p>
    <button
        type="button"
        className="shadow-primary-3 hover:shadow-primary-2 focus:shadow-primary-2 active:shadow-primary-2 bg-primary hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-700 inline-block rounded px-6 pt-2.5 pb-2 text-xs leading-normal font-medium text-white uppercase transition duration-150 ease-in-out focus:ring-0 focus:outline-none motion-reduce:transition-none">
        Button
    </button>
    <br />
    <br />

    <button
        type="button"
        className="shadow-primary-3 hover:shadow-primary-2 focus:shadow-primary-2 active:shadow-primary-2 bg-primary hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-700 inline-block rounded px-6 pt-2.5 pb-2 text-xs leading-normal font-medium text-white uppercase transition duration-150 ease-in-out focus:ring-0 focus:outline-none motion-reduce:transition-none"
        data-twe-ripple-color="light"
        data-twe-ripple-init>
        Click me
    </button>
    <br />
    <br />

    <button
        type="button"
        className="shadow-primary-3 hover:shadow-primary-2 focus:shadow-primary-2 active:shadow-primary-2 bg-primary-500 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-700 inline-block rounded px-6 pt-2.5 pb-2 text-xs leading-normal font-medium text-white uppercase transition duration-150 ease-in-out focus:ring-0 focus:outline-none motion-reduce:transition-none"
        data-twe-ripple-color="light"
        data-twe-ripple-init>
        Primary
    </button>
    <br />
    <br />
    <button
        type="button"
        className="hover:bg-primary-secondary-700 bg-secondary-500 text-primary-700 focus:bg-secondary-700 active:bg-secondary-700 inline-block rounded px-6 pt-2.5 pb-2 text-xs leading-normal font-medium uppercase transition duration-150 ease-in-out focus:ring-0 focus:outline-none motion-reduce:transition-none"
        data-twe-ripple-color="light"
        data-twe-ripple-init>
        Secondary
    </button>
    <br />
    <br />
    <button
        type="button"
        className="bg-blue-gray-50 text-primary hover:bg-blue-gray-200 hover:text-primary-700 focus:bg-blue-gray-200 focus:text-primary-700 active:bg-blue-gray-200 active:text-primary-700 inline-block rounded px-6 pt-2.5 pb-2 text-xs leading-normal font-medium uppercase transition duration-150 ease-in-out focus:ring-0 focus:outline-none motion-reduce:transition-none"
        data-twe-ripple-color="dark"
        data-twe-ripple-init>
        Tetriary
    </button>
    <br />
    <br />
</div>

Specialized Syntax for Documentation

Admonitions (Notes, Warnings)

:::note
This is a note admonition
:::

:::warning
This is a warning
:::

:::danger
This is a danger admonition
:::

:::info
This is an info admonition
:::

:::tip
This is a tip admonition
:::

Code Tabs

```jsx title="Component.jsx"
function MyComponent() {
    return <div>Hello World</div>;
}
```

```css title="styles.css"
.container {
    padding: 20px;
}
```

Keyboard Keys

<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd>

Ctrl; + Alt; + Del

Collapsible Content

<details>
<summary>Click to expand</summary>

This content is hidden by default.

- It can contain any markdown
- Including lists, code blocks, etc.
    </details>

Click to expand

This content is hidden by default.

• It can contain any markdown
• Including lists, code blocks, etc.

Embedding Media

YouTube

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Diagrams (Mermaid)

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Math Equations (LaTeX)

Inline equation: $E = mc^2$

Block equation:

$$
\frac{d}{dx}(x^n) = nx^{n-1}
$$

Starlight-Specific Syntax

Frontmatter

---
title: Page Title
description: Page description used for SEO
layout: ../layouts/MainLayout.astro
---

Component Imports

import { ComponentName } from '@/components/ComponentName';

Component Usage

<ComponentName prop="value" />

Tabs

npm

sh npm install package-name

Yarn

sh yarn add package-name

pnpm

sh pnpm add package-name

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="npm" value="npm">
    ```sh
    npm install package-name
    ```
  </TabItem>
  <TabItem label="Yarn" value="yarn">
    ```sh
    yarn add package-name
    ```
  </TabItem>
  <TabItem label="pnpm" value="pnpm">
    ```sh
    pnpm add package-name
    ```
  </TabItem>
</Tabs>

Code Previews

import { Preview } from '@components/Preview';

<Preview>
<Button>Click Me</Button>
</Preview>

File Tree

• Directorysrc/

  • Directorycomponents/

    • Button.jsx
    • Card.jsx
  • Directorylayouts/

    • MainLayout.astro
• package.json

import { FileTree } from '@astrojs/starlight/components';

<FileTree>
- src/
    - components/
        - Button.jsx
        - Card.jsx
    - layouts/
        - MainLayout.astro
- package.json
</FileTree>

Steps

1. First step instructions
2. Second step instructions
3. Third step instructions

import { Steps } from '@astrojs/starlight/components';

<Steps>
1. First step instructions
2. Second step instructions
3. Third step instructions
</Steps>

Callouts/Asides

Note

This is a note aside.

Tip

This is a tip aside.

Caution

This is a caution aside.

Danger

This is a danger aside.

import { Aside } from '@astrojs/starlight/components';

<Aside type="note">
  This is a note aside.
</Aside>

<Aside type="tip">
  This is a tip aside.
</Aside>

<Aside type="caution">
  This is a caution aside.
</Aside>

<Aside type="danger">
  This is a danger aside.
</Aside>

Icon Usage

import { Icon } from '@astrojs/starlight/components';

<Icon name="github" />

More Aside Types

Caution

If you are not sure you want an awesome docs site, think twice before using Starlight.

Danger

Your users may be more productive and find your product easier to use thanks to helpful Starlight features.

• Clear navigation
• User-configurable color theme
• i18n support

:::caution
If you are not sure you want an awesome docs site, think twice before using [Starlight](/).
:::

:::danger
Your users may be more productive and find your product easier to use thanks to helpful Starlight features.

- Clear navigation
- User-configurable color theme
- [i18n support](/guides/i18n/)

:::

Footnotes

1. This is the footnote. ↩