Markdown Syntax Showcase

This post demonstrates the Markdown and KaTeX syntax rendering capabilities of the blog.

Basic Formatting

Bold text and italic text work as expected. You can also use strikethrough and inline code.

Headings

Headings use the standard Markdown syntax with hash symbols. They render with proper hierarchy and spacing.

Lists

Unordered lists:

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered lists:

1. Step one
2. Step two
3. Step three

Code Blocks

Fenced code blocks with syntax highlighting:

def hello_world
  puts "Hello, world!"
end

Code Playground

Posts can also embed a static code playground with switchable Preview, HTML, CSS, and JS tabs.

<div class="note-card" data-note-card>
  <p class="eyebrow">Static playground</p>
  <h4>Ship tiny demos in posts</h4>
  <button type="button">Make it pop</button>
</div>

.note-card {
  max-width: 22rem;
  padding: 1.25rem;
  border: 2px solid #15141a;
  border-radius: 1rem;
  background: #fff7d6;
  box-shadow: 8px 8px 0 #15141a;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.note-card.is-active {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 #15141a;
}

.note-card .eyebrow {
  margin: 0 0 0.35rem;
  color: #0250bb;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.note-card h4 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

.note-card button {
  border: 0;
  border-radius: 999px;
  background: #0250bb;
  color: white;
  cursor: pointer;
  font-weight: 800;
  padding: 0.7rem 1rem;
}

const card = document.querySelector("[data-note-card]");
const button = card.querySelector("button");

button.addEventListener("click", () => {
  card.classList.toggle("is-active");
  button.textContent = card.classList.contains("is-active") ? "Reset" : "Make it pop";
});

Blockquotes

This is a blockquote. It can span multiple lines and contain other formatting.

Horizontal Rules

Links

Link text goes to external sites. Internal links work too.

Images

Images can be embedded with alt text:

Tables

Math with KaTeX

Inline math: $E = mc^2$

Block math:

[\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}]</p>

More complex expressions:

[\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n]</p>

[\begin{pmatrix} a & b \ c & d \end{pmatrix}]</p>

Combined Example

Here's a quadratic formula solution:

[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}]</p>

And the code to calculate it:

import math

def solve_quadratic(a, b, c):
    discriminant = b**2 - 4*a*c
    if discriminant < 0:
        return None
    x1 = (-b + math.sqrt(discriminant)) / (2*a)
    x2 = (-b - math.sqrt(discriminant)) / (2*a)
    return (x1, x2)

Conclusion

This covers most of the syntax you'll need for writing rich blog posts with mathematical content.