-
Notifications
You must be signed in to change notification settings - Fork 0
/
tufte-features.md
371 lines (273 loc) · 11.1 KB
/
tufte-features.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
---
author: Totally famous person
date: '2023-04-16T16:03:45+0100'
title: The big old test page
subtitle: Fancy Subtitle
meta: true
math: true
toc: true
# hideDate: true
# hideReadTime: true
categories: [katex, latex, tufte-css]
description: "If the description field is not empty, its contents will show in the home page instead of the first 140 characters of the post."
---
## New features
### Emoji
Powered by [Noto Emoji font](https://emojipedia.org/noto-emoji/).
We really like cats. Yes, they are fluffy and happy. 🐈🐱
🪷🫶🤍😊💀🔥
### Button
{{< button
style="primary"
icon="✅"
href="javascript:javascript:(function(){function checkFrames(w) {try {var inputs = w.document.getElementsByTagName('input');for (var i=0; i < inputs.length; i++) {if (inputs[i].type && inputs[i].type == 'checkbox'){inputs[i].checked = true;}}} catch (e){}if(w.frames && w.frames.length>0){for(var i=0;i<w .frames.length;i++){var fr=w.frames[i];checkFrames(fr);}}}checkFrames(window);})()"
>}}
Open all notes
{{< /button >}}
{{< button
style="primary"
icon="❎"
href="javascript:javascript:(function(){function checkFrames(w) {try {var inputs = w.document.getElementsByTagName('input');for (var i=0; i < inputs.length; i++) {if (inputs[i].type && inputs[i].type == 'checkbox'){inputs[i].checked = false;}}} catch (e){}if(w.frames && w.frames.length>0){for(var i=0;i<w .frames.length;i++){var fr=w.frames[i];checkFrames(fr);}}}checkFrames(window);})()"
>}}
Close all notes
{{< /button >}}
{{< button
style="primary"
icon="🔄"
href="javascript:javascript:(function(){function checkFrames(w) {try {var inputs = w.document.getElementsByTagName('input');for (var i=0; i < inputs.length; i++) {if (inputs[i].type && inputs[i].type == 'checkbox'){inputs[i].checked = !inputs[i].checked;}}} catch (e){}if(w.frames && w.frames.length>0){for(var i=0;i<w .frames.length;i++){var fr=w.frames[i];checkFrames(fr);}}}checkFrames(window);})()"
>}}
Toggle all notes
{{< /button >}}
```html
{{</* button
style="primary"
icon="🔄"
href="javascript:javascript:(function(){function checkFrames(w) {try {var inputs = w.document.getElementsByTagName('input');for (var i=0; i < inputs.length; i++) {if (inputs[i].type && inputs[i].type == 'checkbox'){inputs[i].checked = !inputs[i].checked;}}} catch (e){}if(w.frames && w.frames.length>0){for(var i=0;i<w .frames.length;i++){var fr=w.frames[i];checkFrames(fr);}}}checkFrames(window);})()"
*/>}}
Toggle all notes
{{</* /button */>}}
```
### Cols (with `lang` option)
Certain things do not work with this shortcode layout, for example, Markdown's default footnote (like `[^1]`).
{{< cols "zh-Hans,en,ja" >}}
我是一个懒人。 {{< marginnote >}}这是一个边注。在屏幕很小的时候,它有一个可以点击展开的按钮。{{< /marginnote >}}{{< marginnote ind="🐱" >}}您可以在 `config.yaml` 中修改全站按钮默认设置,也可以使用 `ind` 选项为每一个边注单独设置按钮。{{< /marginnote>}}{{< marginnote ind="⚠" >}}在这个版本中,我提升了可访问性,但不包括[用不了 `:has` 的火狐](https://caniuse.com/css-has)。{{< /marginnote>}}
||
But sometimes you just have to get your hands dirty.
This is the joy and the curse of a programmer. {{< sidenote >}}Sidenote numbers are consistent across the whole page. Good numbers.{{< /sidenote >}}
||
さらに、なんと!日本語もいけます。{{< sidenote >}}読めないのか?私は大丈夫だが。{{< /sidenote >}}
{{< /cols >}}
```html
{{</* cols "zh-Hans,en,ja" */>}}
我是一个懒人。{{</* marginnote */>}}这是一个边注。{{</* /marginnote */>}}
||
But sometimes you just have to get your hands dirty.{{</* sidenote */>}}Good numbers.{{</* /sidenote */>}}
||
読めないのか?私は大丈夫だが。
{{</* /cols */>}}
```
### YouTube-nocookie
Never again click things in the video accidentally and it opens YouTube. Oh no.
{{< youtube id="YslQ2625TR4" title="iPhone Resolution by Edward Tufte" >}}
```html
{{</* youtube id="YslQ2625TR4" title="iPhone Resolution by Edward Tufte" */>}}
````
## Tufte features
### Marginnote and sidenote
This is what you came here for. {{< marginnote >}}This is a marginnote. It has no indicators on big screens.{{< /marginnote >}} Be honest. {{< sidenote >}}This is a sidenote! It has a little number.{{< /sidenote >}}
### Epigraph
{{< epigraph author="Shawn O'Hare" cite="Math is Fun" detail="p.8" >}}
This is an example of an epigraph with some math
$ \mathbb N \subseteq \mathbb R $
to start the beginning of a section.
{{< /epigraph >}}
```html
{{</* epigraph author="Shawn O'Hare" cite="Math is Fun" detail="p.8" */>}}
This is an example of an epigraph with some math
$ \mathbb N \subseteq \mathbb R $
to start the beginning of a section.
{{</* /epigraph */>}}
```
### Blockquote
Some blockquotes. But first, we try to manually cite via
<cite>This is between cite tags and has math: $e^x $</cite> {{< sidenote >}}Only use $\KaTeX{}$, you must.{{< /sidenote >}}
{{< blockquote author="Shawn O'Hare" cite="www.shawnohare.com" >}}
This is a blockquote with two paragraphs, that employs the
theme's `blockquote` shortcode. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
{{< /blockquote >}}
```html
{{</* blockquote author="Shawn O'Hare" cite="www.shawnohare.com" */>}}
This is a blockquote with two paragraphs, that employs the
theme's `blockquote` shortcode. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
...
{{</* /blockquote */>}}
```
### Small-caps
{{< newthought >}}Sometimes a new thought{{< /newthought >}} distinguishes a section, as here.
```html
{{</* newthought */>}}Sometimes a new thought{{</* /newthought */>}}
```
### Figure
**Regular width figure:**
{{< figure
src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/exports-imports.png"
title="The image title"
label="mn-export-import"
caption="This is the image caption."
attr="[Image attribution](#)"
link="link"
>}}
```html
{{</* figure
src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/exports-imports.png"
title="The image title"
label="mn-export-import"
caption="This is the image caption."
attr="[Image attribution](#)"
link="link"
*/>}}
```
**Margin figure:**
Margin figures appear on the margin. Highly logical.
{{< figure
src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/rhino.png"
type="margin"
label="mn-rhino"
title="The image title"
caption="This is the image caption."
attr="[Image attribution](https://edwardtufte.github.io/tufte-css)"
alt="alt"
link="#"
>}}
Very importantly, they want some text to go with them, either before or after, with only one line break.
No worries if you forgot to give your figure a `label`. Marginnote (either for figure or with figure inside) will be created if any one of the following conditions is met:
1. Has `type="margin`; or
2. Has `caption`; or
3. Has `attr`.
```html {hl_lines=[3]}
{{</* figure
src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/rhino.png"
type="margin"
title="The image title"
caption="This is the image caption."
attr="[Image attribution](https://edwardtufte.github.io/tufte-css)"
alt="alt"
link="#"
*/>}}
```
**Full-width figure:**
{{< figure
src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/napoleons-march.png"
type="full"
label="mn-napoleonic-wars"
title="Napoleonic wars"
caption="This the image caption."
attr="[Image attribution](#)"
alt="Napoleonic wars"
link="#"
>}}
```html {hl_lines=[3]}
{{</* figure
src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/napoleons-march.png"
type="full"
label="mn-napoleonic-wars"
title="Napoleonic wars"
caption="This the image caption."
attr="[Image attribution](#)"
alt="Napoleonic wars"
link="#"
*/>}}
```
## Normal Markdown tests
Begin [test file](https://gist.github.com/loikein/27ef6913386b206d1b3c18b8e93c5768)…
### Formatting
**Bold**, __bold__, **加粗**
*Italic*, _italic_, *斜体*
<u>Underline</u>, <underline>underline</underline>
<del>Strike</del>, <s>strike</s>, ~~strike~~, ~strike~, --strike--
<mark>Highlight</mark>, =highlight=, ==highlight==
<!-- Comments-->
Footnote[^1], footnote[^2]
[^1]: The linked footnote appears at the end of the document.
[^2]: New lines
---
### Lists
- `ul`
- Unordered list
1. `ol`
1. Ordered list
`dl`
: `dt`
: Description list
- [x] Task list
- [ ] Task list
### Code
Inline `code`, `` `escape` ``, and <kbd>keystroke</kbd>
```go {linenos=table,hl_lines=["2-5"],linenostart=199}
package main
import "log"
func add(x int, y int) int {
log.Println("We are going to take the sum of two numbers, and leave a long comment.")
return x + y
}
func main() {
y := add(1, 2)
log.Println(y)
}
```
Here's an example without line numbers.
```go {hl_lines=["2-5"],linenostart=199}
package main
import "log"
func add(x int, y int) int {
log.Println("We are going to take the sum of two numbers, and leave a very very very long comment.")
return x + y
}
func main() {
y := add(1, 2)
log.Println(y)
}
```
### Font
> 我能体に傷つけないで吞下 259 ml glass。
> Four score and seven years ago our fathers brought forth upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ \(\) {} \[\] . , : ; “ ‘ ’ \`
```
0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ () {} [] . , : ; “ ‘ ’ `
```
### Inline HTML
ref: https://burk.io/2020/let-there-be-dark
<div title="#282a36" style="height: 50px; width: 100px; background-color: #282a36; display: inline-block; border-style: solid; border-color: black; color:white; padding:10px;">#282a36</div>
<div title="#f8f8f2" style="height: 50px; width: 100px; background-color: #f8f8f2; margin-right: 5px; display: inline-block; border-style: solid; border-color: black; color:black; padding:10px;">#f8f8f2</div>
### LaTeX & Table
$\LaTeX{}$
$$R_1 \begin{cases} >\mu_{2} \\ \leq \mu_{2} \end{cases}$$
| Message to agent 1 | $M_1$ |
| ------------------ | -------------- |
| Agent 1's action | $a_1$ |
| New finding | $R_1 \begin{cases} >\mu_{2} \\ \leq \mu_{2} \end{cases}$ |
Following is the math test which was [mentioned in the forum](https://discourse.gohugo.io/t/katex-in-hugo/43274/12)
$$
\begin{array} {lcl}
L(p,w_i) &=& \dfrac{1}{N}\Sigma_{i=1}^N(\underbrace{f_r(x_2
\rightarrow x_1
\rightarrow x_0)G(x_1
\longleftrightarrow x_2)f_r(x_3
\rightarrow x_2
\rightarrow x_1)}_{sample\, radiance\, evaluation\, in\, stage2}
\\\\\\ &=&
\prod_{i=3}^{k-1}(\underbrace{\dfrac{f_r(x_{i+1}
\rightarrow x_i
\rightarrow x_{i-1})G(x_i
\longleftrightarrow x_{i-1})}{p_a(x_{i-1})}}_{stored\,in\,vertex\, during\,light\, path\, tracing\, in\, stage1})\dfrac{G(x_k
\longleftrightarrow x_{k-1})L_e(x_k
\rightarrow x_{k-1})}{p_a(x_{k-1})p_a(x_k)})
\end{array}
$$