CheatSheets CHEAT SHEET

This is the magic syntax variant manual that you can use on CheatSheets.zip, It's a good practice for contributors.

guidereference

Sections

Cards

#Getting Started

Develop Setup

$ git clone https://github.com/Fechin/reference.git

Install Dependencies in the project directory
```
$ npm install
```
Start a Dev Server http://localhost:4000
```
$ npm run dev
```
Create or modify source/_posts/{name}.md
Send us pull request and chill {.marker-timeline}

It's a good practice to refer to the source code of the CheatSheets reference.

Directory Structure

.
├── source
│   ├── _posts   # Cheatsheet source files
│   │   ├── awk.md
│   │   ├── vim.md # => cheatsheets.zip/vim
│   │   ├── php.md
│   │   ├── css.md # => cheatsheets.zip/css
│   │   ├── ...
│   └── widget   # Widget files
│       └── chmod.html
├── public       # Distribution files
├── _config.yml
├── gulpfile.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── themes
    └── coo      # Theme files

Cheatsheet Structure

.
├── Section 1   # Header
│   ├── Card 1
│   ├── Card 2
│   ├── Card 3
│   ├── ...
├── Section 2
│   ├── Card 1
│   │   ├── Paragraph
│   │   ├── Code
│   │   ├── <hr/> (aka "---")
│   │   ├── List
│   │   │   ├── Paragraph
│   │   │   └── Code
│   │   └── Table
│   │       ├── Paragraph
│   │       └── Code
│   ├── Card 2
│   ├── Card 3
│   └── ...
├── Section 3
├── Section 4
└── ...

One cheatsheet contains multiple sections
One section contains multiple cards
One card can contain Code, Table, List and Paragraph
One list can contain Code and Paragraph
One table can contain Code and Paragraph

Syntax Variants

Section Variants
Card Variants
Table Variants
List Variants
Code Variants
Paragraph Variants
Cards Example

All the magic variants supported by CheatSheets.zip

Create source/\_posts/demo.md

## Getting Started

### List Card {.col-span-2}

- Share quick reference
- Cheatsheet for developers ... {.style-timeline}

### Table Card

| id  | name    |
| --- | ------- |
| 1   | Roberta |

{.show-header}

#Section Variants

Section Overview

-	-
`{.cols-1}`	one-column layout
`{.cols-2}`	two-column layout
`{.cols-3}`	three-column layout (default)
...
`{.cols-6}`	six-column layout

Section contains multiple cards
Use {.cols-n} to specify section as a n-column layout
Click the preview button below to focus on the section

Preview {.link-arrow}

.cols-1

# One Column Example {.cols-1}
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  1                                  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  2                                  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

↓ Source Code

## One Column Example {.cols-1}

### 1

### 2

Preview {.link-arrow}

.cols-2

# Two Columns Example
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  1              ┆ ┆  2              ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  3              ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

↓ Source Code

## Two Columns Example {.cols-2}

### 1

### 2

### 3

Preview {.link-arrow}

.cols-3 (default)

# Default
╭┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈╮
┆  1       ┆ ┆  2       ┆ ┆  3       ┆
╰┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈╮
┆  4       ┆
╰┈┈┈┈┈┈┈┈┈┈╯

↓ Source Code

## Default

### 1

### 2

### 3

### 4

#Card Variants

Card Overview

Specifies the number of columns the card spans

-	-
`{.col-span-2}`	Example
`{.col-span-3}`
...
`.col-span-6}`

Specifies the number of rows the card spans {.text-left}

-	-
`{.row-span-2}`	Example
`{.row-span-3}`
...
`{.row-span-6}`

Emphasize card (aka `H3` Section)

-	-
`{.primary}`	Red titles, Example
`{.secondary}`	Yellow titles, Example

A complete example: Cards Example

.col-span-2

The fifth card spans two columns

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆  1      ┆ ┆  2      ┆ ┆  3      ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  4      ┆ ┆  5                  ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

### 1

### 2

### 3

### 4

### 5 {.col-span-2}

The second card spans two columns

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  1      ┆ ┆  2                  ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆  3      ┆ ┆  4      ┆ ┆  5      ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

### 1

### 2 {.col-span-2}

### 3

### 4

### 5

The fourth card spans two columns

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆  1      ┆ ┆  2      ┆ ┆  3      ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆  4                  ┆ ┆  5      ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

### 1

### 2

### 3

### 4 {.col-span-2}

### 5

.row-span-2

The first card spans two rows

╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1      ┆ ┆ 2       ┆ ┆ 3       ┆
┆        ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
┆        ┆ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆        ┆ ┆ 4       ┆ ┆ 5       ┆
╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

### 1 {.row-span-2}

### 2

### 3

### 4

### 5

The second card spans two rows

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1       ┆ ┆ 2      ┆ ┆ 3       ┆
╰┈┈┈┈┈┈┈┈┈╯ ┆        ┆ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ┆        ┆ ╭┈┈┈┈┈┈┈┈┈╮
┆ 4       ┆ ┆        ┆ ┆ 5       ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

### 1

### 2 {.row-span-2}

### 3

### 4

### 5

The third card spans two rows

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮
┆ 1       ┆ ┆ 2       ┆ ┆ 3      ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ┆        ┆
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆        ┆
┆ 4       ┆ ┆ 5       ┆ ┆        ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯

### 1

### 2

### 3 {.row-span-2}

### 4

### 5

.col-span-2 .row-span-2

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1                   ┆ ┆ 2       ┆
┆                     ┆ ╰┈┈┈┈┈┈┈┈┈╯
┆                     ┆ ╭┈┈┈┈┈┈┈┈┈╮
┆                     ┆ ┆ 3       ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 4       ┆ ┆ 5       ┆ ┆ 6       ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

↓ Source Code

### 1 {.col-span-2 .row-span-2}

### 2

### 3

### 4

### 5

Spans rows and columns at the same time

#Table Variants

Table Overview

-	-
`{.show-header}`	Show the header of the table
`{.shortcuts}`	Render shortcut key style
`{.bold-first}`	Bold first column
`{.plus-first}`	Plus first column
`{.show-header}`	Show headers
`{.left-text}`	Align the last column left
`{.no-wrap}`	Don't wrap text

Basic table

Pattern	Description
`[abc]`	Match a, b or c
`[^abc]`	Match except a, b or c
`[a-z]`	Match a to z

↓ Source Code

| Pattern  | Description            |
| -------- | ---------------------- |
| `[abc]`  | Match a, b or c        |
| `[^abc]` | Match except a, b or c |
| `[a-z]`  | Match a to z           |

.shortcuts

-	-
`Ctrl` `N`	New File
`Ctrl` `S`	Save

{.shortcuts}

↓ Source Code

| -          | -        |
| ---------- | -------- |
| `Ctrl` `N` | New File |
| `Ctrl` `S` | Save     |

{.shortcuts}

.show-header

Pattern	Description
`[abc]`	Match a, b or c
`[^abc]`	Match except a, b or c
`[a-z]`	Match a to z

{.show-header}

↓ Source Code

| Pattern  | Description            |
| -------- | ---------------------- |
| `[abc]`  | Match a, b or c        |
| `[^abc]` | Match except a, b or c |
| `[a-z]`  | Match a to z           |

{.show-header}

.left-text

Pattern	Description
`[abc]`	Match a, b or c
`[^abc]`	Match except a, b or c
`[a-z]`	Match a to z

{.left-text}

↓ Source Code

| Pattern  | Description            |
| -------- | ---------------------- |
| `[abc]`  | Match a, b or c        |
| `[^abc]` | Match except a, b or c |
| `[a-z]`  | Match a to z           |

{.left-text}

.bold-first

Pattern	Description
`[abc]`	Match a, b or c
`[^abc]`	Match except a, b or c
`[a-z]`	Match a to z

{.bold-first}

↓ Source Code

| Pattern  | Description            |
| -------- | ---------------------- |
| `[abc]`  | Match a, b or c        |
| `[^abc]` | Match except a, b or c |
| `[a-z]`  | Match a to z           |

{.bold-first}

#List Variants

List Overview

List columns

-	-
`{.cols-1}`	one column (default)
`{.cols-2}`	two columns
...
`{.cols-6}`

List markers

-	-
`{.marker-none}`	Marker is not set
`{.marker-timeline}`	Marker style like timeline
`{.marker-round}`	Round marker

One Column (Default)

Share quick reference.
cheat sheet for developers.
Contributed by open source angels.
Manage your code snippets.

↓ Source Code

- Share quick reference.
- cheat sheet for developers.
- Contributed by open source angels.
- Manage your code snippets.

.cols-3

Share
Quick
Reference
And
Cheat Sheet
For
Developers

{.cols-3}

↓ Source Code

- Share
- Quick
- Reference
- And
- Cheat Sheet
- For
- Developers

{.cols-3}

.marker-timeline

Renamed to new_name
```
$ git branch -m <new_name>
```
Push and reset
```
$ git push origin -u <new_name>
```
Delete remote branch shell script $ git push origin --delete <old>

{.marker-timeline}

↓ Source Code

- **Renamed** to `new_name`
  ```shell script
  $ git branch -m <new_name>
  ```
- **Push** and reset
  ```shell script
  $ git push origin -u <new_name>
  ```
- **Delete** remote branch `shell script     $ git push origin --delete <old>     `

{.marker-timeline}

.marker-none

Share
Quick
Reference
And
Cheat Sheet

{.cols-2 .marker-none}

↓ Source Code

- Share
- Quick
- Reference
- And
- Cheat Sheet

{.cols-2 .marker-none}

.marker-round

Share
Quick
Reference

{.marker-round}

↓ Source Code

- Share
- Quick
- Reference

{.marker-round}

#Code Variants

Basic code

cheatsheets.zip.is(() => {
  awesome.site();
});

here.is.some.more();

↓ Source Code

````js
cheatsheets.zip.is(() => {
  awesome.site()
})
\```

```js
here.is.some.more()
\```
````

Code blocks can be placed one after the other.

Code with headings

index.js

cheatsheets.zip.is(() => {
  awesome.site();
});

other.js

here.is.some.more();

↓ Source Code

#### index.js

```js
cheatsheets.zip.is(() => {
  awesome.site();
});
```

#### other.js

```js
here.is.some.more();
```

Code blocks can have headings.

Line wrapping

<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>

↓ Source Code

```js {.wrap}
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>
```

Add {.wrap} to wrap long lines.

Long lines (default)

function createNode(nodeName: string, options: { key: string }) {
  return true
}

Long lines will have scrollbars.

#Paragraph Variants

Header paragraphs

The text that appears in the header

↓ Source Code

### Basic paragraphs

The text that appears in the header

Middle paragraphs

This is a list

This paragraph will appear in the middle

cheatsheets.is(() => {
  awesome.site();
});

↓ Source Code

### Middle paragraphs

- This is a list

This paragraph will appear in the middle

```js
cheatsheets.is(() => {
  awesome.site();
});
```

Footer paragraphs

cheatsheets.is(() => {
  awesome.site();
});

↓ Source Code

```js
cheatsheets.is(() => {
  awesome.site();
});
```

This paragraph will appear in the footer

This paragraph will appear in the footer

Crosslink

Add {.link-arrow} to make big loud external links:

[Home](/) {.link-arrow}

Home {.link-arrow}

#Cards Example

row-span-2

col-span-2

Primary Card

Add {.primary} to make the title red.

Secondary Card

Add {.secondary} to make the title yellow.

col-span-3