Sylvan's Blog
SearchSearch
Toggle light & dark modeOpen Menu
Go back

Hello, World!

1070 words

Welcome to My Blog

This is the first English article. Multilingual features are now configured:

  • 中文 (zh) — Default language
  • English (en)
  • 日本語 (ja)
  • Русский (ru)

This blog is built with Astro 6, supporting dark/light theme switching (Gruvbox palette) and integrated with the Giscus comment system. Code blocks support syntax highlighting, diff annotations, and filename display. Mathematical formulas are rendered via KaTeX, supporting both inline and block-level expressions.

This article aims to test all Markdown syntax rendering while verifying the floating table of contents (TOC) component across various scenarios.

This is an Extremely Long English Heading Specially Designed to Test TOC Text Truncation and Tooltip Features

The TOC has a fixed width of 192px, fitting roughly 22–24 Latin characters at 14px font size. This heading far exceeds that length, so it should be truncated with ... in the TOC, showing the full title on hover. Below is sample body text.

A Similarly Lengthy Third-Level Subheading to Verify Indentation Differences During Truncation

Third-level headings have extra left indentation in the TOC, making the available width even narrower, so truncation should occur sooner. This heading is intentionally verbose to trigger overflow detection.

Short Headings Are Fine

Below are short headings, which should display fully in the TOC without tooltips.

Short Subheading

Also displayed in full.

Multi-Level Heading Hierarchy Test

The TOC only captures h2 and h3, but this article includes deeper levels to verify in-article heading rendering.

Third-Level Heading A

Visible in the TOC, with left indentation.

Fourth-Level Headings Do Not Appear in the TOC

They won’t show up in the TOC but are rendered normally on the page.

Fifth-Level Headings Also Do Not Appear

Deep-level headings are only for structural testing.

Third-Level Heading B

Back to a TOC-visible level.

Markdown Syntax Overview

This section systematically tests the various syntax elements supported by Markdown, from basic text styles to complex code blocks and math formulas.

Text Styles

This is bold text, this is italic text, this is bold italic text, this is strikethrough text, and this is inline code.

Astro Website is the static site generator used by this blog.

Arknights: Endfield

Blockquotes

This is a blockquote, used to showcase the rendering of quoted text.

This is a nested blockquote. Technically feasible, but should be used sparingly in practice.

Blockquotes can also be styled as alerts using the [!TYPE] syntax:

NOTE

This is a note — supplementary information the reader may find useful.

TIP

This is a tip — a helpful suggestion for doing things better or more easily.

IMPORTANT

This is important — key information the reader needs to know.

WARNING

This is a warning — urgent info that needs immediate attention to avoid problems.

CAUTION

This is a caution — advice about potential risks or negative outcomes.

Lists & Layout

Lists are a core tool for organizing information.

Unordered Lists

  • Item one: opening content
  • Item two: another point
    • Nested item A: for elaboration
      • Deeper nesting is also supported
    • Nested item B: another sub-item
  • Item three: back to top level

Ordered Lists

  1. Step one: initialize the project structure
  2. Step two: configure dependencies and build settings
  3. Step three: write core functionality code
    1. Sub-step 3.1 — implement the data layer
    2. Sub-step 3.2 — implement business logic
  4. Step four: write tests to ensure code quality
  5. Step five: deploy to production

Task Lists

  • Completed: configure Astro 6 project
  • Completed: integrate Tailwind CSS v4
  • Todo: add floating TOC component
  • Todo: optimize page performance
  • Todo: write user documentation
  • Todo: configure CI/CD pipeline

Tables & Data Display

Basic Table

Language Code Font Description
Chinese zh Noto Sans SC Optimized for Simplified Chinese
English en Noto Sans Default font for Latin characters
Japanese ja Noto Sans JP Japanese kana and kanji
Russian ru Noto Sans Cyrillic script support

Code Comparison Table

Feature JavaScript TypeScript Python
Type system Dynamic Static Dynamic (optional hints)
Runtime Browser/Node Compiles to JS Interpreter
Package mgmt npm/yarn/pnpm npm/yarn/pnpm pip/poetry
Learning curve Low Medium Low

Code Blocks

Code blocks use Shiki syntax highlighting, supporting: default line numbers, horizontal scrolling by default, opt-in word wrap with hanging indent (wrap), code folding (collapse), filename labels (file), and disabling line numbers (nolines).

Basic Annotations: Line Numbers + file

Line numbers are enabled by default; file="name" displays a filename label in the top-left corner.

def fib(n: int) -> list[int]:
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return afibonacci.py

Disable Line Numbers: nolines

Short code snippets with nolines hide line numbers for brevity.

pnpm install
pnpm dev
pnpm build

Folding + Horizontal Scroll: collapse

collapse folds long code blocks automatically. Without wrap, overly long lines still stay on one line and use horizontal scrolling.

from datetime import datetime


def build_release_report(project: str, commits: list[dict[str, str]], include_review_notes: bool = False, timezone: str = "Asia/Shanghai") -> str:
    """Generate a release report while keeping a long signature for horizontal-scroll testing."""
    lines = [f"# {project} Release Report", f"Generated at: {datetime.now().isoformat()}", ""]
    for commit in commits:
        scope = commit.get("scope", "misc")
        title = commit.get("title", "Untitled commit")
        lines.append(f"- [{scope}] {title} — {commit.get('hash', 'unknown')} — reviewer={commit.get('reviewer', 'none')} — deployment_window={commit.get('window', 'standard')}")
    if include_review_notes:
        lines.append("## Review Notes")
        lines.append("Confirm migration scripts, search indexes, static asset caches, and rollback paths before shipping.")
    return "\n".join(lines)


sample = [{"scope": "build", "title": "Refresh Pagefind index", "hash": "abc123", "reviewer": "Sylvan", "window": "nightly"}]
print(build_release_report("blog.sylvan.cafe", sample, include_review_notes=True))scroll-and-fold.py

Word Wrap + Hanging Indent: wrap

Add wrap when overly long lines should wrap at the container boundary, with the continuation indented to align with the first line of code.

def build_query_url(endpoint: str, filters: dict[str, str], include_archived: bool = False, sort: str = "updated_at:desc") -> str:
    return f"{endpoint}?include_archived={include_archived}&sort={sort}&filters=" + "&".join(f"{key}={value}" for key, value in filters.items())wrap-example.py

CSS

.astro-code {
  @apply rounded-lg border border-border;
  font-family: var(--font-code);
}

.astro-code .line {
  min-height: 1.5rem;
}

Mermaid Diagrams

The blog now supports Mermaid diagrams — use the same fenced code block syntax with the mermaid language tag. Diagrams are rendered to SVG at build time via beautiful-mermaid, using CSS variables to automatically adapt to light/dark themes.

Flowchart

Yes No Start Condition? Action End

Sequence Diagram

Send request Query data Return result Response Client Server Database

Class Diagram

Animal + age: int + gender: String + isMammal(): bool Duck + beakColor: String + swim() + quack() Fish - size: int - canEat()

State Diagram

start success failure retry Idle Processing Done Error

Semantic Colors

Use classDef with CSS variables to apply semantic emphasis colors to nodes, auto-adapting to light/dark themes:

Pass Fail Pass Fail Build Start Syntax Check Build Artifact Compile Error Run Tests Deploy Fix Code

Mathematical Formulas

Inline Formulas

The mass–energy equivalence E=mc2E = mc^2 is perhaps the most famous physics formula. The Pythagorean theorem a2+b2=c2a^2 + b^2 = c^2 is equally familiar.

Block Formulas

The Gaussian integral:

∫0∞e−x2dx=π2\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

The normal distribution PDF:

f(x)=1σ2πe−(x−μ)22σ2f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}

Euler’s identity:

eiπ+1=0e^{i\pi} + 1 = 0

Multi-line Formulas

Using the aligned environment:

∇×B⃗−1c∂E⃗∂t=4πcj⃗∇⋅E⃗=4πρ∇×E⃗+1c∂B⃗∂t=0⃗∇⋅B⃗=0\def\arraystretch{1.5} \begin{aligned} \nabla \times \vec{\mathbf{B}} - \frac{1}{c} \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} &= 4\pi\rho \\ \nabla \times \vec{\mathbf{E}} + \frac{1}{c} \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned}

Extended Features

Footnotes

This is a sentence with a footnote.1 This is another sentence with a footnote.2

HTML Details Panel

Click to expand

This is collapsed content, supporting Markdown syntax.

  • List item
  • Another item
  • Yet another item

The details panel can contain full Markdown, including code blocks and tables.

Horizontal Rules

A horizontal rule uses three or more hyphens, asterisks, or underscores.

Summary & Outlook

This article systematically tested all Markdown syntax supported by the blog. Through the multi-level heading structure, the following floating TOC features were verified:

  • Heading level detection (h2 and h3)
  • Scroll-highlight tracking (IntersectionObserver)
  • Smooth scroll on click (with offset compensation)
  • Multilingual content compatibility

Future improvements include full-text search, tag cloud, and RSS feed optimization.

Footnotes

  1. This is the footnote content. Footnotes are displayed at the bottom of the article. ↩

  2. This is a long footnote to test multi-line footnote rendering. In a multilingual blog, footnote anchor links must correctly handle route prefixes. ↩

Share this post on:
Copy linkX (Twitter)RedditEmailWhatsAppTelegramFacebookWeChatLineQQ
CC BY-NC-SA 4.0
Next Post
2026 Year in Review