Markdown Rendering Test

Introduction

This post exists for one reason: to stress-test how this blog renders Markdown.

Every element below is intentional. Headings, lists, blockquotes, code blocks, tables, images, horizontal rules, and embedded media are all present so we can see at a glance whether the typography system is doing its job. If something looks off — too tight, too loose, wrong color, missing spacing — this is where we will catch it.

There is no editorial agenda here. The goal is coverage, not quality. Read it like a checklist, not an essay.

Headings

Good typographic hierarchy makes an article scannable before it is readable. The heading levels below should each have a visually distinct weight, size, and spacing from the one above it.

H3: A Section Within a Section

When content needs a sub-division inside a major section, an H3 provides the structure without competing with the H2 for attention. The font size should be noticeably smaller but still authoritative.

H4: Fine-grained Structure

H4 headings are rare in long-form writing. They signal granular technical content — step-by-step instructions, detailed sub-topics, API reference sections. They should be readable but unobtrusive.

Paragraph text following an H4 should feel comfortable. The spacing between the heading and this sentence is part of the visual contract: close enough to show relationship, loose enough to breathe.

Lists

Unordered List

• First item in the list
• Second item, slightly longer to test line wrapping behavior on narrower viewports where the text might need to flow onto a second line
• Third item
  • Nested item one
  • Nested item two
    • Deeply nested item
    • Another deeply nested item
  • Back to second-level nesting
• Fourth item back at the top level

Ordered List

1. Install dependencies with npm install
2. Copy .env.example to .env and fill in your values
3. Run the development server with npm run dev
4. Open http://localhost:4321 in your browser
5. Make a change to any file and watch it hot-reload

Mixed Nesting

1. First top-level step
   • Sub-task A
   • Sub-task B
     1. Ordered sub-sub-step
     2. Another one
2. Second top-level step
3. Third top-level step

Blockquote

A single-line blockquote:

The best code is no code at all.

A multi-line blockquote with attribution:

There are two ways to write error-free programs. Only the third one works.

Programs must be written for people to read, and only incidentally for machines to execute.

— Harold Abelson, Structure and Interpretation of Computer Programs

A blockquote containing inline formatting:

Writing software is harder than it looks. It is also easier than you think. The gap between those two truths is where most of the interesting work happens.

Code Blocks

JavaScript

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Albert"));
// → Hello, Albert!

TypeScript

interface Post {
  title: string;
  date: Date;
  tags: string[];
  premium?: boolean;
}

async function getLatestPost(locale: string): Promise<Post | null> {
  const posts = await getCollection('posts', (p) =>
    p.id.startsWith(`${locale}/`) && !p.data.draft
  );
  return posts.sort((a, b) =>
    b.data.date.getTime() - a.data.date.getTime()
  )[0]?.data ?? null;
}

Bash

# Install project dependencies
npm install

# Start the dev server
npm run dev

# Build for production
npm run build

# Deploy to Cloudflare Pages
git push origin main

Python

import re
from datetime import datetime

def reading_time(text: str, wpm: int = 200) -> str:
    word_count = len(re.findall(r'\w+', text))
    minutes = max(1, round(word_count / wpm))
    return f"{minutes} min read"

post_body = "Lorem ipsum dolor sit amet, " * 500
print(reading_time(post_body))  # → '3 min read'

JSON

{
  "name": "albert-blog",
  "version": "0.1.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build && pagefind --site dist",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^5.0.0",
    "@astrojs/cloudflare": "^12.0.0"
  }
}

CSS

.prose pre {
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  overflow-x: auto;
}

Inline Code

Inline code should be visually distinct but not jarring. Examples:

• Run npm run build to generate the production output in the dist/ folder.
• The useTranslations(locale) function returns a typed t() helper.
• Set export const prerender = false on any page that needs server-side rendering.
• The --color-text-primary CSS custom property switches automatically with the .dark class.

Strong, Emphasis, and Combined

Bold text should be heavier and slightly darker than the surrounding body copy, drawing the eye without shouting.

Italic text — especially common in a Lora serif face — should curve elegantly. Lora has beautiful italics that reward emphasis.

Bold and italic together should be used sparingly. When it appears, it signals maximum importance.

Strikethrough text signals something removed, corrected, or deliberately negated.

Images

A standard image with alt text:

An image with a caption (using HTML since Markdown has no caption syntax):

A narrow image that should not stretch:

Tables

Blogging Platform Comparison

Markdown Element Status

Horizontal Rule

A horizontal rule below signals a thematic break — a pause before a new idea, or a separator between a main section and an epilogue.

Embedded Video

Raw HTML in Markdown should render cleanly. Here is a YouTube embed:

The responsive wrapper maintains a 16:9 aspect ratio at any width.

Long-form Content

Real articles are long. Typography that looks fine on a short post can break down over thousands of words — line lengths become exhausting, heading spacing feels wrong, paragraph gaps accumulate into something that pushes the reader out.

The paragraphs below are filler, but they serve a purpose: they simulate reading conditions. Skim them and pay attention not to the words but to the visual rhythm of the page.

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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Conclusion

If you have scrolled through this entire post, you have seen every major Markdown element the blog needs to render correctly. Check each one:

1. Do headings have clear visual hierarchy? H2 should dominate, H3 be secondary, H4 subtle.
2. Is body text comfortable to read? 18px Lora at 1.75 line-height should feel like a well-set book page.
3. Do code blocks have syntax highlighting? Light theme in light mode, dark background in dark mode.
4. Is the table legible? Hover states and border spacing should make rows scannable.
5. Do images have appropriate borders and rounded corners?
6. Is the blockquote visually distinct without being too decorative?

If all of the above look right, the markdown rendering system is working. If anything looks off, this post is where you fix it.