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: CO₂

With ^: X^2^

<sup> tag: Xⁿ + Yⁿ = Zⁿ

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:

List Items

1. First order list item
2. 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

Table 2: With Typography Elements

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!

Let’s check if sidenotes work inline, w/o creating a new paragraph (<p>...</p>):

print('Apparently so!')

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

print('It does!')

It should be on the right, as always.

The Usual Way

This is a sentence with a

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 ¹. Add more footnotes, with link. ² he

And the list goes 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