Markdown Test/Cheatsheet
This page is mostly for my own manual tests. It’s public so others could use it, too.
This is Markdown Test/Cheatsheet for Duckquill Zola theme and my buggy adaptaion of Tufte-CSS.
Typography Elements
This is a paragraph.
This text is bolded.
Italiano!
It was a dumb ideaMy decision was less than optimal.
A highlighted inline code looks like ThisIsMyCode()
.
You can check how fenced code block works in the Code Blocks section.
This text is a hyperlink or http://www.example.com.
Others
Markdown abbreviations: *[HTML]: Hypertext Markup Language *[CSS]: Cascading Style Sheets
HTML <abbr>
tag:
the HTML specification
is maintained by the W3C.
<sub>
tag: CO2
With ^
: X^2^
<sup>
tag: Xn + Yn = Zn
With ~
: H~2~O
Keyboard: Ctrl + Q
Mark/highlight: TODO
Headings H1 to H6
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Markdown
Blockquote
Quote with Markdown syntax:
The roots of education are bitter, but the fruit is sweet.
Said Aristotle, probably.
Quote with Zola shortcode:
The determination to win is the better part of winning.
Many web sites use Cloudflare to filter access. The goal of preventing DDS attacks is not in itself bad, but Cloudflare does bad things to each legitimate visitor:
- It determine’s the visitor’s location based on per IP address. (Using a proxy can thwart this.) Tracking people is unjust.
- It acts as a man-in-the-middle in encrypted (HTTPS) communication between the visitor and the site: Cloudflare knows what page the visitor is looking at and sees any other communication as well.
List Items
- First order list item
- Second item
- Unordered list can use asterisks
- Or minuses
- Or pluses
Code Blocks
With <pre>
tag:
var s = "JavaScript syntax highlighting"; alert(s);
In Duckquill, the Markdown code blocks (```
) should indicate the used language AND have a copy button on the right.
var s = "JavaScript syntax highlighting";
alert(s);
setTimeout(function () { alert("JavaScript"); }, 1000);
1 test_var = 'Python syntax highlighting'
2 print(test_var)
3
4 for idx, val in range(len(test_var)):
5 print(f'{idx} :: {val}') # Wrong highlighting!
6
7
8 def is_it_cool() -> bool:
9 """
10 Some method docstring...
11
12 :return: Until it is perfect, False!
13 """
14 return False
1 # This code block uses, in a nutSHELL (via comma), several extra settings:
3 - lineos
4 - linenostart=10
5 - hl_lines=3-4 8-9
6 - hide_lines=2 7
10 pre mark {
11 // If you want your highlights to take the full width
12 display: block;
13 color: currentcolor;
14 }
15 pre table td:nth-of-type(1) {
16 // Select a colour matching your theme
17 color: #6b6b6b;
18 font-style: italic;
19 }
Table
Table 1: With Alignment
Tables | for | Markdown |
---|---|---|
col 3 is | right-aligned | ok? |
col 2 is | centered | Got it? |
col 1 is | left-aligned | Alright!!! |
Table 2: With Typography Elements
Another | table | here |
---|---|---|
I | am | row |
1 | two | III |
Horizontal Line
The HTML <hr>
element is for creating a “thematic break” between paragraph-level elements. In markdown, you can create a <hr>
with any of the following:
___
: three consecutive underscores---
: three consecutive dashes***
: three consecutive asterisks
renders to:
Custom
Sidenotes
Instead of footnotes, I’ve decided to focus more on the concept of sidenotes from Edward Tufte. I don’t really want the whole scientific R-Markdown pacakge, but I find most web-sites lack such feature.
Sidenotes are basically footnotes but right near the text. Let’s check if inline sidenotes works. Bold move! If you see some bold on the right, then it is!
Now let’s check if a multi-line body will work!
Here starts our multi-line sidenote body… It can be a list:- one
- two
- two and a half WTF? Why doesn’t it work inline?
Let’s check if sidenotes work inline, w/o creating a new paragraph (<p>...</p>
):
print('Apparently so!')
What about a quote?
Yes!
Instead of using footnotes on “the bottom of the page” Tufte-CSS suggests show them on the right of the text. Just like you’d probably do in your notebook.
Margin Notes
In-Line
This is a sentence with a margin note here. And it continues.
Per-Line
This is a sentence with a margin note here. And it continues.
Multi-Line
This is a sentence with a multi-line Markdown marginnote.
Should support:
- a list
- code block
print('It does!')
It should be on the right, as always.
The Usual Way
This is a sentence with a
margin note here.
And it continues.
Footnotes / List
Placing the footnote-definition
class (e.g., for <div>
) will have the same Markdown syntax as footnotes.
If you have some text that you want to refer with a footnote, do as follows. This is an example for the footnote number one 1.
Add more footnotes, with link. 2 he
And the list goes here:
Footnote number one.
A footnote you can link to — click here!
[^2]: A footnote you can link to --- [click here!](#)
Media
Invidious FOSS YouTube front-end with no telemetry from Big Tech. Embedded Iframe
Image
Image Source: WonderfulEngineering.com

Extra Features
KaTeX
Display: $$f(x) = \int_{-\infty}^\infty\hat{f}(\xi),e^{2 \pi i \xi x},d\xi$$
Inline: $\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi),e^{2 \pi i \xi x},d\xi$
GitHub Alerts
[!NOTE] Useful information that users should know, even when skimming content.
[!TIP] Helpful advice for doing things better or more easily.
[!IMPORTANT] Key information users need to know to achieve their goal.
[!WARNING] Urgent info that needs immediate user attention to avoid problems.
[!CAUTION] Advises about risks or negative outcomes of certain actions.
GitHub-flavoured Alerts
Note
Note alert text
Tip
Tip alert text
Important
Important alert text
Warning
Warning alert text
Caution
Caution alert text
Mermaid Diagrams
Code block based MermaidJS:
---
config:
layout: elk
look: handDrawn
theme: dark
---
sequenceDiagram
autonumber
actor user as User
participant client as Front
participant api as API
participant back as Backend
participant service as Worker
%% Request a new config...
user ->> client: click a button
client ->> client: generate security keys
client ->> api: GET /auth
break limit's exceeded
api -->> client: return error
client -->> user: show error
end
api ->> api: new session for Client
api ->>+ back: sends Client's security meta
back ->> back: process data
back ->> service: add new instance
back -->>- api: return slot
api -->> client: return generated config (base64)
par Return Config
client -->> user: established connection
and Delete Old Meta
api ->> api: revoke oldest Meta
api ->> back: remove Instance
back -->> api: confirm Instance is deleted
end
Shortcode-based MermaidJS:
--- config: layout: elk look: handDrawn theme: dark --- sequenceDiagram autonumber actor user as User participant client as Front participant api as API participant back as Backend participant service as Worker %% Request a new config... user ->> client: click a button client ->> client: generate security keys client ->> api: GET /auth break limit's exceeded api -->> client: return error client -->> user: show error end api ->> api: new session for Client api ->>+ back: sends Client's security meta back ->> back: process data back ->> service: add new instance back -->>- api: return slot api -->> client: return generated config (base64) par Return Config client -->> user: established connection and Delete Old Meta api ->> api: revoke oldest Meta api ->> back: remove Instance back -->> api: confirm Instance is deleted end