Sylvan's Blog
SerĉiSerĉi
Ŝalti helan/malhelan reĝimonMalfermi menuon
Reiri

Saluton, Mondo!

993 vortoj

Jen la unua Esperanto-artikolo. Plurlingvaj funkcioj nun estas agorditaj:

  • 中文 (zh) — Defaŭlta lingvo
  • English (en)
  • 日本語 (ja)
  • Русский (ru)
  • Esperanto (eo)

Ĉi tiu blogo estas konstruita per Astro 6, subtenas malhelan/helan teman ŝaltadon (Gruvbox-paletro) kaj estas integrita kun la komenta sistemo Giscus. Kodo-blokoj subtenas sintaksan emfazon, diff-ajn prinotojn kaj dosiernoman montradon. Matematikaj formuloj estas bildigataj per KaTeX, subtenante kaj enliniajn kaj bloknivelajn esprimojn.

Ĉi tiu artikolo celas testi ĉiujn Markdown-sintaksajn bildigojn dum kontrolado de la flosanta enhavtabelo (TOC) tra diversaj scenaroj.

Ĉi Tiu Estas Ekstreme Longa Esperanta Titolo Speciale Dizajnita por Testi TOC-an Tekstan Trunkigon kaj Konsiletojn

La TOC havas fiksitan larĝon de 192px, taŭgigante proksimume 22–24 Latinajn signojn ĉe 14px-tipargrando. Ĉi tiu titolo multe superas tiun longon, do ĝi devus esti trunkita per ... en la TOC, montrante la plenan titolon ĉe ŝvebo. Malsupre estas ekzempla korpa teksto.

Simile Longega Tria-Nivela Subtitolo por Kontroli Krommarĝenajn Diferencojn Dum Trunkigo

Tria-nivelaj titoloj havas kroman maldekstran krommarĝenon en la TOC, igante la haveblan larĝon eĉ pli mallarĝa, do trunkigo devus okazi pli frue. Ĉi tiu titolo estas intence multvorta por ekigi superfluan detekton.

Mallongaj Titoloj Estas Bone

Malsupre estas mallongaj titoloj, kiuj devus aperi plene en la TOC sen konsiletoj.

Mallonga Subtitolo

Ankaŭ montrata plene.

Plurnivela Titola Hierarkia Testo

La TOC nur kaptas h2 kaj h3, sed ĉi tiu artikolo inkluzivas pli profundajn nivelojn por kontroli enartikolan titolan bildigon.

Tria-Nivela Titolo A

Videbla en la TOC, kun maldekstra krommarĝeno.

Kvar-Nivelaj Titoloj Ne Aperas en la TOC

Ili ne aperos en la TOC sed estas normale bildigataj sur la paĝo.

Kvin-Nivelaj Titoloj Ankaŭ Ne Aperas

Profundnivelaj titoloj estas nur por struktura testado.

Tria-Nivela Titolo B

Reen al TOC-videbla nivelo.

Markdown-Sintaksa Superrigardo

Ĉi tiu sekcio sisteme testas la diversajn sintaksajn elementojn subtenatajn de Markdown, de bazaj tekstostiloj ĝis kompleksaj kodo-blokoj kaj matematikaj formuloj.

Tekstostiloj

Jen grasa teksto, jen kursiva teksto, jen grasa kursiva teksto, jen trastreka teksto, kaj jen enlinia kodo.

Ligiloj kaj Bildoj

Astro Retejo estas la statika reteja generatoro uzata de ĉi tiu blogo.

Arknights: Endfield

Blokcitaĵoj

Jen blokcitaĵo, uzata por montri la bildigon de citita teksto.

Jen ingita blokcitaĵo. Teknike ebla, sed devus esti ŝpareme uzata praktike.

Krome, blokcitaĵoj povas esti stiligitaj kiel atentigoj per la sintakso [!TYPE]:

NOTE

Jen noto — suplementa informo, kiun la leganto eble trovos utila.

TIP

Jen konsileto — helpema sugesto por fari aferojn pli bone aŭ pli facile.

IMPORTANT

Jen grava — ŝlosila informo, kiun la leganto bezonas scii.

WARNING

Jen averto — urĝa informo, kiu bezonas tujan atenton por eviti problemojn.

CAUTION

Jen singardo — konsilo pri eblaj riskoj aŭ negativaj rezultoj.

Listoj kaj Aranĝo

Listoj estas kerna ilo por organizi informojn.

Neordigitaj Listoj

  • Elemento unu: malferma enhavo
  • Elemento du: alia punkto
    • Ingita elemento A: por plia ellaboro
      • Pli profunda ingado ankaŭ estas subtenata
    • Ingita elemento B: alia sub-elemento
  • Elemento tri: reen al supra nivelo

Ordigitaj Listoj

  1. Paŝo unu: pravalorizi la projekto-strukturon
  2. Paŝo du: agordi dependecojn kaj konstruajn agordojn
  3. Paŝo tri: skribi kernan funkcian kodon
    1. Sub-paŝo 3.1 — realigi la datumtavolon
    2. Sub-paŝo 3.2 — realigi komercan logikon
  4. Paŝo kvar: skribi testojn por certigi kodo-kvaliton
  5. Paŝo kvin: deploji al produkto

Taskolistoj

  • Farita: agordi Astro 6-projekton
  • Farita: integri Tailwind CSS v4
  • Farenda: aldoni flosantan TOC-komponanton
  • Farenda: optimumigi paĝan rendimenton
  • Farenda: skribi uzantan dokumentaron
  • Farenda: agordi CI/CD-dukton

Tabeloj kaj Datummontrado

Baza Tabelo

Lingvo Kodo Tiparo Priskribo
Ĉina zh Noto Sans SC Optimumigita por Simpligita Ĉina
Angla en Noto Sans Defaŭlta tiparo por Latinaj signoj
Japana ja Noto Sans JP Japanaj kanaoj kaj kanĵioj
Rusa ru Noto Sans Subteno de cirilaj signoj

Kodo-Kompara Tabelo

Trajto JavaScript TypeScript Python
Tipsistemo Dinamika Statika Dinamika (laŭvolaj hintoj)
Rultempo Foliumilo/Node Kompilas al JS Interpretilo
Pakaĵadministro npm/yarn/pnpm npm/yarn/pnpm pip/poetry
Lernkurbo Malalta Meza Malalta

Kodo-Blokoj

Kodo-blokoj uzas Shiki-sintaksan emfazon, subtenante: defaŭltajn lininumerojn, defaŭltan horizontalan rulumadon, laŭpetan vorto-ĉirkaŭigon kun wrap (pendanta krommarĝeno), kodo-faldadon (collapse), dosiernomajn etikedojn (file), kaj malŝaltadon de lininumeroj (nolines).

Bazaj Prinotoj: Lininumeroj + file

Lininumeroj estas ebligitaj defaŭlte; file="name" montras dosiernoman etikedon en la supra-maldekstra angulo.

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

Malŝalti Lininumerojn: nolines

Mallongaj koderpecoj kun nolines kaŝas lininumerojn por koncizeco.

pnpm install
pnpm dev
pnpm build

Faldado + Horizontala Rulumado: collapse

collapse aŭtomate faldas longajn kodo-blokojn. Sen wrap, tro longaj linioj restas en unu linio kaj uzas horizontalan rulumadon.

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

Vorto-ĉirkaŭigo + Pendanta Krommarĝeno: wrap

Aldonu wrap kiam tro longaj linioj devas ĉirkaŭiĝi ĉe la uja limo, kun la daŭrigo krommarĝenigita por vicigi kun la unua linio de kodo.

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-diagramoj

La blogo nun subtenas Mermaid-diagramojn — uzu la saman baritan kodosintakson kun la mermaid lingvoetikedo. Diagramoj estas bildigitaj al SVG dum konstruado per beautiful-mermaid, uzante CSS-variablojn por aŭtomate adaptiĝi al hela/malhela etoso.

Fludiagramo

Jes Ne Komenco Kondiĉo? Ago Fino

Sekvencodiagramo

Sendu peton Informpetu datumojn Redonu rezulton Respondo Kliento Servilo Datumbazo

Klasodiagramo

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

Statodiagramo

starto sukceso fiasko reprovo Atendado Prilaborado Preta Eraro

Semantikaj Koloroj

Uzu classDef kun CSS-variabloj por apliki semantikajn emfazkolorojn al nodoj, aŭtomate adaptiĝante al hela/malhela etoso:

Sukceso Eraro Sukceso Eraro Komenco de konstruado Kontrolo de sintakso Konstrui artifakton Kompila eraro Ruli testojn Eliversurmeti Ripari kodon

Matematikaj Formuloj

Enliniaj Formuloj

La maso-energia ekvivalento E=mc2E = mc^2 estas eble la plej fama fizika formulo. La Pitagora teoremo a2+b2=c2a^2 + b^2 = c^2 estas same konata.

Blokaj Formuloj

La Gaŭsa integralo:

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

La probablodensa funkcio de la normala distribuo:

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

La Euler-a identeco:

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

Plurliniaj Formuloj

Uzante la medion aligned:

∇×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}

Plilongigitaj Trajtoj

Piednotoj

Jen frazo kun piednoto.1 Jen alia frazo kun piednoto.2

HTML-Detalpanelo

Klaku por etendi

Jen faldita enhavo, subtenanta Markdown-sintakson.

  • Listelemento
  • Alia elemento
  • Ankoraŭ alia elemento

La detalpanelo povas enhavi plenan Markdown, inkluzive de kodo-blokoj kaj tabeloj.

Horizontalaj Reguloj

Horizontala regulo uzas tri aŭ pli da streketoj, asteriskoj aŭ substrekoj.

Resumo kaj Perspektivo

Ĉi tiu artikolo sisteme testis ĉiujn Markdown-sintaksojn subtenatajn de la blogo. Per la plurnivela titola strukturo, la sekvaj flosantaj TOC-trajtoj estis kontrolitaj:

  • Titolnivela detekto (h2 kaj h3)
  • Ruluma emfaza spurrado (IntersectionObserver)
  • Glata rulumo ĉe klako (kun deŝova kompenso)
  • Plurlingva enhava kongrueco

Estontaj plibonigoj inkluzivas plentekstan serĉon, etikedan nubon kaj RSS-fluon optimumigon.

Footnotes

  1. Jen la enhavo de la piednoto. Piednotoj estas montrataj ĉe la malsupro de la artikolo. ↩

  2. Jen longa piednoto por testi plurlinian piednotan bildigon. En plurlingva blogo, piednotaj ankroligiloj devas ĝuste trakti vojprefiksojn. ↩

Kundividi ĉi tiun afiŝon ĉe:
Kopii ligilonX (Twitter)RedditRetpoŝtoWhatsAppTelegramFacebookWeChatLineQQ
CC BY-NC-SA 4.0
Sekva afiŝo
2026 Jara Revizio