Cheatsheet Styles Cheat Sheet

From WikiOD

Here is the cheatsheat of Cheatsheet Styles and basic guide on how to use Cheatsheet Styles

Intro[edit | edit source]

Variants[edit | edit source]

{: .-three-column}

H2 sections[edit | edit source]

-one-column | |
-two-column | (default)|
-three-column | |
-left-reference | 3 columns
(short first column) |
-no-hide | Don’t hide H2 |

See: H2 sections

H3 sections[edit | edit source]

-prime | Highlight |

See: H3 sections

Tables[edit | edit source]

-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

Code[edit | edit source]

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

See: Code

Paragraphs[edit | edit source]

-setup | Gray background |
-crosslink | Has arrow on the link |

{: .-gray}

See: Paragraphs

Lists[edit | edit source]

-also-see | Lighter background |
-four-column | |
-six-column | |

See: Lists

Adding variants[edit | edit source]

{: .-prime}

## Section
{: .-two-column}

Devhints uses Kramdown, and supports adding classes via Kramdown’s syntax.

H3 sections[edit | edit source]

{: .-three-column}

Supported[edit | edit source]

Each section can have the following children:

White[edit | edit source]

  • pre
  • ul
  • table

Gray[edit | edit source]

  • p
  • h4

Prime section[edit | edit source]

{: .-prime}

This is a section with {: .-prime}. Notice the fancy highlight! Great for “getting started” kind of snippets.

H3 section[edit | edit source]

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.

Code[edit | edit source]

{: .-three-column}

Basic code[edit | edit source]

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

Code blocks can be placed one after the other.

See: [[|Cheatsheets]]

Code with headings[edit | edit source]

index.js[edit | edit source]

{: .-file}

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

other.js[edit | edit source]

{: .-file}

here.is.some.more()

Code blocks can have headings.

Highlighted lines[edit | edit source]

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

{: data-line=“3”}

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

Multiple highlights[edit | edit source]

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

{: data-line=“2,3”}

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

Setup blocks[edit | edit source]

import React from 'react'

{: .-setup}

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

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

Long lines[edit | edit source]

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

Long lines will have scrollbars.

Line wrapping[edit | edit source]

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

{: .-wrap}

Add -wrap to wrap long lines.

Lists[edit | edit source]

{: .-three-column}

Lists[edit | edit source]

  • This is
  • a list
  • with a few items

Here’s an extra paragraph after the list.

Lists with headings[edit | edit source]

Part 1[edit | edit source]

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

Part 2[edit | edit source]

  • shouldComponentUpdate()
  • componentWillReceiveProps()

Here’s an extra paragraph after the list.

List columns[edit | edit source]

{: .-one-column}

Six columns[edit | edit source]

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten
  • Eleven {: .-six-column}

Add {: .-six-column} to make large lists.

Four columns[edit | edit source]

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten
  • Eleven {: .-four-column}

Add {: .-four-column} to make large lists.

Also see[edit | edit source]

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten {: .-also-see}

Add {: .-also-see}.

Paragraphs[edit | edit source]

{: .-three-column}

Basic paragraphs[edit | edit source]

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.

Basic paragraphs[edit | edit source]

···

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

Preludes[edit | edit source]

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

···

Crosslink[edit | edit source]

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

···

[[|Home]] {: .-crosslink}

Tables[edit | edit source]

{: .-three-column}

Basic table[edit | edit source]

Date[edit | edit source]

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

Time[edit | edit source]

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

This is a basic table with h4’s.

Shortcuts[edit | edit source]

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

{: .-shortcuts}

Add {: .-shortcuts} to tables.

With headers[edit | edit source]

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

{: .-headers}

Add {: .-headers} to add headers.

Two columns[edit | edit source]

One[edit | edit source]

···

Two[edit | edit source]

···

Left reference[edit | edit source]

{: .-left-reference}

One[edit | edit source]

···
···
···
···
···
···
···
···

Two[edit | edit source]

···

Three[edit | edit source]

···

One column[edit | edit source]

{: .-one-column}

One[edit | edit source]

···

Credit:rstacruz