Cheatsheet styles cheatsheet
source link: https://devhints.io/cheatsheet-styles
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
#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
-box-chars
Less line heightfor box drawing chars
-setup
Gray background
-wrap
Enables line-wrapping
See: Code
Paragraphs
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
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
- Three
- Seven
- Eight
- Eleven
Add {: .-six-column}
to make large lists.
Four columns
- Three
- Seven
- Eight
- Eleven
Add {: .-four-column}
to make large lists.
Also see
- Three
- Seven
- Eight
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
#Tables
Basic table
%m/%d/%Y
06/05/2013
%A, %B %e, %Y
Sunday, June 5, 2013
%b %e %a
Jun 5 Sun
%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
//
//hr[@class='edge']
Anywhere
./
./a
Relative
/
/html/body/div
Root
Add {: .-headers}
to add headers.
#Two columns
···
···
#Left reference
···
···
···
···
···
···
···
···
···
Three
···
#One column
···
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK