Markdown Style Guide

This post serves as a living reference for every content element supported on this blog. Use it to see how headings, text styles, lists, code, and more render on the site.

Headings

Headings help structure your content. Use them to break up sections and create a clear hierarchy.

Third-level heading

Use these for subsections within a main topic.

Fourth-level heading

Use sparingly, for finer detail within a subsection.

Text Formatting

You can write in bold for emphasis, italics for subtle stress, or combine them for bold italics. You can also use strikethrough for corrections or outdated info.

Inline code is useful when referencing variable names, file paths like src/app/page.tsx, or terminal commands like npm run dev.

Links

Here is an inline link within a sentence. Links are underlined by default and the underline disappears on hover.

Blockquotes

The best way to predict the future is to invent it.

Blockquotes are great for highlighting key ideas, quotes, or important callouts within your writing.

You can also write longer blockquotes that span multiple lines. They will all be grouped together under the same left border and styled consistently.

Lists

Unordered list

• First item in the list
• Second item with more detail
• Third item
  • Nested item under the third
  • Another nested item

Ordered list

1. Define the problem clearly
2. Research existing solutions
3. Build a prototype
4. Test with real users
5. Iterate based on feedback

Code Blocks

Use fenced code blocks for longer snippets. They render in a monospace font with a dark background.

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

console.log(greet("World"));

Another example with a different language:

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem;
}

Horizontal Rule

Use a horizontal rule to create a visual break between sections.

Tables

Images

Images placed in posts render with rounded corners and full width.

Combining Elements

You can freely mix elements. For example, here is a list with inline code and links:

1. Install dependencies with npm install
2. Read the official docs for setup
3. Run npm run dev to start the development server

Tip: You can nest bold text, italic text, and inline code inside blockquotes too.

That covers all the content elements available. Refer back to this post anytime you need to check how something will look.