Example Post | A Showcase of Blog Typography

This post is a preview of the blog’s typography. It is not a syntax manual; instead, it brings together the elements I use most often in technical writing: heading hierarchy, emphasis, internal links, inline code, callouts, code blocks, tables, and lists.

Regular quotations keep a quiet, restrained style that works well for a short excerpt or additional context.

1. Headings and body hierarchy

Second-level headings use the primary text color and mark the beginning of each major section. Starting with the second section, a soft divider makes long posts easier to scan without introducing heavy borders.

Third-level headings: topics within a section

Third-level headings also retain the primary text color. Their size and weight separate individual arguments while the body keeps a generous line height. Important text can be bold, and terms such as TTFT or GPU Kernel can use inline code.

Fourth-level headings: finer detail

Fourth-level headings sit closer to the body color and provide only a subtle distinction. Most posts should stop at this depth so that the table of contents remains manageable.

2. Callouts

Callouts share a consistent structure and low-saturation background without a rigid border. A title can be omitted or supplied after the type marker.

The Markdown syntax is:

> [!TIP] An optional custom title
>
> Add the callout content here, including **emphasis** and `inline code`.

3. Code blocks and syntax highlighting

Code blocks use Shiki with separate light and dark themes. The three dots at the top are purely visual and do not take up content space.

TypeScript: typed data processing

type RequestSample = {
  ttft: number;
  outputTokens: number;
  decodeTime: number;
};

export function summarize(samples: RequestSample[]) {
  const totalTokens = samples.reduce(
    (sum, sample) => sum + sample.outputTokens,
    0,
  );

  return {
    meanTTFT: samples.reduce((sum, sample) => sum + sample.ttft, 0) / samples.length,
    tokensPerSecond: totalTokens / samples.reduce(
      (sum, sample) => sum + sample.decodeTime,
      0,
    ),
  };
}

Python: a small statistics function

from statistics import mean

def goodput(latencies: list[float], slo: float) -> float:
    """Return the share of requests completed within the SLO."""
    if not latencies:
        return 0.0

    completed = sum(latency <= slo for latency in latencies)
    return completed / len(latencies)

print(f"Goodput: {goodput([0.8, 1.1, 0.9], slo=1.0):.1%}")

Shell: command-line snippets

# Build and preview an Astro website
npm run build
npm run preview

4. Lists, tasks, and tables

Unordered lists work well for parallel concepts:

• Latency: how long one request waits
• Throughput: how much work the system handles per unit time
• Goodput: effective throughput that meets the service objective

Ordered lists are useful for processes:

1. Fix the test environment and model configuration.
2. Warm up the service to exclude first-run compilation effects.
3. Record P50, P95, and P99 latency separately.

A task list can serve as a practical checklist at the end of a post:

• Define the metrics
• Record the experiment configuration
• Add more concurrency scenarios

Metric	Perspective	Example unit
TTFT	Initial response speed	ms
TPOT	Sustained generation speed	ms / token
Throughput	Overall system capacity	tokens / s
Goodput	Capacity that meets the SLO	requests / s

5. Using these elements while writing

Write ordinary Markdown. Use a [!TYPE] marker on the first line of a callout and put the language name after a code fence; the blog handles the rest of the presentation.

This example appears in the blog timeline like an ordinary post and can remain a reference template for future writing.