Welcome! This is my first post on this blog — and already a comprehensive one. Below you’ll find a tour of everything this blog can handle visually. Enjoy!

Headings

H1 — Page title

H2 — Section

H3 — Subsection

H4 — Detail

H5 — Small heading

H6 — Smallest heading

Text formatting

Regular paragraph text looks like this. You can make text bold, italic, or bold and italic at the same time. ~~Strikethrough text~~ is also supported, as is inline code for technical terms.

This is a second paragraph. Text with a hard line break
starts on the next line (two spaces at the end).

Lists

Unordered list

First item
Second item
- Nested item
- Another nested item
  - Even deeper
Third item

Ordered list

Step one: plan the project
Step two: build a prototype
1. Create a sketch
2. Validate with users
Step three: iterate based on feedback

Task list

[x] Set up blog
[x] Write first post
[ ] Test RSS feed
[ ] Enable comments

Blockquotes

Writing forces you to think precisely. If you can’t write something down, you don’t understand it well enough yet.

Nested blockquote:

This is a blockquote.

And this is a nested blockquote inside it.

Back to the first level.

Code

Inline code

Use npm run dev to start the development server. The configuration lives in astro.config.mjs.

Code block without language

This is a plain code block
without syntax highlighting.
Useful for output or configuration.

JavaScript

function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

greet('Kevin');

TypeScript

interface Post {
  slug: string;
  title: string;
  publishedDate: string;
  draft: boolean;
}

async function getPost(slug: string): Promise<Post | null> {
  const entry = await reader.collections.blogposts.read(slug);
  return entry ?? null;
}

Astro component

---
import BaseLayout from '../layouts/BaseLayout.astro';
const title = 'Hello world';
---

<BaseLayout title={title}>
  <h1>{title}</h1>
  <p>Welcome to my Astro site.</p>
</BaseLayout>

CSS

:root {
  --color-accent: #6366f1;
  --font-ui: 'Inter', system-ui, sans-serif;
}

.post-card {
  border-radius: 0.75rem;
  background: var(--color-surface);
  transition: transform 200ms ease;
}

.post-card:hover {
  transform: translateY(-2px);
}

Bash

# Install dependencies
npm install

# Start the dev server
npm run dev

# Build for production
npm run build

JSON

{
  "name": "kevin-nl",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}

Tables

Framework	Language	Rendering	Popular since
Astro	JS/TS	SSG / hybrid	2022
Next.js	JS/TS	SSR / SSG	2016
SvelteKit	Svelte	SSR / SSG	2021
Nuxt	Vue	SSR / SSG	2016

Aligned columns:

Left aligned	Centered	Right aligned
Alpha	Beta	Gamma
100	50	1

Links and images

Links

A regular link to the Astro website.

A link with a title: Astro documentation.

Reference links also work: Kevin’s GitHub

Images

![A placeholder image](https://placehold.co/800x400/6366f1/ffffff?text=Cover+Image)

Horizontal rule

Three variants, all the same result:

Footnotes

This is text with a footnote.[^1] And another one.[^note]

[^1]: This is the footnote at the bottom of the page. [^note]: Footnotes can also have a name instead of a number.

Definition list (GFM extension)

Astro : A modern static site framework for building fast websites.

MDX : Markdown with JSX — you can use React components inside your Markdown files.

SSG : Static Site Generation — pages are built at deploy time, not per request.

Special characters and escaping

Sometimes you want to show characters literally: *no italic*, `no code`, [no link].

Closing

Those were all the markdown formatting options this blog supports. From simple bold text to nested code blocks with syntax highlighting — everything is ready to make your posts look great.

Start simple. Write honestly. Publish regularly.

Until the next post.