QuickRef.ME

QuickRef

This is a reference of styles that you can use on quickref cheatsheets!

#Variants

#H2 section

- -
cols-1 one column (default)
cols-2
cols-3 three column
...
cols-11
cols-12

See: H2 section

#H3 section

- -
primary Primary section
secondary Secondary section

#Span n columns.

- -
col-span-1
...
col-span-12

#Span n rows.

- -
row-span-1
...
row-span-12

See: H3 section

#Tables

- -
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
shortcuts Shortcut keys

See: Tables

#Lists

- -
style-none No marker is shown

#Layout

- -
cols-1 one column (default)
cols-2
cols-3 three column
...
cols-11
cols-12

#Code

- -
wrap Enables line-wrapping

See: Code

#Paragraphs

- -
link-arrow Pretty links with arrows

See: Paragraphs

See: Lists

#Global

- -
hidden Hide an element

#How to add variants

H2 section {.cols-3}
----------

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

### primary section {.primary}

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

QuickRefs uses markdown-it-attrs, and supports adding classes via its syntax.

#Code

#Basic code

here.is(() => {
  some.code()
})

here.is.some.more()

Code blocks can be placed one after the other.

See: Cheatsheets

#Code with headings

#index.js

here.is(() => {
  some.code()
})

#other.js

here.is.some.more()

Code blocks can have headings.

#Setup blocks

import React from 'react'

class Hello extends React.Component {
  render () {
    return <span>Hello</span>
  }
}

Add {.bg-gray} to a pre or table or ul__.

#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>

Add {.wrap} to wrap long lines.

#Long lines

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

Long lines will have scrollbars.

#Paragraphs

#Basic paragraphs

The text that appears in the header

This is a basic section with paragraphs in it. When paragraphs are the first elements in an H3 section's body, they appear as white.

#Description

...

A gray background

···

When paragraphs appear after pre/table/ul, they appear with a gray background.

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

···

Home

#Tables

#Basic table

#Date

Example Output
%m/%d/%Y 06/05/2013
%A, %B %e, %Y Sunday, June 5, 2013
%b %e %a Jun 5 Sun

#Time

Example Output
%H:%M 23:05
%I:%M %p 11:05 PM

A basic table with heading level 4.

#Shortcuts

- -
V Vector
P Pencil
T Text
L Line
R Rectangle
O Oval
U Rounded

Add {.shortcuts} to tables.

#Show headers

Prefix Example What
// //hr[@class='edge'] Anywhere
./ ./a Relative
/ /html/body/div Root

Add {.show-header} to add headers.

#Rowspan

Stage Direct Products ATP Yields
Glycolysis 2 ATP
2 NADH 3--5 ATP
Pyruvaye oxidation 2 NADH 5 ATP
Citric acid cycle 2 ATP
6 NADH 15 ATP
2 FADH2 3 ATP
30--32 ATP

#Source Code

| Stage              | Direct Products | ATP Yields |
|--------------------|-----------------|------------|
| Glycolysis         | 2 ATP                       ||
| ^^                 | 2 NADH          | 3--5 ATP   |
| Pyruvaye oxidation | 2 NADH          | 5 ATP      |
| Citric acid cycle  | 2 ATP                       ||
| ^^                 | 6 NADH          | 15 ATP     |
| ^^                 | 2 FADH2         | 3 ATP      |
| **30--32** ATP                                  |||
{.show-header}

QuickRef uses markdown-it-multimd-table to render the table, See：markdown-it-multimd-table

#Lists

#One column (Default)

  • Item 1
  • Item 2
  • Item 3

#Five column

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9

#No marker is shown

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

#H2 section

#One

···

#Two

···

#Three

···

#Four

···

#Five

···

#H3 section

#row-span-2 

···

#col-span-2 

···

#Primary section

···
···

Add {.primary} to make the title red.

#Secondary section

···

Add {.secondary} to make the title yellow.

#col-span-3

···

#Supported

Each section can have the following children:

#White

  • pre
  • ul
  • table

#Gray

  • p
  • h4

#H3 section

Every box is an H3 section. The box will encompass everything inside the body of the H3.

This is a basic section with paragraphs in it.