title #

subtitle #

sub-subtitle #

sub-sub-subtitle #

sub-sub-sub-subtitle

sub-sub-sub-sub-subtitle

Glossary #

There is a glossary item in vibe coding here and clippy no simpy.

Now you don’t have to manually link to how to create a virtual environment every time you mention virtual environments in any post that needs a virtual environment.

Paragraph #

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Hover me incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CodeBlock #

import this

print("that")

Horizontal rule #

Blockquote #

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Table #

Tables with a header row are sortable in the default theme. Select a header to sort by that column, then select it again to reverse the order. These examples cover text, numbers, equal values, and empty cells.

Task List #

• Write the press release
• Update the website
• Contact the media

Strikethrough #

This old example has been replaced with a current one.

Footnotes #

Footnotes can hold a detail without interrupting the paragraph.¹

Definition list #

Markata

A static site generator that turns content into a site.

Markdown

The source format used for this page.

Heading attributes #

This heading has a stable fragment identifier.

A linkable heading #

This paragraph has a class attribute.

Wikilinks #

Wikilinks point to other posts by title or slug: Waylon Walker and Blogging For Me. They can also show hover previews when that feature is enabled by the site.

Highlight #

I need to highlight these very important words.

Bold #

This text has bold text

Italics #

This text has italic text

Subscript #

H~2~0

H₂O

Superscript #

X^2^

X²

Emoji #

Recognized emoji shortcodes render inline; unknown names remain literal.

That is so funny! :joy:

:rocket:

:thumbsup:

:grinning:

:fire:

That is so funny! 😂

🚀

👍

😀

🔥

Abbreviations #

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium The HTML specification is maintained by the W3C.

Keys #

Ctrl+Alt+Del

Win+9

Mark #

==marked==

marked

marked => inserted

Containers #

warning

more containers

import this

carousel #

Admonitions #

vsplit #

!!! vsplit I Have two opinions

    !!! vsplit Left Opinion

        supporting arguments

        * lorem ipsum
        * ipsum dolor

        - [x] lorem ipsum
        - [ ] ipsum dolor

    !!! vsplit Right Opinion

        supporting arguments

        * lorem ipsum
        * ipsum dolor

        - [ ] lorem ipsum
        - [x] ipsum dolor

Here is the result of that markdown.

A clean vsplit

#!/usr/bin/env -S uv run --quiet --script
# ///
# requires-python = ">=3.12"
# dependencies = [
#     "typer",
# ]
# ///

import typer

app = typer.Typer()

@app.command()
def hello(name: str = "World"):
    """Prints a greeting message."""
    typer.echo(f"Hello, {name}!")

if __name__ == "__main__":
    app()

html in md #

html without the markdown atrribute will not be parsed as markdown

<div>
# markdown in html

This is not markdown
</div>

If you give an html tag the markdown="1" attribute, the markdown will be parsed and rendered as html inside of that tag.

<div markdown="1">

# markdown in html

This is a *Markdown* Paragraph.

</div>

mermaid diagrams #

---
config:
layout: elk
look: handDrawn
theme: dark
---
flowchart TD
    A[Raw Water Intake] --> B[Screening]
    B --> C[Coagulation & Flocculation]
    C --> D[Sedimentation/Clarification]
    D --> E[Filtration]
    E --> F[Disinfection]
    F --> G[Storage/Distribution]

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]

---
config:
  layout: elk
  look: handDrawn
  theme: dark
---

graph TD
  A[\Replenish Value Add stock/] --->C
  B(Order product with Value Add) --->C
  C{Frequent process?} --->|Yes|D
  C --->|No|F
  D{New template?} --->|Yes|E
  D --->|No|G
  E(Create work order template) --->G
  F(Create work order) --->H
  G(Copy template to work order) --->I
  H(Add materials to work order processes) --->J
  I(Adjust material quantities) --->J
  J(Monitor work orders) --->K
  K{Material quantities in stock?} --->|No|L
  K --->|Yes|M
  L(Procure materials) --->M
  M(Change status to In Progress) --->N
  N{External Vendor to perform step?} --->|Yes|O
  N --->|No|P
  O(Add vendor costs) --->Q
  P[\Perform work order step/] --->R
  Q([Ship materials to Vendor]) --->S --->X
  R{Additional processing required?} --->|Yes|N
  R--->|No|T
  S[\Perform work order step/] --->U
  T(Receive final stock) --->V
  U(Receive product from vendor) --->W
  V(Ship product on order) --->Y
  W{Partial quantity received?} --->|Yes|X
  W --->|No|Z
  X[Create work order backorder] ---> J
  Y(Change status to complete) --->AA
  Z(Pay vendor invoice) --->R
  AA([Finish])

Scroll-drawn roads #

Road containers turn lists of links into paths that draw as the reader scrolls. The default theme includes styles for timelines, steps, snake paths, cycles, constellations, Git histories, and editorial timelines. The links below use pages on this site.

Steps place the milestones from left to right on wide screens and in a timeline on narrow screens.

The other built-in layouts work with the same linked list. These compact examples keep every road style available for checking in the default theme.

gitgraph

These GitGraph examples use syntax supported by the deployed Mermaid 10.9.5 renderer.

gitGraph
    commit id: "Ashish"
    branch newbranch
    checkout newbranch
    commit id: "1111"
    commit tag: "test"
    checkout main
    commit id: "main-work"
    merge newbranch
    commit id: "release"
    branch b2
    checkout b2
    commit id: "b2-work"

gitGraph
    commit id: "start"
    branch make-server-feature
    checkout make-server-feature
    commit id: "go"
    commit tag: "test"
    commit id: "feature-1"
    commit id: "feature-2"
    checkout main
    commit id: "main-work"
    merge make-server-feature
    commit id: "release"

mindmap
  #python
    uv
    pip
    ipython
      jupyter
      jupyterlab

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

The journey

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
      Play with cat: 10: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

---
config:
  layout: elk
  look: handDrawn
  theme: dark
---
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

Architecture diagrams below use Mermaid 10-compatible flowcharts. The architecture-beta diagram family requires a newer Mermaid runtime.

flowchart LR
    subgraph API["API"]
        db[("Database")]
        disk1[("Storage 1")]
        disk2[("Storage 2")]
        server["Server"]
    end
    db --- server
    disk1 --- server
    disk2 --- db

``` mermaid
flowchart LR
    subgraph API["API"]
        db[("Database")]
        disk1[("Storage 1")]
        disk2[("Storage 2")]
        server["Server"]
    end
    db --- server
    disk1 --- server
    disk2 --- db
```

flowchart LR
    subgraph API["API"]
        db[("Database")]
        disk1[("Storage 1")]
        disk2[("Storage 2")]
        server["Server"]
    end
    db --- server
    disk1 --- server
    disk2 --- db

can it vsplit #

``` mermaid
flowchart LR
    subgraph API["API"]
        db[("Database")]
        disk1[("Storage 1")]
        disk2[("Storage 2")]
        server["Server"]
    end
    db --- server
    disk1 --- server
    disk2 --- db
```

flowchart LR
    subgraph API["API"]
        db[("Database")]
        disk1[("Storage 1")]
        disk2[("Storage 2")]
        server["Server"]
    end
    db --- server
    disk1 --- server
    disk2 --- db

version {{ version }}

YouTube one line links #

https://youtu.be/dQw4w9WgXcQ

https://www.youtube.com/watch?v=dQw4w9WgXcQ

https://www.youtube.com/embed/dQw4w9WgXcQ