Markdown Test/Cheatsheet

Disclaimer

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.

― Daisaku Ikeda

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

  1. First order list item
  2. Second item

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);
1test_var = 'Python syntax highlighting'
2print(test_var)
3
4for idx, val in range(len(test_var)):
5 print(f'{idx} :: {val}') # Wrong highlighting!
6
7
8def 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
10pre mark {
11 // If you want your highlights to take the full width
12 display: block;
13 color: currentcolor;
14}
15pre 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

TablesforMarkdown
col 3 isright-alignedok?
col 2 iscenteredGot it?
col 1 isleft-alignedAlright!!!

Table 2: With Typography Elements

Anothertablehere
Iamrow
1twoIII

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:

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>):

This sidenote should be inline! But can it be a code block?

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:

1

Footnote number one.

2

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 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