update example posts

exampleSite/content/post/tufte-css.md

@@ -10,7 +10,7 @@ hideDate: true
 hideReadTime: true
 # categories: [tufte-css]
 ---
-Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.
+Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.{{< marginnote ind="⚠" >}}This demo page is a technical replicate of the original [Tufte CSS](https://edwardtufte.github.io/tufte-css/) page on Edward Tufte's GitHub site. Information may not accurately reflect features of the hugo-tufte theme.{{< /marginnote >}}
 
 Tufte CSS was created by [Dave Liepmann](http://www.daveliepmann.com) and is now an Edward Tufte project. The original idea was cribbed from [Tufte-`$\LaTeX{}$`](https://tufte-latex.github.io/tufte-latex/) and [R Markdown’s Tufte Handout format](http://rmarkdown.rstudio.com/tufte_handout_format.html). We give hearty thanks to all the people who have contributed to those projects.
 
@@ -38,7 +38,7 @@ Organize your document with an `article` element inside your `body` tag. Inside
 
 Tufte CSS uses `h1` for the document title, `p` with class `subtitle` for the document subtitle, `h2` for section headings, and `h3` for low-level headings. More specific headings are not supported. If you feel the urge to reach for a heading of level 4 or greater, consider redesigning your document:
 
-{{< blockquote cite="[‘Book design: advice and examples’ thread](http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000hB)" footer="Edward Tufte" >}}
+{{< blockquote cite="[‘Book design: advice and examples’ thread](http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000hB)" author="Edward Tufte" >}}
 \[It is\] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. It also uses the methodology of _sentences_ which then cumulate sequentially into _paragraphs_, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn’t require an elaborate hierarchy to organize.
 {{< /blockquote >}}
 
@@ -63,15 +63,15 @@ As always, these design choices are merely one approach that Tufte CSS provides
 
 ## Epigraphs
 
-{{< epigraph pre="George Orwell, " cite="Politics and the English Language" >}}
+{{< epigraph author="George Orwell" cite="Politics and the English Language" >}}
 The English language… becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.
 {{< /epigraph >}}
 
-{{< epigraph pre="Richard P. Feynman, " cite="“What Do You Care What Other People Think?" >}}
+{{< epigraph author="Richard P. Feynman" cite="“What Do You Care What Other People Think?" >}}
 For a successful technology, reality must take precedence over public relations, for Nature cannot be fooled.
 {{< /epigraph >}}
 
-{{< epigraph pre="Henri Matisse, " cite="Henri Matisse Dessins: thèmes et variations (Paris, 1943), 37" >}}
+{{< epigraph author="Henri Matisse" cite="Henri Matisse Dessins: thèmes et variations" detail=" (Paris, 1943), 37" >}}
 I do not paint things, I paint only the differences between things. of our language makes it easier for us to have foolish thoughts.
 {{< /epigraph >}}
 
@@ -99,7 +99,7 @@ You must manually assign a reference `id` to each side or margin note, replacing
 
 Immediately adjacent to that sidenote reference in the main text goes the sidenote content itself, in a `span` with class `sidenote`. This tag is also inserted directly in the middle of the body text, but is either pushed into the margin or hidden by default. Make sure to position your sidenotes correctly by keeping the sidenote-number label close to the sidenote itself.
 
-If you want a sidenote without footnote-style numberings, then you want a margin note.{{< marginnote ind="⊕" >}}This is a margin note. Notice there isn’t a number preceding the note.{{< /marginnote >}} On large screens, a margin note is just a sidenote that omits the reference number. This lessens the distracting effect taking away from the flow of the main text, but can increase the cognitive load of matching a margin note to its referent text. However, on small screens, a margin note is like a sidenote except its viewability-toggle is a symbol rather than a reference number. This document currently uses the symbol ⊕ (`&#8853;`), but it’s up to you. 
+If you want a sidenote without footnote-style numberings, then you want a margin note.{{< marginnote ind="⊕" >}}This is a margin note. Notice there isn’t a number preceding the note.{{< /marginnote >}} On large screens, a margin note is just a sidenote that omits the reference number. This lessens the distracting effect taking away from the flow of the main text, but can increase the cognitive load of matching a margin note to its referent text. However, on small screens, a margin note is like a sidenote except its view&shy;ability-toggle is a symbol rather than a reference number. This document currently uses the symbol ⊕ (`&#8853;`), but it’s up to you. 
 
 Margin notes are created just like sidenotes, but with the `marginnote` class for the content and the `margin-toggle` class for the label and dummy checkbox. For instance, here is the code for the margin note used in the previous paragraph:
 
@@ -122,7 +122,7 @@ Figures should try to use the `figure` element, which by default are constrained
 
 {{< figure
   src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/exports-imports.png"
-  caption="From Edward Tufte, _Visual Display of Quantitative Information_, page 92."
+  caption="From Edward Tufte, <cite>Visual Display of Quantitative Information</cite>, page 92."
   label="mn-export-import"
   alt="Exports and Imports to and from Denmark & Norway from 1700 to 1780"
 >}}
@@ -131,8 +131,8 @@ Figures should try to use the `figure` element, which by default are constrained
   src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/rhino.png"
   type="margin"
   label="mn-rhino"
-  caption="F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature,” _Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice_ (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte’s _Visual Explanations_."
+  caption=`F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature,” _Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice_ (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte’s _Visual Explanations_.`
-  alt="alt"
+  alt="Image of a Rhinoceros"
 >}}
 But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a `p` tag, as seen to the right of this paragraph.
 
@@ -142,12 +142,7 @@ If you need a full-width figure, give it the `fullwidth` class. Make sure that
   src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/napoleons-march.png"
   type="full"
   label="mn-napoleonic-wars"
-  title="Napoleonic wars."
+  alt="Figurative map of the successive losses of the French Army in the Russian campaign, 1812-1813"
-  caption="This the image caption."
-  attr="Image attribution"
-  attrlink="attribute link"
-  alt="Napoleonic wars"
-  link="link"
 >}}
 
 One obstacle to creating elegant figures on the web is the difficulty of handling different screen sizes, especially on the fly. Embedded `iframe` elements are particularly troublesome. For these instances we provide a helper class, `iframe-wrapper`, the most common use for which is probably YouTube videos, e.g. 
@@ -160,6 +155,8 @@ One obstacle to creating elegant figures on the web is the difficulty of handlin
 
 {{< youtube id=YslQ2625TR4 title="iPhone Resolution by Edward Tufte" 4x3="true" >}}
 
+You can use this class on a `div` instead of a `figure`, with slightly different results but the same general effect. Experiment and choose depending on your application.
+
 
 ## Code
 
@@ -190,7 +187,7 @@ Extended code examples should live in a `code` element within a `pre` element. T
 
 ## ImageQuilts
 
-Tufte CSS provides support for Edward Tufte and Adam Schwartz’s [ImageQuilts](http://imagequilts.com/).{{< marginnote ind="⊕" >}}This is not supported as of 2023-04-17.{{< /marginnote >}} See the [ET forum announcement thread](http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003wk) for more on quilts. Some have ragged edges, others straight. Include these images just as you would any other `figure`.
+Tufte CSS provides support for Edward Tufte and Adam Schwartz’s [ImageQuilts](http://imagequilts.com/).{{< marginnote ind="⚠" >}}It is not maintained as of 2023-04-17.{{< /marginnote >}} See the [ET forum announcement thread](http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003wk) for more on quilts. Some have ragged edges, others straight. Include these images just as you would any other `figure`.
 
 This is an ImageQuilt surveying Chinese calligraphy, placed in a full-width figure to accomodate its girth:
 

exampleSite/content/post/tufte-features.md

@@ -1,86 +1,95 @@
-+++
+---
-author = "AUTHOR NAME"
+author: Totally famous person
-date = "2016-02-20T13:56:01-08:00"
+date: '2016-02-20T13:56:01-08:00'
-meta = true
+title: The big old test page
-math = true
+subtitle: Fancy Subtitle
-title = "Hugo-Tufte Features"
+meta: true
-subtitle = "Fancy Subtitle"
+math: true
-toc = true
+toc: true
-categories = ["katex", "latex", "tufte-css"]
+# hideDate: true
+# hideReadTime: true
+categories: [katex, latex, tufte-css]
+---
+
+## loikein's features
+
+### Emojis!
+
+Powered by [Noto Emoji font](https://emojipedia.org/noto-emoji/).
+
+We really like cats. Yes, they are fluffy and happy. 🐈🐱
+
+🪷🫶🤍😊💀🔥
 
 
-+++
+### Button
 
-This is a quick demonstration post.  It serves as an example of the features
+{{< button
-of this theme.  One of them is $ \LaTeX $ via [Katex](https://katex.org/). 
+style="primary"
-{{< section "begin" >}}
+icon="✅"
-## A Bit About Mathematics
+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 >}}
 
-{{< epigraph pre="Shawn O'Hare, " cite="Math is Fun" >}}
+{{< 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 >}}
+
+
+### Cols (with `lang` option)
+
+{{< 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 >}}
+
+## 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 $
+`$ \mathbb N \subseteq \mathbb R $`
 to start the beginning of a section.
 {{< /epigraph >}}
 
-<!--more-->
+```html
-
+{{</* epigraph author="Shawn O'Hare" cite="Math is Fun" detail="p.8" */>}}
-### Inline
+This is an example of an epigraph with some math
-Some inline math:
+`$ \mathbb N \subseteq \mathbb R $`
-{{< marginnote "mn-example" >}}This is a margin note.{{< /marginnote >}}
+to start the beginning of a section.
-$e^{i \pi} = -1$
+{{</* /epigraph */>}}
- and $\sqrt{-1} = i $
-and $ a_2 = 3 $.
-
-### Display
-And display math using this symbol `$$`:
-{{< sidenote "sn-example" >}}This is a sidenote!{{< /sidenote >}}
-$$
-  -- \cdot_H -- \colon B(G,H) \times B(H, K) \to B(G, K), \quad ([X], [Y]) \mapsto [X \times_H Y].
-$$
-
-### Environments
-
-Currently, certain $\LaTeX$ environments need to be escaped so that
-the markdown processor does not override Katex.  Currently, display
-environments should be enclosed in `<p>` tags and blank lines.
-For instance:
-
-<p>
-$$
-\begin{aligned}  
-  \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y) 
-  = \int_I \left( \int_I  \chi_A (x,y) \ dx\right) dy 
-  = \int_I 0 \ dy= 0 \quad \text{and} \\  
-  \mu(A) &=\iint_{I^2}  \chi_A (x,y) \ d(x,y) 
-  = \int_I \left(  \int_I \chi_A (x,y) \ dy \right) dx 
-  =\int_I dx = 1,
-\end{aligned} 
-$$
-</p>
-<!-- See https://github.com/jgm/pandoc/issues/3953#issuecomment-334670625 -->
-
-is produced from
-
-```txt
-<p>
-$$
-\begin{aligned}  
-  \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y) 
-  = \int_I \left( \int_I  \chi_A (x,y) \ dx\right) dy 
-  = \int_I 0 \ dy= 0 \quad \text{and} \\  
-  \mu(A) &=\iint_{I^2}  \chi_A (x,y) \ d(x,y) 
-  = \int_I \left(  \int_I \chi_A (x,y) \ dy \right) dx 
-  =\int_I dx = 1,
-\end{aligned} 
-$$
-</p>
 ```
 
-### Blockquotes
+### Blockquote
-Some blockquotes.  But first, we try to manually cite via
-<cite>This is between cite tags and has math: $e^x $</cite>
 
-{{< blockquote cite="www.shawnohare.com" footer="Shawn O'Hare" >}}
+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.
@@ -91,16 +100,155 @@ id sem consectetuer libero luctus adipiscing.
 Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
 {{< /blockquote >}}
 
-### New thoughts
+```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 */>}}
+```
 
-<span class="newthought">Sometimes a new thought</span> distinguishes a section,
+### Small-caps
-as here.  There are currently two ways to create one.  One way is with raw
+
-HTML such as: `<span class="newthought">...</span>"`.  The theme also provides
+{{< newthought >}}Sometimes a new thought{{< /newthought >}} distinguishes a section, as here.
-the `newthought` shortcode.
+
+```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
-As an example of some inline code: `go test -v -short`.
+
-And this is some block-code:
+Inline `code`, `` `escape` ``, and <kbd>keystroke</kbd>
+
 ```go {linenos=table,hl_lines=["2-5"],linenostart=199}
 package main
 
@@ -118,6 +266,7 @@ func main() {
 ```
 
 Here's an example without line numbers. 
+
 ```go {hl_lines=["2-5"],linenostart=199}
 package main
 
@@ -134,58 +283,33 @@ func main() {
 }
 ```
 
-### Figure
+### Font
-Below we have an example of a regular width figure.
-{{< figure
-  src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/exports-imports.png"
-  class="class param"
-  title="The image title."
-  caption="This is the image caption."
-  label="mn-export-import"
-  attr="Image attribution"
-  attrlink="attribute link"
-  alt="alt"
-  link="link"
- >}}
-{{< section "end" >}}
 
+> 我能体に傷つけないで吞下 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.
 
-{{< figure
+0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ \(\) {} \[\] . , : ; “ ‘ ’ \`
-  src="https://edwardtufte.github.io/tufte-css/img/rhino.png"
-  class="class param"
-  type="margin"
-  label="mn-rhino"
-  title="The image title."
-  label="mn-export-import"
-  caption="This is the image caption."
-  attr="Image attribution"
-  attrlink="https://edwardtufte.github.io/tufte-css"
-  alt="alt"
-  link="link"
- >}}
- But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate.
-{{< section "end" >}}
 
-Below is a full-width figure.
+```
-{{< figure
+0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ () {} [] . , : ; “ ‘ ’ `
-  src="https://edwardtufte.github.io/tufte-css/img/napoleons-march.png"
+```
-  type="full"
-  label="mn-napoleonic-wars"
-  title="Napoleonic wars"
-  caption="This the image caption."
-  attr="Image attribution"
-  attrlink="attribute link"
-  alt="Napoleonic wars"
-  link="link"
- >}}
-{{< section "end" >}}
 
-{{< div class="myclass" >}}
+### Inline HTML
-## A Story About Cats
-Climb a tree, wait for a fireman jump to fireman then scratch his face sleep on dog bed, force dog to sleep on floor cat snacks, and eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap climb a tree, wait for a fireman jump to fireman then scratch his face put toy mouse in food bowl run out of litter box at full speed . See owner, run in terror chase mice, so thinking longingly about tuna brine for eat a plant, kill a hand for wake up human for food at 4am. Human is washing you why halp oh the horror flee scratch hiss bite scratch the furniture and rub face on owner. Loves cheeseburgers see owner, run in terror chew on cable. Thug cat ignore the squirrels, you'll never catch them anyway. Eat a plant, kill a hand find empty spot in cupboard and sleep all day so hide head under blanket so no one can see yet love to play with owner's hair tie rub face on everything i like big cats and i can not lie. Wake up human for food at 4am stare at the wall, play with food and get confused by dust yet then cats take over the world scamper. Inspect anything brought into the house get video posted to internet for chasing red dot. Brown cats with pink ears chew foot spit up on light gray carpet instead of adjacent linoleum. I am the best wake up human for food at 4am, meow spread kitty litter all over house, for meow. Knock dish off table head butt cant eat out of my own dish jump off balcony, onto stranger's head, chase ball of string scream at teh bath but climb leg, so unwrap toilet paper but destroy couch. Climb a tree, wait for a fireman jump to fireman then scratch his face. Leave hair everywhere swat turds around the house eat grass, throw it back up, and eat grass, throw it back up. Chase after silly colored fish toys around the house.
-{{< div "end" >}}
 
-### We really like cats.
+ref: https://burk.io/2020/let-there-be-dark
 
-Yes, they are fluffy and happy.
+<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}$` |