title

subtitle

sub-subtitle

sub-sub-subtitle

sub-sub-sub-subtitle
sub-sub-sub-sub-subtitle

Paragraph

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.

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

| Syntax | Description | | ----------- | ----------- | | Header | Title | | Paragraph | Text |

Task List

  • [x] Write the press release
  • [ ] Update the website
  • [ ] Contact the media

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~2~O

Superscript

X^2^

X^2^

Emoji

Emoji support not yet working

That is so funny! :joy:

:rocket:

:thumbs_up:

:grinning_face:

:fire:

That is so funny! :joy:

:rocket:

:thumbs_up:

:grinning_face:

:fire:

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

::: container {.bg-pink-500} here be dragons

here :::

warning

{.bg-pink-500} ::: warning here be dragons be careful :::

more containers

:::: name ::: name markdown ::: ::::

{.text-pink-900} :::: {.bg-pink-500} ::: container

here

there

there

import this

:::

::: second container

I still have pink text, but no pink background :::

::::

carousel

{.carousel} :::: ::: hi ::: ::: hi ::: ::: hi ::: ::: hi ::: ::: hi ::: ::::

Admonitions

!!! note sample note

 this is a sample

???+ note sample note

 this is a sample

it's collapsible and open

??? note sample note

 this is a sample

it's collapsible and closed

!!! danger be careful

 this is super dang.

subtitle #

!!! reminder

 this is a reminder

!!! caution

 this is a caution

!!! attention

 this is a attention

!!! hint

 this is a hint

!!! error

 this is a error

!!! important

 this is a important

!!! seealso

 this is a seealso

!!! tip

 this is a tip

!!! todo

 this is a todo

!!! warning

 this is a warning

!!! settings

 this is a settings

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.

!!! vsplit I Have two opinions

!!! vsplit Left Opinion
supporting arguments

* lorem ipsum
* ipsum dolor

- [x] lorem ipsum
- [ ] ipsum dolor

Right Opinion

supporting arguments

  • lorem ipsum
  • ipsum dolor
  • lorem ipsum
  • ipsum dolor

A clean vsplit

{.clean} !!! vsplit ""

!!! vsplit Hello World
Here is a hello world application written in the typer cli framework
for cli.

""


#!/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

!!! vsplit ""

!!! vsplit ""
    ``` markdown
    <div>
    # markdown in html
This is not markdown
&lt;/div&gt;
```

""

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

!!! vsplit "" !!! vsplit "" ``` markdown

    # markdown in html
This is a *Markdown* Paragraph.

&lt;/div&gt;
```

""

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

gitgraph

gitGraph:
    commit "Ashish"
    branch newbranch
    checkout newbranch
    commit id:"1111"
    commit tag:"test"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge newbranch
    commit
    branch b2
    commit
gitGraph:
    commit "new stuff"
    branch make-server-feature
    checkout make-server-feature
    commit "go"
    commit tag:"test"
    commit
    commit
    commit
    rebase
    checkout main
    commit type: HIGHLIGHT
    commit
    merge make-server-feature
    commit
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-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</pre>
<pre class="mermaid">architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db</pre>
architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

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

can it vsplit

!!! vsplit "" !!! vsplit "" ```` markdown ``` mermaid architecture-beta group apilogos:aws-lambda

        service db(logos:aws-aurora)[Database] in api
        service disk1(logos:aws-glacier)[Storage] in api
        service disk2(logos:aws-s3)[Storage] in api
        service server(logos:aws-ec2)[Server] in api
    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```
````

""


architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

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

version {{ version }}