Add {.secondary} to make the title yellow.

Primary Card

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}

Syntax Variants

Section Variants
Card Variants
Table Variants
List Variants
Code Variants
Paragraph Variants
Cards Example All the magic variants supported by QuickRef.ME

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

Clone Repository View on Github

$ 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 It's a good practice to refer to the source code of the QuickRef cheatsheet.

CheatSheets Cheat Sheet

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#index.js

#other.js

#â Source Code

other.js

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#The first card spans two rows

#The second card spans two rows

#The third card spans two rows

#The fifth card spans two columns

#The second card spans two columns

#The fourth card spans two columns

#Specifies the number of columns the card spans

#Specifies the number of rows the card spans

#Emphasize card (aka H3 Section)

#â Source Code

#â Source Code

#â Source Code

| {.cols-6} | six-column layout |

Table of contents

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#â Source Code

#Emphasize card (aka `H3` Section)

#â Source Code

#â Source Code

#â Source Code

| `{.cols-6}` | six-column layout |