Profile picture
Sidharth R

Style Guide

Updated: ⚬ Page views: loading...

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

$$ \sin(x) = \sum_{n=0}^{\infty} (-1)^n \frac{x^{2n+1}}{(2n+1)!} $$

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)

JS
function greet(name) {
  console.log("Hello " + name);
}
BASH
ls -R /etc/
grep "name" file.txt
PYTHON
name = "God"
greeting = f"Hello {name}"
print(greeting)
MYSQL
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 file name

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

Display content from GitHub

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

staleuploads.sh
GitHub
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 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
Apache logs
$ 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

Inline link

Reference-style link

https://example.com (autolink)

Link to a reference 1

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

You can if you think you can

Image with zoom, title and other capabilities

Click on the image to know more.

Image 1

Love all serve all help ever hurt never

Image 2

There is only one caste - the caste of Humanity. There is only one religion - the religion of Love. There is only one language - the language of the Heart. There is only one God - He is Omnipresent. There is only one law - the law of Righteousness.

Tables

Column 1Column 2Column 3
Value AValue BValue C
Value DValue EValue F

Table Alignment

LeftCenterRight
123
456

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
Tip

Start from the top-level nodes and expand gradually to avoid getting overwhelmed.

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

Emojis

😄 🎉 🚀 Markdown often includes emoji via unicode.

Escape Characters

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

Horizontal Rule

Callouts or Admonitions

Note

This is a note.

Warning

This is a warning.

Tip

A helpful tip.

  1. https://docs.example.org/some/extremely/long/documentation/path/that/just/does/not/end/easily/and/is/useful/for/testing/how/reference-style-links-wrap-in-markdown/renderers/especially/in-static-site-generators ↩︎

  2. This is the footnote. ↩︎