An exhibit of Markdown

Note: Feel free to play with this page. Unlike regular notes, this doesn’t automatically save itself.

Basic formatting

Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.

Paragraphs must be separated by a blank line. Basic formatting of italics and bold is supported. This can be nested like so.

Lists

Ordered list

1. Item 1
2. A second item
3. Number 3
4. Ⅳ

Note: the fourth item uses the Unicode character for Roman numeral four.

Unordered list

• An item
• Another item
• Yet another item
• And there’s more…

Paragraph modifiers

Code block

Code blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.

You can also make inline code to add code into other things.

Quote

Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.

Headings

There are six levels of headings. They correspond with the six levels of HTML headings. You’ve probably noticed them already in the page. Each level down uses one more hash character.

Headings can also contain formatting

They can even contain inline code

Of course, demonstrating what headings look like messes up the structure of the page.

I don’t recommend using more than three or four levels of headings here, because, when you’re smallest heading isn’t too small, and you’re largest heading isn’t too big, and you want each size up to look noticeably larger and more important, there there are only so many sizes that you can use.

URLs

URLs can be made in a handful of ways:

• A named link to MarkItDown. The easiest way to do these is to select what you want to make a link and hit Ctrl+L.
• Another named link to MarkItDown
• Sometimes you just want a URL like https://www.markitdown.net/.

Horizontal rule

A horizontal rule is a line that goes across the middle of the page.

It’s sometimes handy for breaking things up.

Images

Markdown can also contain images. I’ll need to add something here sometime.

Finally

There’s actually a lot more to Markdown than this. See the official introduction and syntax for more information. However, be aware that this is not using the official implementation, and this might work subtly differently in some of the little things.

For now, these extended features are provided:

• Cells spanning multiple columns
• Cells spanning multiple rows
• Cells text align separately
• Table header not required
• Grouped table header rows or data rows

Rowspan and Colspan

^^ in a cell indicates it should be merged with the cell above.
This feature is contributed by pmccloghrylaing.

[ Net ATP yields per hexose]

Multiline

A backslash at end to join cell contents with the following lines.
This feature is contributed by Lucas-C.

Headerless

Table header can be eliminated.

|:     Fruits \|\| Food           :|||
|:-------- |:-------- |:------------ |
| Apple    |: Apple  :|    Apple     \
| Banana   |  Banana  |    Banana    \
| Orange   |  Orange  |    Orange    |
|:   Rowspan is 5   :||:  How's it? :|
|^^   A. Peach       ||^^ 1. Fine    |
|^^   B. Orange      ||^^ 2. Bad  $I = \int \rho R^{2} dV$     |
|^^   C. Banana      ||   It's OK! ![example image][my-image]  |

Text Alignment

Table cell can be set alignment separately.

: Fruits || Food :
Apple	: Apple :	Apple \
Banana	Banana	Banana \
Orange	Orange	Orange
: Rowspan is 5 :		: How’s it? :
^^ A. Peach		^^ 1. Fine
^^ B. Orange		^^ 2. Bad $I = \int \rho R^{2} dV$
^^ C. Banana		It’s OK!

pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35

2. sequence diagram

@startmermaid sequenceDiagram Alice -» Bob: Hello Bob, how are you? Bob–»John: How about you John? Bob–x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.

Bob–>Alice: Checking with John… Alice->John: Yes… John, how are you? @endmermaid

graph TD
A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

3. Class diagram

classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
  +String beakColor
    +swim()
    +quack()
}
class Fish{
  -int sizeInFeet
    -canEat()
}
class Zebra{
  +bool is_wild
    +run()
}

4. State diagram

stateDiagram
[*] --> Still
Still --> [*]

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

PlantUML Block-1

@startuml Bob -> Alice : hello @enduml

PlantUML Block-2

Bob -> Alice : hello world

PlantUML Block-3

@startuml (*) –> “Initialization”

if “Some Test” then –>[true] “Some Activity” –> “Another activity” -right-> () else ->[false] “Something else” –>[Ending process] () endif @enduml

PlantUML Block-4

@startuml skinparam handwritten true

skinparam usecase { BackgroundColor DarkSeaGreen BorderColor DarkSlateGray

BackgroundColor« Main » YellowGreen BorderColor« Main » YellowGreen

ArrowColor Olive ActorBorderColor black ActorFontName Courier

ActorBackgroundColor« Human » Gold }

User « Human » :Main Database: as MySql « Application » (Start) « One Shot » (Use the application) as (Use) « Main »

User -> (Start) User –> (Use)

MySql –> (Use)

@enduml

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

• this one
• that one
• the other one

Note that — not considering the asterisk — the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., “it’s all in chapters 12–14”). Three dots … will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here’s a numbered list:

1. first item
2. second item
3. third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here’s a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print(i)

An h3 header

Now a nested list:

1. First, get these ingredients:

   • carrots
   • celery
   • lentils

2. Boil some water.

3. Dump everything in the pot and follow this algorithm:

   find wooden spoon
   uncover pot
   stir
   cover pot
   balance wooden spoon precariously on pot handle
   wait 10 minutes
   goto first step (or shut off burner when done)
   

   Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here’s a link to a website, to a local doc, and to a section heading in the current doc. Here’s a footnote ¹.

Tables can look like this:

Name Size Material Color ————- —– ———— ———— All Business 9 leather brown Roundabout 10 hemp canvas natural Cinderella 11 glass transparent

Table: Shoes sizes, materials, and colors.

(The above is the caption for the table.) Pandoc also supports multi-line tables:

Keyword Text ——– ———————– red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it’s not easy being. ——– ———————–

A horizontal rule follows.

Here’s a definition list:

apples

Good for making applesauce.

oranges

Citrus!

tomatoes

There’s no “e” in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term and its definition to spread things out more.)

Here’s a “line block” (note how whitespace is honored):

and images can be specified like so:

Inline math equation: $\omega = d\phi / dt$. Display math should get its own line like so:

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Some great heading (h2)

Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu.

Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

Another great heading (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.

Some great subheading (h3)

Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum.

Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc.

Some great subheading (h3)

Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

This quote will change your life. It will reveal the secrets of the universe, and all the wonders of humanity. Don’t misuse it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.

Some great subheading (h3)

Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum.

<html>
  <head> </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

You might want a sub-subheading (h4)

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

But it’s probably overkill (h4)

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

Oh hai, an unordered list!!

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

• First item, yo
• Second item, dawg
• Third item, what what?!
• Fourth item, fo sheezy my neezy

Oh hai, an ordered list!!

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

1. First item, yo
2. Second item, dawg
3. Third item, what what?!
4. Fourth item, fo sheezy my neezy

Headings are cool! (h2)

Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc.

Tables

No laudem altera adolescens has, volumus lucilius eum no. Eam ei nulla audiam efficiantur. Suas affert per no, ei tale nibh sea. Sea ne magna harum, in denique scriptorem sea, cetero alienum tibique ei eos. Labores persequeris referrentur eos ei.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

\(\LaTeX{}\)

$\Pi$

$ a * b = c ^ b $

$ 2^{\frac{n-1}{3}} $

$ \int_a^b f(x)\,dx. $

\( \int_a^b f(x)\,dx. \)

Here is a liquid filter.

`escape inline code`
inline code
Here is a capture block.

100 / 3 = 33

:+1: :bolivia:

\1. 21312
\2. 21312
\4. 4214

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import networkx as nx
from collections import Counter

diagrams = defaultdict(list)
particle_counts = defaultdict(Counter)

for (a, b), neighbors in common_neighbors.items():
    # Build up the graph of connections between the
    # common neighbors of a and b.
    g = nx.Graph()
    for i in neighbors:
        for j in set(nl.point_indices[
            nl.query_point_indices == i]).intersection(neighbors):
            g.add_edge(i, j)

    # Define the identifiers for a CNA diagram:
    # The first integer is 1 if the particles are bonded, otherwise 2
    # The second integer is the number of shared neighbors
    # The third integer is the number of bonds among shared neighbors
    # The fourth integer is an index, just to ensure uniqueness of diagrams
    diagram_type = 2-int(b in nl.point_indices[nl.query_point_indices == a])
    key = (diagram_type, len(neighbors), g.number_of_edges())
    # If we've seen any neighborhood graphs with this signature,
    # we explicitly check if the two graphs are identical to
    # determine whether to save this one. Otherwise, we add
    # the new graph immediately.
    if key in diagrams:
        isomorphs = [nx.is_isomorphic(g, h) for h in diagrams[key]]
        if any(isomorphs):
            idx = isomorphs.index(True)
        else:
            diagrams[key].append(g)
            idx = diagrams[key].index(g)
    else:
        diagrams[key].append(g)
        idx = diagrams[key].index(g)
    cna_signature = key + (idx,)
    particle_counts[a].update([cna_signature])

void insert(const char* key) {
    if (*key == '\0') {
        finish = true;
    } else {
        int idx = *key - 'A';
        if (!next[idx])
            next[idx] = new Trie();
        next[idx]->insert(key + 1);
    }
}

p ":+1:"

+        'user_exists' => 'SELECT EXISTS(SELECT 1 FROM table WHERE username = (:username || \'@sample'))',
+        'get_users' => 'SELECT split_part(username, \'@\', 1) FROM table WHERE (username ILIKE :search) OR (name ILIKE :search)',
+        'get_password_hash_for_user' => 'SELECT split_part(password, \'{CRYPT}\', 2) FROM table WHERE username = (:username || \'@sample\')',
+        'set_password_hash_for_user' => 'UPDATE table SET password =  \'{CRYPT}\' || :new_password_hash WHERE username = (:username || \'@sample\')',

Reload the Nginx:

$ sudo nginx -s reload

Table

Heading	Column 1	Column 2
Row 1	Apple1	Youtube (Home)
Row 2	Banana	Github
Row 3 (merged)	Blueberry	Google ***** Github
^^	Plum	Raspberry
Row 4	https://www.google.com	test
^^	^^ https://www.youtube.com
Row 5	https://www.google.com

https://www.google.com

Not in table: <Mail Gateway>

In table:

9 * 9

Emoji

:+1:

Mathjax

$\LaTeX{}$

PlantUML

@startuml Bob -> Alice : hello @enduml

Mermaid

graph LR
  concurrent.futures --->| on top of | threading
  concurrent.futures --->| on top of | multiprocessing
  threading --->| on top of | \_thread
  click concurrent.futures "https://docs.python.org/3.9/library/concurrent.futures.html" _blank

Video

[video link]

Audio

HTML5 Audio Formats Test

Opus Audio (“.opus”):

“MP3” file (“.mp3”) :

WebM Audio (“.weba”):

WebMv2 Audio (“.webm”):

Ogg Vorbis (“.ogg”) :

“wave” file(“.wav”) :

FLAC file (“.flac”) :

CAF file (“.caf”) :

Spotify Podcast:

Special media links

Local video file (“.webm”):

Video with custom thumbnail:

Tips:

• Use pipes (|) to delineate columns, and dashes to delineate the header row from the rest of the table.
• Spacing doesn’t matter to the markdown processor, any extra white space is removed, but it can really help with readability. The two markdown examples below both create this table.

Here is some bold text

Here is a secondary heading

Here’s a useless table:

How about a yummy crepe?

It can also be centered!

Here’s a code chunk:

var foo = function(x) {
  return(x + 5);
}
foo(3)

And here is the same code with syntax highlighting:

var foo = function(x) {
  return(x + 5);
}
foo(3)

And here is the same code yet again but with line numbers:

1
2
3
4
var foo = function(x) {
  return(x + 5);
}
foo(3)

Boxes

You can add notification, warning and error boxes like this:

Notification

Note: This is a notification box.

Warning

Warning: This is a warning box.

Error

Error: This is an error box.

Emoji

This single quote code inet:email:message:to will not be parsed to emoji icon :+1:.