Mphstar.

Back to Notes

Markdown Elements Guide

Welcome to the comprehensive Markdown demonstration! This note exists simply to verify that all typographic elements compile and render perfectly under our brutalist monochrome CSS theme.

1. Text Formatting

You can easily emphasize text using Bold, Italic, or even Both. If you need to scratch something out, use Strikethrough. Highlighting inline code looks like this: console.log('Hello!').

2. Blockquotes

Whenever you want to emphasize a specific quote or a crucial piece of technical advice:

“The most disastrous thing that you can ever learn is your first programming language.” — Edsger W. Dijkstra

3. Lists Organization

Unordered List (Bullet Points)

  • Frontend Development
    • React & Vue
    • Astro (What we use here!)
  • Backend Development
  • DevOps

Ordered List (Numbered)

  1. Design the wireframe.
  2. Build the structural layout.
  3. Apply styling and interactions.

4. Code Blocks & Syntax

Here is an example of a multi-line Javascript code snippet:

// Fetch user data asynchronously
async function getUserData(username) {
  try {
    const response = await fetch(`https://api.github.com/users/${username}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Failed to fetch:", error);
  }
}

5. Standard Tables

Using tables is perfect for comparing standard data sets:

FrameworkArchitectureMain FocusPerformance
AstroIslandsContent-drivenExcellent
Next.jsApp/Pages RouterFull-stackGreat
VuereactivitySPAsFast

6. Embedded Media

Finally, ensuring that images scale beautifully inside our articles:

Placeholder Image representing clean code


Hope this robust documentation helps! As you can see, everything from the horizontal ruled line above to the lists and headings is consistently themed.

Gallery Image