H2 sections

See: H2 sections

H3 sections

See: H3 sections

Tables

See: Tables

Code

See: Code

Paragraphs

See: Paragraphs

Lists

See: Lists

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.

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.

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

Basic table

Date

Time

This is a basic table with h4’s.

Shortcuts

Add {: .-shortcuts} to tables.

With headers

Add {: .-headers} to add headers.