Cheatsheet styles cheatsheet

Intro

Variants

H2 sections

See: H2 sections

H3 sections

See: H3 sections

Tables

See: Tables

Code

See: Code

Paragraphs

See: Paragraphs

Lists

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

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

Time

This is a basic table with h4’s.

Shortcuts

Add {: .-shortcuts} to tables.

With headers

Add {: .-headers} to add headers.

Two columns

One

···

Two

···

Left reference

One

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

Two

···

Three

···

One column

One

···