Test Page
This is a page to test and visualize all of the markdown features we support in one place, along with some corner cases I encountered.
Paragraphs and Their Contents
This paragraph has a link to the about page in it. This link to the LISP Wikipedia page has parentheses in the URL, which is a corner case we need to handle. A paragraph can also contain bold text, italic text, and text that is both bold and italic at the same time. We can even style links in italic type. The next paragraph shows what multiple lines of plain text look like with the current styling.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non urna ultricies, maximus urna eget, dapibus justo. Aliquam elementum velit velit, sed luctus ante fringilla vitae. Sed vestibulum, risus et mattis ultricies, nibh sem vulputate risus, in placerat urna orci eget erat. Sed ultrices tellus sit amet libero faucibus, non aliquet diam iaculis. Sed fermentum, nisi eget dictum dictum, lectus sapien sollicitudin libero, in placerat magna quam ut urna. Nunc urna odio, faucibus a pretium vel, dignissim a turpis. Pellentesque congue faucibus nisl, sit amet finibus ipsum interdum sed.
Code Blocks
This is a little inline code snippet x = y + foo() inside of a paragraph. References to individual variables look like x, y and foo. A function call looks like foobar(1, 2).
This is a larger multiline code block with assembly code:
mov r8, 0;
IF_TRUE(2EF9)(7):
cmp r8d, 2000000000;
jge FOR_EXIT(2DFB)(219)
mov ebx, r8d;
add ebx, 1;
jo ADD_OVER(169);
mov r8, rbx;
Below is a multiline code block with some HTML code that needs to be escaped to display properly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
This is a code block containing a very long identifier which requires scrolling horizontally:
very_very_ridiculously_long_identifier_that_requires_a_scrollbar_because_it_wont_fit_in_the_code_block_width();
Machine code dump:
— Optimized code —
optimization_id = 0
source_position = 0
kind = OPTIMIZED_FUNCTION
stack_slots = 2
Instructions (size = 346)
0xc579e565ae0 0 55 push rbp
0xc579e565ae1 1 4889e5 REX.W movq rbp,rsp
0xc579e565ae4 4 56 push rsi
0xc579e565ae5 5 57 push rdi
0xc579e565ae6 6 4883ec10 REX.W subq rsp,0x10
0xc579e565aea 10 488b45f8 REX.W movq rax,[rbp-0x8]
0xc579e565aee 14 488945e0 REX.W movq [rbp-0x20],rax
0xc579e565af2 18 488bf0 REX.W movq rsi,rax
0xc579e565af5 21 493ba540070000 REX.W cmpq rsp,[r13+0x740]
0xc579e565afc 28 7305 jnc 35 (0xc579e565b03)
0xc579e565afe 30 e8bdd5fcff call StackCheck (0xc579e5330c0)
0xc579e565b03 35 33c0 xorl rax,rax
0xc579e565b05 37 48bb681c51f000110000 REX.W movq rbx,0x1100f0511c68 ;; property cell
0xc579e565b0f 47 4d8b55b0 REX.W movq r10,[r13-0x50]
0xc579e565b13 51 4c3913 REX.W cmpq [rbx],r10
A C struct:
struct Car
{
char makeModel[128]; // String for the car's make and model
struct Wheel
{
double direction; // Wheel direction angle
double rotation; // Current angle of rotation
} wheels[4];
} car;
JS object literal:
// Car object literal
var car =
{
makeModel: 'make and model string',
wheels: [
{ direction: 0, rotation: 0 },
{ direction: 0, rotation: 0 },
{ direction: 0, rotation: 0 },
{ direction: 0, rotation: 0 },
]
}
Small C program:
// Integer hash function with a good distribution
// Based on:
// https://github.com/skeeto/hash-prospector
uint32_t hash_u32(uint32_t x)
{
x = x ^ (x >> 16);
x = x * 0x7feb352d;
x = x ^ (x >> 15);
x = x * (0x846ca68b);
x = x ^ (x >> 16);
return x;
}
int main()
{
// For comparison against GCC
assert(hash_u32(0) == 0);
assert(hash_u32(1) == 1753845952);
assert(hash_u32(2) == 3507691905);
assert(hash_u32(3) == 1408362973);
uint32_t sum = 0;
for (uint32_t i = 0; i < 30; ++i)
{
uint32_t r = hash_u32(i) % 20;
#ifndef TEST
printf("%u\n", r);
#endif
sum = sum + r;
}
#ifndef TEST
printf("sum = %u\n", sum);
#endif
assert(sum == 271);
return 0;
}
Itemized Lists
This is a plain unordered list:
-
First item
-
Second item
-
Third item
-
Fourth item
This is an unordered list with nesting:
-
First item, with a paragraph continuing over a second line
Second paragraph inside first item.
-
Second item
-
Sublist item 1
-
Sublist item 2
Second paragraph in sublist item 2
Third paragraph in sublist item 2
-
-
Third item of top list
-
Level 2
-
Level 3
-
-
Level 2
-
-
Fourth item of top list
This is a plain ordered list:
-
First item
-
Second item
-
Third item
-
Fourth item
This ordered list starts at number 5:
-
Hello!
-
Number 6.
-
Seven.
This ordered list contains an unordered list:
-
First item
-
Sub 1
-
Sub 2
-
Sub 3
-
-
Second item
-
Third item
Quote Blocks
This is a simple quote:
Quotes can contain multiple paragraphs. This is the first paragraph of this quote block.
They can also contain the usual italic or bold text, as well as things like web links.
These are two quote blocks separated by a blank line:
"A person who never made a mistake never tried anything new." - Albert Einstein
"If people do not believe that mathematics is simple, it is only because they do not realize how complicated life is." - John von Neumann
This is a quote block containing a list with a nested sublist:
List of fruits:
Apples
Red apples
Green apples
Bananas
Pears
This is a quote containing another quote:
Second nested quote below:
Hello there!
Second paragraph in the toplevel quote
YouTube Video Embedding
Sometimes on my blog I embed YouTube videos that I think are relevant. This is done using an <iframe> tag.
Image Support
Small Image of a Watch Mechanism
This is a small image. It remains small and doesn't get upscaled.
Large Image
The following image is large, and its width is limited to a percentage of the parent container's width while remaining centered. The height of the image is also limited so that it doesn't feel overwhelmingly large. You can also click the image to see the full size version.
