Style Guide

This document showcases all the styling elements available in this blog. Use it as a reference when writing new content.

Typography

Headings

Headings from H2 to H5 are available. H1 is reserved for the post title.

H3 Heading

H4 Heading

H5 Heading

Text Styles

Regular paragraph text looks like this. The font is M PLUS 1p, a clean Japanese-inspired sans-serif that provides excellent readability.

You can use bold text for emphasis, or italic text for subtle emphasis. You can also combine bold and italic when needed.

Here is some inline code within a paragraph. It uses IBM Plex Mono for a clean, technical appearance.

Lists

Unordered Lists

• First item in the list
• Second item with more content to show how longer text wraps
• Third item
  • Nested item one
  • Nested item two
• Fourth item

Ordered Lists

1. First numbered item
2. Second numbered item
3. Third numbered item
   1. Nested numbered item
   2. Another nested item
4. Fourth numbered item

Code Blocks

Inline Code

Use const for constants and let for variables in JavaScript.

Code Blocks with Syntax Highlighting

Here’s a JavaScript example:

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
// Calculate the 10th Fibonacci number
const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

A Rust example:

fn main() {
    let numbers: Vec<i32> = (1..=10).collect();
 
    let sum: i32 = numbers.iter()
        .filter(|&x| x % 2 == 0)
        .sum();
 
    println!("Sum of even numbers: {}", sum);
}

A Python example:

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

Code Block with Title

Use the title metadata to label a code block with a filename:

fn main() {
    println!("Hello from a titled code block!");
}

Code Block with Caption

Use the caption metadata to add a description below a code block:

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

Highlighted Lines

Use {n} or {n-m} to highlight specific lines:

function greet(name) {
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
}

Mathematics

Inline Math

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ and Euler’s identity is $e^{i\pi} + 1 = 0$.

Display Math

The Gaussian integral:

The definition of a derivative:

A matrix equation:

Blockquotes

This is a blockquote. It can be used for citations or to highlight important information.

It can span multiple paragraphs if needed.

Links

Here is a link to an external site and here is a link to another post.

Images

Images should be placed in the src/images directory and imported in MDX files.

Horizontal Rules

Use three dashes to create a horizontal rule:

Tables

Table with Caption

Wrap a table in a <figure> with a <figcaption> to add a caption:

Definition Boxes

Combining Elements

Mathematics and code often go together. For example, implementing the sigmoid function $\sigma(x) = \frac{1}{1 + e^{-x}}$:

import math
 
def sigmoid(x):
    return 1 / (1 + math.exp(-x))

Summary

This style guide covers:

• Typography: Headings, text styles, and emphasis
• Lists: Ordered and unordered, with nesting
• Code: Inline and blocks with syntax highlighting
• Mathematics: Inline and display equations
• Other elements: Blockquotes, links, tables, and definitions

Use these elements to create clear, well-structured technical content.