Skip to content

Commit 99fc6c1

Browse files
paulo-valimpaulo-valim
authored
Cheatsheets markup (#1618)
1 parent 636b568 commit 99fc6c1

File tree

8 files changed

+649
-85
lines changed

8 files changed

+649
-85
lines changed

‎Cheatsheet.cheatmd

Lines changed: 306 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,313 @@
1-
# Cheatsheets
1+
# Cheatsheet User Guide
22

3-
This is an example of several cheatsheets features.
3+
## I'm a H2 title with 2 columns
4+
{: .col-2}
45

5-
## Blocks
6+
### To configure columns use the H2 title
67

7-
One.
8+
| `full page` |_*default_|
9+
| `.width-50` | "half page" |
10+
| `.col-2` | "two-column"|
11+
| `.col-3` | "three-column"|
12+
| `-col-2-left` | "two-columns" (1/3 - 2/3) |
13+
| `.table-col` | "tables will take only 50% of the page"|
814

9-
### Nested
15+
Set the number of columns under the H2 titles.
1016

11-
Two.
17+
### I'm a H3 title
1218

13-
## More
19+
Use H3 to start a new topic.
1420

15-
Three.
21+
#### I'm a H4 title.
22+
23+
### Tables
24+
25+
| `.full-page` | "full page" _*default_|
26+
| `.col-2` | "two-column"|
27+
| `.col-3` | "three-column"|
28+
| `-col-2-left` | "two-columns" (1/3 - 2/3) |
29+
| `.col-4` | "four-columns for lists"|
30+
| `.col-6` | "six-columns for lists"|
31+
| `.wrap` | "wrap a content"|
32+
| `.table-col` | "tables will take only 50% of the page"|
33+
34+
### Code and 3 columns
35+
36+
```elixir
37+
# hello.exs
38+
defmodule Greeter do
39+
def greet(name) do
40+
message = "Hello, " <> name <> "!"
41+
IO.puts message
42+
end
43+
end
44+
45+
Greeter.greet("world")
46+
```
47+
48+
### Paragraphs
49+
50+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante consectetur, pharetra magna a, malesuada lectus. Mauris porttitor ligula dui, at egestas augue hendrerit eget. Morbi lorem urna, scelerisque ut sem et, sollicitudin porta nulla.
51+
52+
### Lists
53+
54+
- Element 1
55+
- Element 2
56+
- `piece of code`
57+
58+
### Adding variants
59+
60+
```
61+
## Section
62+
{: .col-2}
63+
64+
"highlight the content in a paragraph"
65+
{: .prime}
66+
67+
"wrap a very long text"
68+
{: .wrap}
69+
```
70+
71+
Ex_docs uses Kramdown, and supports adding classes via Kramdown's syntax.
72+
73+
Full page and H3 titles
74+
-----------
75+
{: .full-page}
76+
77+
### H3 tittles sections
78+
79+
Each section can have the following children:
80+
81+
#### H4 title
82+
83+
- `h4`
84+
- `lists`
85+
- `tables`
86+
87+
A paragraph with a cool text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante consectetur, pharetra magna a, malesuada lectus. Mauris porttitor ligula dui, at egestas augue hendrerit eget.
88+
89+
- `p`
90+
91+
```elixir
92+
Enum.map(users, fn user ->
93+
IO.puts "Hello " <> user
94+
end)
95+
```
96+
- `code`
97+
98+
A highlight section!
99+
This is a section with `{: .prime}`. Notice the fancy highlight! Great for "getting started" kind of snippets.
100+
{: .prime}
101+
102+
### H3 title
103+
104+
Every box is an H3 title. The box will encompass everything inside the body of the H3.
105+
106+
This is a basic section with paragraphs in it.
107+
108+
Code
109+
----
110+
{: .col-3}
111+
112+
### Code with headings
113+
114+
#### index.ex
115+
116+
```
117+
Path.join(["~", "foo"])
118+
"~/foo"
119+
```
120+
121+
#### other.ex
122+
123+
```
124+
Path.join(["foo"])
125+
"foo"
126+
```
127+
128+
Code blocks can have headings.
129+
130+
### Long lines
131+
132+
```
133+
defmodule MyTracer do
134+
def trace({:remote_function, _meta, module, name, arity}, env) do
135+
IO.puts "#{env.file}:#{env.line} #{inspect(module)}.#{name}/#{arity}"
136+
:ok
137+
end
138+
139+
def trace(_event, _env) do
140+
:ok
141+
end
142+
end
143+
```
144+
145+
Long lines will have scrollbars on hover.
146+
147+
### Line wrapping
148+
149+
```
150+
defmodule MyTracer do
151+
def trace({:remote_function, _meta, module, name, arity}, env) do
152+
IO.puts "#{env.file}:#{env.line} #{inspect(module)}.#{name}/#{arity}"
153+
:ok
154+
end
155+
156+
def trace(_event, _env) do
157+
:ok
158+
end
159+
end
160+
```
161+
{: .wrap}
162+
163+
Add `wrap` to wrap long lines.
164+
165+
## Lists
166+
{: .col-2}
167+
168+
### Lists
169+
170+
- This is
171+
- a list
172+
- with a few items
173+
174+
Here's an extra paragraph after the list.
175+
176+
### Lists with headings
177+
178+
#### Part 1
179+
180+
- `createElement()`
181+
- `componentDidMount()`
182+
- `componentWillUnmount()`
183+
184+
#### Part 2
185+
186+
- `shouldComponentUpdate()`
187+
- `componentWillReceiveProps()`
188+
189+
190+
Here's an extra paragraph after the list.
191+
192+
## List columns
193+
194+
### Six columns
195+
{: .col-6}
196+
197+
- One
198+
- Two
199+
- Three
200+
- Four
201+
- Five
202+
- Six
203+
- Seven
204+
- Eight
205+
- Nine
206+
- Ten
207+
- Eleven
208+
209+
Add `{: .col-6}` after the H3 title to make large lists.
210+
211+
### Four columns
212+
{: .col-4}
213+
214+
- One
215+
- Two
216+
- Three
217+
- Four
218+
- Five
219+
- Six
220+
- Seven
221+
- Eight
222+
- Nine
223+
- Ten
224+
- Eleven
225+
226+
Add `{: .col-4}` after the H3 title to make large lists.
227+
228+
## Full page table
229+
230+
### Basic table
231+
232+
#### Date
233+
234+
| Example | Output |
235+
| --- | --- |
236+
| `%m/%d/%Y` | `06/05/2013` |
237+
| `%A, %B %e, %Y` | `Sunday, June 5, 2013` |
238+
| `%b %e %a` | `Jun 5 Sun` |
239+
240+
#### Time
241+
242+
| Example | Output |
243+
| --- | --- |
244+
| `%H:%M` | `23:05` |
245+
| `%I:%M %p` | `11:05 PM` |
246+
247+
This is a basic table with h4's.
248+
249+
## Page width 50%
250+
{: .width-50}
251+
252+
### I make tables look nicer
253+
254+
#### Date
255+
256+
| Example | Output |
257+
| --- | --- |
258+
| `%m/%d/%Y` | `06/05/2013` |
259+
| `%A, %B %e, %Y` | `Sunday, June 5, 2013` |
260+
| `%b %e %a` | `Jun 5 Sun` |
261+
262+
#### Time
263+
264+
| Example | Output |
265+
| --- | --- |
266+
| `%H:%M` | `23:05` |
267+
| `%I:%M %p` | `11:05 PM` |
268+
269+
Use `.width-50` for a half page content.
270+
271+
## Left reference
272+
{: .col-2-left}
273+
274+
### One
275+
276+
```elixir
277+
# hello.exs
278+
defmodule Greeter do
279+
def greet(name) do
280+
message = "Hello, " <> name <> "!"
281+
IO.puts message
282+
end
283+
end
284+
285+
Greeter.greet("world")
286+
```
287+
288+
### Two
289+
290+
```elixir
291+
user = %{
292+
name: "John",
293+
city: "Melbourne"
294+
}
295+
```
296+
297+
```elixir
298+
IO.puts "Hello, " <> user.name
299+
```
300+
301+
### Three
302+
303+
```
304+
defmodule MyModule do
305+
def hello_world do
306+
IO.puts("Hello, World!")
307+
end
308+
end
309+
```
310+
311+
### Four
312+
313+
I'm a grid, with 1/3 - 2/3 table width.

‎assets/css/_html.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
@import 'content/functions.css';
2222
@import 'content/footer.css';
2323
@import 'content/bottom-actions.css';
24+
@import 'content/cheatsheet.css';
2425
@import 'search.css';
2526
@import 'modal.css';
2627
@import 'keyboard-shortcuts.css';
@@ -34,6 +35,7 @@
3435
@import 'print.css';
3536
@import 'makeup.css';
3637

38+
3739
body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"],
3840
body.dark .content-inner img[src*="#gh-light-mode-only"] {
3941
display: none;

0 commit comments

Comments
 (0)