Complete Markdown Formatting Guide

Learn how to format your blog posts with code blocks, quotes, bookmarks, and more

Markdown Formatting Guide

This guide demonstrates all the formatting options available for your blog posts.

Code Blocks

Terminal Commands

#!/usr/bin/env bash
# Install development tools
sudo apt update
sudo apt install neofetch htop btop++

# Quality of terminal
echo "Installing QOL tools for terminal and UI"

Code Snippets with Syntax Highlighting

function pause() {
  read -p "$*"
}

// With TypeScript types
interface Config {
  enableDebug: boolean;
  maxRetries: number;
}

Inline Code

Use `inline code` for short code references like npm install or git commit.

Bookmarks and Links

External Links

Check out my photography at Ronny Coste 🔗

Bookmark Cards

Ronny Coste

B.S. in Computer Science and Information Security. Experienced in Web Development, Data Analytics, Photography, Film, and Design.

https://ron.nyc/

Text Formatting

Quotes and Citations

"The best way to predict the future is to invent it." — Alan Kay

Callouts and Alerts

:::info This is an informational callout box for important notes. :::

:::warning Warning! This section requires careful attention. :::

Lists

Unordered List

• Web Development
  • Frontend
  • Backend
• Data Analytics
• Photography
  • Digital
  • Film

Ordered List

1. Install dependencies
2. Configure settings
3. Run the application
   1. Start the server
   2. Open the browser

Tables

Text Styling

Bold text for emphasis Italic text for subtle emphasis Strikethrough for outdated info ==Highlighted text== for important points

Terminal Output

fatal: write error: No space left on device
fatal: fetch-pack: invalid index-pack output

File Structure

project/
├── src/
│   ├── components/
│   │   └── Bookmark.tsx
│   └── pages/
│       └── blog/
└── content/
    └── blog/
        └── example.md

Interactive Elements

Collapsible Details

Task Lists

• Add code formatting
• Implement bookmarks
• Add more interactive elements
• Write documentation

Custom Components

Command Line Interface

Key Combinations

Ctrl + C to copy Cmd + Shift + P to open command palette

Adding some data visualization to my posts

This is a test post to demonstrate data visualizations using Plotly.

Here is a simple bar chart:

Here is a pie chart:

Here is a bespoke chart:

Heres a full on component Visualization

This timeline visualization shows:

• Life stages with different colors and timeframes
• Major events marked with icons and dates
• Interactive elements - click on any event to see details
• Mobile-responsive design that adapts to different screen sizes
• Birthday tracking with special highlighting each year

The timeline is built using React and CSS Grid, demonstrating how to create complex, performant data visualizations in Next.js.