Cheatsheet styles cheatsheet

Variant	Description
-one-column
-two-column	(default)
-three-column
-left-reference	3 columns (short first column)

See: H2 sections

Variant	Description
-prime	Highlight

See: H3 sections

Variant	Description
-bold-first	Bold first column
-headers	Show headers
-left-align	Don't right align last column
-mute-em	Lower opacity for italics
-no-wrap	Don't wrap text
-shortcuts	Shortcut keys

See: Tables

Variant	Description
-box-chars	Less line height for box drawing chars
-setup	Gray background
-wrap	Enables line-wrapping

See: Code

Variant	Description
-setup	Gray background
-crosslink	Has arrow on the link

See: Paragraphs

Variant	Description
-also-see	Lighter background
-four-column
-six-column

See: Lists

Each section can have the following children:

White

• pre
• ul
• table

Gray

• p
• h4

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.

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

here.is.some.more()

Code blocks can be placed one after the other.

See: Cheatsheets

index.js

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

other.js

here.is.some.more()

Code blocks can have headings.

app.start(() => {
  const port = app.server.port
  console.log(`Started at ${port}`)
})

Add {: data-line="3"} to add line highlights.

app.start(() => {
  const port = app.server.port
  console.log(`Started at ${port}`)
})

Add {: data-line="2,3"} to add multiple line highlights.

import React from 'react'

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

Add {: .-setup} to a pre or table or ul.

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

Long lines will have scrollbars.

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

• This is
• a list
• with a few items

Here's an extra paragraph after the list.

Part 1

• createElement()
• componentDidMount()
• componentWillUnmount()

Part 2

• shouldComponentUpdate()
• componentWillReceiveProps()

Here's an extra paragraph after the list.

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.

···

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

Here's a prelude paragraph. Add {: .-setup} to make paragraphs appear with a gray background.

···

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

···

Home

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

This is a basic table with h4's.

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

Add {: .-shortcuts} to tables.

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

Add {: .-headers} to add headers.