This page serves as a quick visual reference showcasing all elements on this website.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraphs

This is a regular paragraph of text. You can write multiple sentences to show flow and readability.

Line Breaks

Line one.
Line two (break created with two spaces at end of previous line).

Emphasis

Italic text

Bold text

Bold and italic text

Strikethrough

Blockquotes

This is a blockquote.

Nested blockquote.

Lists

Unordered List

• Item one

  • Nested item

    • Deep nested

• Item two

• Item three

Ordered List

1. First item

2. Second item

   1. Nested item
   2. Another nested

3. Third item

Task Lists

• TODO item
• Completed item
• Partially done

Math & equations

Inline math

The solutions to the quadratic equation \(ax^2 + bx + c = 0\) are given by the formula \(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\).

Block math

Taylor series expansion of \(\sin(x)\):

Code

Inline Code

Use inline code for commands like ls -la.

Code block (generic - no language specified)

This is a generic code block.

Code block (language-specific)

function greet(name) {
  console.log("Hello " + name);
}

ls -R /etc/
grep "name" file.txt

name = "God"
greeting = f"Hello {name}"
print(greeting)

SELECT c.customer_id, c.first_name, c.last_name, c.email, c.phone, c.address, c.city, c.state, c.zip_code, c.country, o.order_id, o.order_date, o.status, p.product_id, p.product_name, p.category, p.price, s.supplier_name, s.contact_name, s.supplier_phone, cat.category_name, cat.description, inv.quantity_in_stock, emp.employee_id, emp.first_name AS rep_first_name, emp.last_name AS rep_last_name, sh.shipper_name, sh.phone AS shipper_phone, py.payment_date, py.amount, py.method FROM customers c INNER JOIN orders o ON c.customer_id = o.customer_id INNER JOIN order_items oi ON o.order_id = oi.order_id INNER JOIN products p ON oi.product_id = p.product_id INNER JOIN suppliers s ON p.supplier_id = s.supplier_id INNER JOIN categories cat ON p.category_id = cat.category_id INNER JOIN inventory inv ON p.product_id = inv.product_id INNER JOIN employees emp ON o.sales_rep_id = emp.employee_id INNER JOIN shippers sh ON o.shipper_id = sh.shipper_id INNER JOIN payments py ON o.order_id = py.order_id WHERE o.order_date >= '2023-01-01' AND o.status IN ('shipped', 'delivered') ORDER BY o.order_date DESC, py.amount DESC;

Code block with line highlight

fmt.Println("a")
fmt.Println("b")
fmt.Println("c")

do
    src=${f#"static/"}
    echo Searching for $src
    usedin=`find ./content/ -name '*.md' -exec grep -H $src {} \;`
    if [ -z "$usedin" ]; then
        echo Not used
        rm -f $f; echo Deleted file $f
    else
        echo ====== Used in:
        echo $usedin
    fi
done

Code block with line numbers

def fetch(url, retries=3):
    for attempt in range(retries):
        try:
            return get(url).json()
        except TimeoutError:
            continue
    raise RuntimeError("gave up")

Code block with line numbers, file name & highlight

[markup.highlight]
  lineNos = false
  lineNumbersInTable = true
  noClasses = false
  tabWidth = 2

Code block with file name & line highlight

---
apiVersion: networking.k8s.io/v1
kind: NetworkPolicy
metadata:
  name: default-deny-ingress
spec:
  podSelector: {}
  policyTypes:
  - Ingress

Diffs

- old value
+ new value
 unchanged

--- deployment_old.toml
+++ deployment_new.toml
@@ -1,10 +1,11 @@
 [deployment]
 environment = "staging"
 replicas = 2
+strategy = "rolling"

 [resources]
 cpu = "500m"
-memory = "512Mi"
+memory = "1Gi"

 [network]
 ingress = true

Display content from GitHub

Below is the content from https://github.com/pkic/pkic.org/blob/main/staleuploads.sh .

for f in `find static/uploads/ -type f`
do
    src=${f#"static/"}
    echo Searching for $src
    usedin=`find ./content/ -name '*.md' -exec grep -H $src {} \;`
    if [ -z "$usedin" ]; then
        echo Not used
        rm -f $f; echo Deleted file $f
    else
        echo ====== Used in:
        echo $usedin
    fi
done

echo Deleting empty directories
find static/uploads/ -mindepth 1 -type d -empty -delete

Terminal output

$ ls -l
total 12
-rw-r--r--  1 user  staff   120 Jan 12 10:21 README.md
drwxr-xr-x  4 user  staff   128 Jan 12 10:22 src
drwxr-xr-x  3 user  staff    96 Jan 12 10:23 public

$ journalctl -u apache2 --no-pager | head -n 12
-- Logs begin at Wed 2026-04-28 00:00:00 UTC, end at Sat 2026-05-03 08:12:34 UTC. --
May 03 08:10:01 web01 apache2[12345]: [notice] Apache/2.4.52 (Unix) configured -- resuming normal operations
May 03 08:10:02 web01 apache2[12345]: [info] Server built: Apr 10 2026 14:22:11
May 03 08:10:05 web01 apache2[12345]: [info] caught SIGTERM, shutting down
May 03 08:11:10 web01 apache2[12400]: [info] Starting Apache/2.4.52 (Unix)
May 03 08:11:11 web01 apache2[12400]: [info] accepted connection from 192.0.2.10:52341
May 03 08:11:11 web01 apache2[12400]: [info] [client 198.51.100.23] GET /very/long/path/to/resource/that/keeps/going/on/and/on/and/on/index.html HTTP/1.1
May 03 08:11:11 web01 apache2[12400]: [info] [client 198.51.100.23] File does not exist: /var/www/html/this/is/a/really/long/nonexistent/path/that/exceeds/normal/column/widths
May 03 08:11:12 web01 apache2[12400]: [warn] memory usage high: RSS=1.2G, VSZ=2.5G, pid=12400
May 03 08:11:14 web01 apache2[12400]: [info] [client 203.0.113.5] POST /api/v1/ingest HTTP/1.1
May 03 08:11:15 web01 apache2[12400]: [error] child process 12401 exited with status 1 -- terminating

Links

Inline link

Reference-style link

https://example.com (autolink)

Link to a reference ¹

https://example.com/this/is/a/super/long/url/that/has/no/spaces/and/keeps/extending/further/and/further/until/it/becomes/a/problem/for/layouts/and/tests/how-css-handles-overflow-properly-without-breaking-the-design

This is a reference link to something very long LongRef1.

Images

Image without zoom

Image with zoom, title and other capabilities

Click on the image to know more.

Image 1

Image 2

Tables

Table Alignment

Mindmap

Simple

# Docker

## Containers
- Run apps
- Isolated

## Images
- Templates
- Layers

## Networks
- Bridge
- Host

Note: you can specify height as well, like {height="500px"}.

How to use this mindmap

• Click on any node to expand or collapse sitems below it
• Scroll or drag to navigate across the diagram
• Use zoom (trackpad / mouse wheel) to focus on details

Full formatting

- Mindmaps
  - Links
    - [Docker Docs](https://docs.docker.com/)
    - [Kubernetes Docs](https://kubernetes.io/docs/)
    - [Terraform Docs](https://developer.hashicorp.com/terraform/docs)
  - Features
    - Markdown formatting
    - **inline** ~~text~~ *styles*
    - multiline
      text
    - `inline code`
    -
      ```js
      console.log('hello');
      console.log('code block');
      ```
    - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

Charts/diagrams

Chart support is by Mermaid. The dark theme is used. Mermaid supports various types of charts. Below are few charts for illustration.

Sequence diagram

  sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Architecture diagram

  architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

Pie chart

Internet traffic by device type in Oct 2025

  ---
config:
  pie:
    textPosition: 0.5
  themeVariables:
    pieStrokeColor: "#c7c7c7ff"
    pieOuterStrokeWidth: "5px"
    pie1: "#4E79A7"   # mobile
    pie2: "#F28E2B"   # desktop
    pie3: "#E15759"   # tablet
---
pie showData
    "Mobile" : 67.47
    "Desktop" : 31
    "Tablet" : 1.54

Bar chart

  xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Line chart

  xychart-beta
    title "Desktop vs Mobile Share of Global Web Browsing (2009–2025)"
    x-axis [2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]
    y-axis "Share (%)" 0 --> 100
    line [99.3,98.4,95.7,91.5,82.4,72.0,62.4,55.9,45.3,43.9,47.0,45.3,41.5,42.5,39.4,39.8,39.5]
    line [0.7,1.6,4.3,8.5,17.6,28.1,37.6,44.1,54.7,56.1,53.0,54.7,58.6,57.5,60.6,60.2,60.5]

Sanky diagram

  sankey-beta
A,X,5
A,Y,7
A,Z,6
B,X,2
B,Y,9
B,Z,4

PDF embed

Footnotes

Here is a sentence with a footnote.²

Emojis

😄 🎉 🚀 Markdown often includes emoji via unicode.

Escape Characters

Use \* to write a literal asterisk: not italic.

Horizontal Rule

Callouts or Admonitions

Error Test

GitHub Test

Callout Overview

function fetchData() {
    return axios.get('/api/data');
}

def hello_world():
    print("Hello, World!")

Customization

Choose a callout you prefer and add a title

Header Only Mode

You can choose to only to show the header!

Nested Admonitions