CheatSheets Cheat Sheet

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

Cards Example

Secondary Card

4

Add {.secondary} to make the title yellow.

Primary Card

3

Add {.primary} to make the title red.

Paragraph Variants

Crosslink

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

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

Home

Footer paragraphs

quickref.is(() => {
  awesome.site()
})

#↓ Source Code

```js
quickref.is(() => {
 awesome.site()
})
\```
This paragraph will appear in the footer

This paragraph will appear in the footer

Middle paragraphs

  • This is a list This paragraph will appear in the middle
quickref.is(() => {
  awesome.site()
})

#↓ Source Code

### Middle paragraphs
- This is a list
This paragraph will appear in the middle

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

Header paragraphs

The text that appears in the header

#↓ Source Code

### Basic paragraphs
The text that appears in the header

Code Variants

Long lines (default)

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

Long lines will have scrollbars.

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.

Code with headings

#index.js

quickref.me.is(() => {
    awesome.site()
})

#other.js

here.is.some.more()

#↓ Source Code

#### index.js

js quickref.me.is(() => { awesome.site() }) ```

other.js

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

Code blocks can have headings.

Basic code

quickref.me.is(() => {
  awesome.site()
})
here.is.some.more()

#↓ Source Code

```js
quickref.me.is(() => {
 awesome.site()
})
\```

js here.is.some.more() ``` ``` Code blocks can be placed one after the other.

List Variants

.marker-round

  • Share
  • Quick
  • Reference

#↓ Source Code

- Share
- Quick
- Reference
{.marker-round}

.marker-none

  • Share
  • Quick
  • Reference
  • And
  • Cheat Sheet

#↓ Source Code

- Share
- Quick
- Reference
- And
- Cheat Sheet
{.cols-2 .marker-none}

.marker-timeline

  • Renamed to new_name
$ git branch -m <new\_name>
  • Push and reset
$ git push origin -u <new\_name>
  • Delete remote branch
$ git push origin --delete <old>

#↓ Source Code

- \*\*Renamed\*\* to `new\_name`

shell script $ git branch -m

- \*\*Push\*\* and reset

shell script $ git push origin -u

- \*\*Delete\*\* remote branch

shell script $ git push origin --delete

{.marker-timeline}

.cols-3

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

#↓ Source Code

- Share
- Quick
- Reference
- And
- Cheat Sheet
- For
- Developers
{.cols-3}

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.

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

Table Variants

.bold-first

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           |
{.bold-first}

.left-text

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           |
{.left-text}

.show-header

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           |
{.show-header}

.shortcuts

- -
Ctrl N New File
Ctrl S Save

#↓ Source Code

| -           | -          |
|-------------|------------|
| `Ctrl` `N`  | New File   |
| `Ctrl` `S`  | Save       |
{.shortcuts}

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           |

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

Card Variants

.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

.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

#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

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

- -
{.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

Section Variants

.cols-3 (default)

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

#↓ Source Code

Default
----------
### 1
### 2
### 3
### 4

.cols-2

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

#↓ Source Code

Two Columns Example {.cols-2}
----------
### 1
### 2
### 3

Preview

.cols-1

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

#↓ Source Code

One Column Example {.cols-1}
----------
### 1
### 2

Preview

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

Getting Started

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}

Cheatsheet Structure

.
├── Section 1
│   ├── 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

Directory Structure

.
├── source
│   ├── \_posts   # Cheatsheet source files
│   │   ├── awk.md
│   │   ├── vim.md # => quickref.me/vim
│   │   ├── php.md
│   │   ├── css.md # => quickref.me/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

Develop Setup

$ git clone https://github.com/Fechin/reference.git
  • Install Dependencies in the project directory
$ npm install
$ npm run dev
  • Create or modify source/_posts/{name}.md
  • Send us pull request and chill It's a good practice to refer to the source code of the QuickRef cheatsheet.