This page is a work in progress. You can help by suggesting edits!

This is a reference of styles that you can use on Devhints cheatsheets. How meta! You can refer to this when contributing your own cheatsheets to the GitHub repo.

## Intro

## Variants

### H2 sections

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

`-prime` | Highlight

See: H3 sections

### Tables

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

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

See: Code

### Paragraphs

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

See: Paragraphs

### Lists

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

See: Lists

### Adding variants

    ## Section
    {: .-two-column}

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

## H3 sections

### Supported

Each section can have the following children:

#### White

- `pre`
- `ul`
- `table`

#### Gray

- `p`
- `h4`

### Prime section

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

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

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

### Highlighted lines

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

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

### Multiple highlights

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

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

### Setup blocks

    import React from 'react'

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

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

### Long lines

    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>

Add `-wrap` to wrap long lines.

## Lists

- This is
- a list
- with a few items

Here’s an extra paragraph after the list.

### Lists with headings

#### Part 1

- `createElement()`
- `componentDidMount()`
- `componentWillUnmount()`

#### Part 2

- `shouldComponentUpdate()`
- `componentWillReceiveProps()`

Here’s an extra paragraph after the list.

## List columns

### Six columns

- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven

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

### Four columns

- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven

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

### Also see

- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten

Add `{: .-also-see}`.

## Paragraphs

### Basic paragraphs

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

    ···

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

### Preludes

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

    ···

### Crosslink

Add `{: .-crosslink}` 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`

This is a basic table with h4’s.

### Shortcuts

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

Add `{: .-shortcuts}` to tables.

### With headers

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

Add `{: .-headers}` to add headers.

## Two columns

### One

    ···

### Two

    ···

## Left reference

### One

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

### Two

    ···

### Three

    ···

## One column

### One

    ···

0 Comments for this cheatsheet. Write yours!