sites/trwnh.com

Fork 0

a dbbf12a07c wip: idk i'm tired of working from my desktop

2024-11-09 14:12:57 -06:00

20 KiB

Raw Blame History

+++ title = "Sample of HTML elements" summary = "Use this page to test out CSS styling." toc = true +++

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline elements

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This is emphasized, and this is strong. This is both emphasized and strong.

Goldmark extras: ~~del~~ ++ins++ ==mark== Some~~sub~~ Some^super^ ==xi^n^==

And again with HTML: ~~Deleted~~Inserted text. This is highlighted text. x_iⁿ is the ith element of x, raised to the nth power. Or I suppose x should be a variable, like x_iⁿ -- or is that x_iⁿ, because x_i is a variable? Or is the whole thing a variable, like x_iⁿ? Or is each individual element a variable, like x_iⁿ perhaps? Perhaps there are no wrong answers here...

The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box.

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets)

HTML is a markup language used to create the semantics and structure of a web page.

A specification (spec) is a document that outlines in detail how a technology is intended to function.

Press CTRL + ALT + Delete to open the menu.

Press CTRL + ALT + Delete to open the menu.

You may see sample output from a computer program telling you Please do not restart your computer...

When the process is complete, the utility will output the text Scan complete. Found N results. You can then proceed to the next step.

I am going to bring attention to this bit of idiomatic text using some archaic yet repurposed tags. This is an unarticulated annotation, to be used to markup anything that is annotated without further explanation, like a speling mistake.

Homo sapiens is the scientific name for human beings. ~~This text is no longer relevant, but it is not being semantically deleted.~~

According to A Hitchhiker's Guide to the Galaxy, I have some data. The ultimate answer to life, the universe, and everything is fourty-two. This work was published on October 12, 1979.

Are you ready for some ruby elements? 明日 (Ashita) is one word. 漢 (Kan) 字 (ji) is another word.

A few more esoteric ones, like "small print", which is basically either legalese or an inline equivalent to <aside> sectioning. WARNING: The following is a fan-based parody of a fan-based parody. All properties are properties of their owner. Please support my official release from prison. So yeah, buy now, buy early, buy today! I am not responsible for anything that happens after this point, and I am not your mother.

You may
create a bunch of
line breaks,
but
the real magic is in creating word breaks. For example, the unbroken word pneumonoultramicroscopicsilicovolcanoconiosis can be broken up like pneumonoultramicroscopicsilicovolcanoconiosis. Depending on where pneumonoultramicroscopicsilicovolcanoconiosis occurs, you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis in multiple different spots. You can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "pneumono", or you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "ultra", or you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "microscopic", or you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "silico", or you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "volcano". How's sesquipedalianism? Compare to sesquipedalianism

are we math yet?

The infinite sum ∑ n = 1 + ∞ 1 n 2 is equal to the real number π 2 6 .

Block elements

holy shit it's block-level math

x = − b ± b 2 − 4 ⁢ a ⁢ c 2 ⁢ a

Preformatted text block

Sample code function:


function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}

Sample terminal output:

a@trwnh.com:~$ md5 -s "Hello world"
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

a@trwnh.com:~$ █

hr separator

Blockquotes

This is a blockquote without any block elements inside it.

This is an uncited block quote.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Figures

Get browser details using navigator.

function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}

Edsger Dijkstra:

If debugging is the process of removing software bugs, then programming must be the process of putting them in.

Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire.

Venus and Adonis, by William Shakespeare

Listen to the T-Rex:

This is fallback for browsers that don't support the audio tag. Download

Tables

TODO: probably more variety here...

html tables.
a table shortcode?
tables with captions.
colgroup and col to highlight column groups
table styling? especially styling per-table

Subject	Predicate	Object
`<alice>`	`<name>`	"Alice"
`<bob>`	`<name>`	"Bob"
`<alice>`	`<knows>`	`<bob>`

This	is	a	super	wide	table	that	will	certainly	stretch	outside	the	boundaries	of	the	content
-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-

Superheros and sidekicks
	Batman	Robin	The Flash	Kid Flash
Skill	Smarts, strong	Dex, acrobat	Super speed	Super speed

Personal weekly activities
Mon	Tue	Wed	Thu	Fri	Sat	Sun
Clean room	Football training	Dance Course	History Class	Buy drinks	Study hour	Free time
Yoga	Chess Club	Meet friends	Gymnastics	Birthday party	Fishing trip	Free time

Ordered list

First item
Second item
Third item

First item
1. Sub-item 1.1
2. Sub-item 1.2
3. Sub-item 1.3
Second item
Third item

Unordered list

List item
Another item
Yet another item

List item
- Sub-item
  - Sub-sub-item
- Another sub-item
  - Another sub-sub-item
    - Sub-sub-sub-item?
      - 4 levels deep
        
        5 deep
        
        6 deep
        
        7 deep
      - 4 deep again
        
        5 deep
Another item
Yet another item

A list item with a paragraph inside it.
A figure that is captioned

menu is ul but semantically for buttons? interactive items?

Definition list

Term: Definition
Term 2: Definition 2

New term: Definition 1
New term 2: Definition 2

Image area maps

Audio and video and picture

This is fallback for browsers that don't support the audio tag. Download

Components

Admonitions

Tip

This is a basic tip, hint, note, info.

[!suggestion] This is a basic recommended, recommendation, good, suggestion, suggested, success.

Warning

This is a basic warning, caution, alert, notice.

[!danger] This is a basic danger, important, fail, failure.

Quote blocks

Default quote with no extra attributes

Quote with no author/card, but with a cite {cite="https://example.com"}

Quote with author as plain text {author="Someone"}

Quote with author as plain text, plus a cite {author="Someone" cite="https://example.com"}

Quote with author who is linked {author="Someone with a link"}

Quote with author who is linked, as well as a cite {author="Someone with a link" cite="https://example.com"}

Quote with h-card {card="trwnh.com/a"}

Quote with h-card and a cite {card="trwnh.com/a" cite="https://example.com"}

This is a nested quote.

This is some other text.

This is a nested quote. {card="trwnh.com/a"}

This is some other text. {card="trwnh.com/a"}

This is a nested quote. {cite="https://example.com"}

This is some other text. {cite="https://example.com"}

This is a nested quote. {card="trwnh.com/a" cite="https://example.com"}

This is some other text. {card="trwnh.com/a" cite="https://example.com"}

Something that was said... {card="trwnh.com/a" cite="https://example.com"}

My first response.

Something else that was said... {card="trwnh.com/a" cite="https://example.com"}

My second response. {card="trwnh.com/a" cite="https://example.com"}

Code blocks

# basic code block, no attributes

for thing in group:
	do_something()

# code block with lang=diff

for thing in group:
-	do_something()
+	do_something_else()

# code block with lang=py

for thing in group:
	do_something()

# code block with lang=py and hl_lines=3

for thing in group:
	do_something()

# code block with lang=py and hl_lines=3 and lineNos=false

for thing in group:
	do_something()

# code block with lang=py and hl_lines=3 and lineNos=false

for thing in group:
	do_something()

# code block with lang=py and hl_lines=3 and lineNos=false

for thing in group:
	do_something()

# code block starting at line 9998

for thing in group:
	do_something()

# code block starting at line 9998

for thing in group:
	do_something()

# code block starting at line 9998

for thing in group:
	do_something()

# code block with a title

for thing in group:
	do_something()

# code block with a caption

for thing in group:
	do_something()

# code block with a title and a caption

for thing in group:
	do_something()

Footnotes

I am going to add a footnote here¹ where I will go off on a long tangent later.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. ↩︎

20 KiB Raw Blame History Unescape Escape