2 title: Cheatsheet styles
7 This is a reference of styles that you can use on Devhints cheatsheets. How
9 You can refer to this when contributing your own cheatsheets to the [GitHub repo](https://github.com/rstacruz/cheatsheets/).
22 | `-two-column` | _(default)_|
24 | `-left-reference` | 3 columns<br>_(short first column)_ |
25 | `-no-hide` | Don't hide H2 |
27 See: [H2 sections](#two-columns)
31 | `-prime` | Highlight |
33 See: [H3 sections](#h3-sections-1)
37 | `-bold-first` | Bold first column |
38 | `-headers` | Show headers |
39 | `-left-align` | Don't right align last column |
40 | `-mute-em` | Lower opacity for italics |
41 | `-no-wrap` | Don't wrap text |
42 | `-shortcuts` | Shortcut keys |
44 See: [Tables](#tables-1)
48 | `-box-chars` | Less line height<br>_for box drawing chars_ |
49 | `-setup` | Gray background |
50 | `-wrap` | Enables line-wrapping |
56 | `-setup` | Gray background |
57 | `-crosslink` | Has arrow on the link |
60 See: [Paragraphs](#paragraphs-1)
64 | `-also-see` | Lighter background |
68 See: [Lists](#lists-1)
78 Devhints uses Kramdown, and supports adding classes via Kramdown's syntax.
86 Each section can have the following children:
102 This is a section with `{: .-prime}`. Notice the fancy highlight! Great for "getting started" kind of snippets.
106 Every box is an H3 section. The box will encompass everything inside the body of the H3.
108 This is a basic section with paragraphs in it.
126 Code blocks can be placed one after the other.
128 See: [Cheatsheets](/)
130 ### Code with headings
148 Code blocks can have headings.
150 ### Highlighted lines
154 const port = app.server.port
155 console.log(`Started at ${port}`)
160 Add `{: data-line="3"}` to add line highlights.
162 ### Multiple highlights
166 const port = app.server.port
167 console.log(`Started at ${port}`)
172 Add `{: data-line="2,3"}` to add multiple line highlights.
177 import React from 'react'
182 class Hello extends React.Component {
184 return <span>Hello</span>
189 Add `{: .-setup}` to a `pre` or `table` or `ul`.
194 function createNode(nodeName: string, options: { key: string }) {
199 Long lines will have scrollbars.
204 <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>
208 Add `-wrap` to wrap long lines.
219 Here's an extra paragraph after the list.
221 ### Lists with headings
226 - `componentDidMount()`
227 - `componentWillUnmount()`
231 - `shouldComponentUpdate()`
232 - `componentWillReceiveProps()`
235 Here's an extra paragraph after the list.
255 Add `{: .-six-column}` to make large lists.
272 Add `{: .-four-column}` to make large lists.
288 Add `{: .-also-see}`.
295 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.
303 When paragraphs appear after `pre`/`table`/`ul`, they appear with a gray background.
307 Here's a prelude paragraph. Add `{: .-setup}` to make paragraphs appear with a gray background.
316 Add `{: .-crosslink}` to make big loud external links:
334 | `%m/%d/%Y` | `06/05/2013` |
335 | `%A, %B %e, %Y` | `Sunday, June 5, 2013` |
336 | `%b %e %a` | `Jun 5 Sun` |
342 | `%H:%M` | `23:05` |
343 | `%I:%M %p` | `11:05 PM` |
345 This is a basic table with h4's.
358 Add `{: .-shortcuts}` to tables.
362 | Prefix | Example | What |
364 | `//` | `//hr[@class='edge']` | Anywhere |
365 | `./` | `./a` | Relative |
366 | `/` | `/html/body/div` | Root |
369 Add `{: .-headers}` to add headers.