Markdown Showcase

This post demonstrates the enhanced markdown features implemented in this blog, including syntax highlighting for code blocks and beautiful custom bullet points.

Code Blocks with Syntax Highlighting

JavaScript

// A simple JavaScript function
function greet(name) {
  return `Hello, ${name}!`;
}

// Using the function
const message = greet('World');
console.log(message); // Output: Hello, World!

// Arrow function example
const multiply = (a, b) => a * b;
console.log(multiply(5, 3)); // Output: 15

Python

# A simple Python function
def greet(name):
    return f"Hello, {name}!"

# Using the function
message = greet("World")
print(message)  # Output: Hello, World!

# List comprehension example
squares = [x**2 for x in range(10)]
print(squares)  # Output: [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p>This is a sample HTML page.</p>
  </main>
  <script src="script.js"></script>
</body>
</html>

CSS

/* Basic styling */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

header {
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 5px;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
}

nav li {
  margin-right: 1rem;
}

a {
  color: #0066cc;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #004499;
  text-decoration: underline;
}

Beautiful Bullet Points

This blog implements custom bullet points with hover effects:

  • First item in the list
  • Second item with some more text to demonstrate wrapping
  • Third item with bold text for emphasis
  • Fourth item with a link to demonstrate styling

Feature List

Here's a feature list with checkmark bullets:

  • Syntax highlighting for multiple languages
  • Copy-to-clipboard functionality for code blocks
  • Beautiful custom bullet points with hover effects
  • Responsive design for all screen sizes
  • Dark mode support

Task List

  • Implement syntax highlighting
  • Add copy-to-clipboard functionality
  • Create custom bullet points
  • Add feature list styling
  • Add more markdown examples

Blockquotes

This is a blockquote with some important information.

It can span multiple paragraphs if needed.

Tables

Feature Description Status
Syntax Highlighting Code blocks with language detection ✅
Copy Button Copy code to clipboard ✅
Custom Bullets Arrow-style bullet points ✅
Feature List Checkmark-style bullet points ✅
Dark Mode Support for light and dark themes ✅

Conclusion

With these enhancements, the blog now provides a much better reading experience for technical content. The syntax highlighting makes code more readable, and the custom bullet points add a touch of personality to the design.

Feel free to use this post as a reference for markdown formatting in your own blog posts!