Aonote

Tables and native components

2026-01-12T00:00:00.000Z

This page covers tables and native HTML components. Simple tables can omit a caption; wide or complex tables should use a Table: … caption line.

Tables

Simple table (no caption)

Item	Status
Simple table	Caption optional

| Item | Status |
| :--- | :--- |
| Simple table | Caption optional |

Table with caption

Markdown column alignment
Center	Right	Left
Center (`:-:`)	Right (`-:`)	Left (`:-`)
b	aaaaaaaaa	aaaa
c	aaaa	a

Table: Markdown column alignment

|     Center      |         Right | Left           |
| :-------------: | ------------: | :------------- |
| Center (`:-:`)  | Right (`-:`)  | Left (`:-`)    |
| b               |      aaaaaaaaa | aaaa           |
| c               |           aaaa | a              |

Wide table

Post list horizontal scroll demo
Date	Title	Category	Tags	Status	Link
2026-05-17	Extended Markdown sample	Docs	markdown, style	Published	https://example.com/posts/markdown-style-example
2026-05-18	Pure CSS component test	UI	css, html, static	Draft	https://example.com/posts/css-only-components

Table: Post list horizontal scroll demo

| Date | Title | Category | Tags | Status | Link |
| :--- | :--- | :--- | :--- | :--- | :--- |
| 2026-05-17 | Extended Markdown sample | Docs | markdown, style | Published | https://example.com/posts/markdown-style-example |
| 2026-05-18 | Pure CSS component test | UI | css, html, static | Draft | https://example.com/posts/css-only-components |

Native collapsible

Collapsible content using native HTML `

<details>
<summary>Show more</summary>
Collapsible content using native HTML `<details>`.
</details>

Code blocks and media examples

2026-01-11T00:00:00.000Z

This page focuses on media and code presentation: images, admonitions, language labels, file titles, line highlights, diff markers, and long lines.

Admonitions

Tip

VuePress/VitePress-style tip admonition.

Note

Python-Markdown-style note admonition.

Warning

Use for information readers should not miss.

Danger

Use for destructive actions or serious risks.

:::: tip Tip
VuePress/VitePress-style `tip` admonition.
::::

!!! note "Note"
    Python-Markdown-style `note` admonition.

!!! warning "Warning"
    Use for information readers should not miss.

!!! danger "Danger"
    Use for destructive actions or serious risks.

Images

Caption text for image styling tests.

![Local SVG placeholder with hills and “Markdown Image Example”](/static/example-image.svg)
*Caption text for image styling tests.*

Code

Inline code: code

Inline code: `code`

Plain fence

Sample text here...

Titled block

def greet(name):
    return f"Hello, {name}!"

```python title="hello.py"
def greet(name):
    return f"Hello, {name}!"
```

Line highlights

def greet(name):
    message = f"Hello, {name}!"
    print(message)
    return message

```python title="highlight.py" hl_lines="2 4-5"
def greet(name):
    message = f"Hello, {name}!"
    print(message)
    return message
```

Diff highlights

 function greet(name) {
Removed line: -  return "Hello, " + name;
Added line: +  return `Hello, ${name}!`;
 }

```diff title="example.patch"
 function greet(name) {
-  return "Hello, " + name;
+  return `Hello, ${name}!`;
 }
```

Indented code block

// Some comments
line 1 of code
line 2 of code
line 3 of code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

Nested fences

Outer fence

```
Sample text here...
```

Long line

curl "https://example.com/api/articles?category=markdown&tag=markdown&include=metadata,summary,content,links,license&sort=published_at_desc"

```bash
curl "https://example.com/api/articles?category=markdown&tag=markdown&include=metadata,summary,content,links,license&sort=published_at_desc"
```

Markdown showcase

2026-01-10T00:00:00.000Z

Markdown should feel calm when it is read and expressive when it is scanned. This page is arranged as a compact visual sample for screenshots: typography first, then rich blocks, code, data, math, and notes.

Use this page as a quick visual checklist after changing typography, colors, spacing, or Markdown plugins.

A good writing interface keeps structure visible without letting decoration overpower the text.

Aonote theme preview

Headings

Level 1 heading for article sections

Level 2 heading with a calm accent

Level 3 heading for grouped ideas

## Level 1 heading for article sections
### Level 2 heading with a calm accent
#### Level 3 heading for grouped ideas

Typography

Readable paragraphs benefit from generous line height, modest measure, and consistent rhythm. Inline elements should be visible but not noisy: bold text for emphasis, italic text for nuance, ~~deleted text~~ for revision, inline_code() for symbols, highlighted text for attention, and ⌘ + K for shortcuts.

Classic emoji convert cleanly: 😉 😢 😆 😋

Shorthand emoji also work: 😎 🙂 😘 ☹️ 🙂 ☹️ 😉

This sentence ends with a manual break
so the next line stays visually connected.

Links and Media

Home, Archive, and About are internal links. Long URLs such as https://astro-theme-aonote.vercel.app/posts/markdown-basics/ should wrap without breaking the layout.

A local SVG image with an automatic caption style.

Lists

Reading checklist

Keep paragraphs short enough to scan.
Use headings to build a visible outline.
Group related examples before showing source.
Let code blocks breathe with enough vertical spacing.

Ordered workflow

Draft the article.
Add supporting examples.
Preview light and dark mode.
Publish only after checking anchors, feeds, and mobile layout.

Task list

Completed task: Typography renders consistently Typography renders consistently
Completed task: Code blocks show titles and language labels Code blocks show titles and language labels
Incomplete task: Final screenshot has enough visual variety Final screenshot has enough visual variety

Definition list

Static site: Built from HTML, CSS, and assets only, so reading does not require a client-side app runtime.
RSS: A feed format that readers can subscribe to for updates.

Tables

Markdown features in this theme
Feature	Example	Status
Typography	headings, emphasis, inline code	Polished
Components	admonitions, task lists, captions	Ready
Navigation	heading anchors and side TOC	Ready
Feeds	RSS and Atom output	Ready

Admonitions

A note is useful for background context that helps readers understand the article.

A warning should be short, specific, and visually distinct without feeling alarming.

A danger block is reserved for destructive actions, security risks, or data loss.

Code

type ThemeMode = 'light' | 'dark';

export function describeTheme(mode: ThemeMode) {
  const accent = mode === 'dark' ? '#80cbc4' : '#00796b';

  return {
    mode,
    accent,
    readingWidth: '68ch',
  };
}

Removed line: - .post-content h3 { color: var(--color-main-text); }
Added line: + .post-content h3 { color: var(--color-primary); }

Math

Inline math stays in the sentence: $E = m c^{2}$ .

Display math has its own rhythm:

 $\int_{0}^{1} x^{2} d x = \frac{1}{3}$

Block quotes

Quotes can be simple, but they should still respect the article rhythm.

Nested quotes remain readable when spacing and borders are restrained.

Markdown layout sample

Footnotes

Footnotes are useful for citations, side notes, and links that should not interrupt the main paragraph.¹

Mixed scripts

This paragraph mixes 中文, English, digits 123, inline code inline_code(), and a long URL https://example.com/path/to/resource so line height, wrapping, punctuation, and mixed-script spacing can be reviewed together.

The page intentionally mixes compact examples with a few longer blocks so screenshots can show the theme's rhythm rather than only isolated syntax samples.

Footnote body text for asides, sources, or further reading. ↩

Welcome to Aonote

2025-12-01T00:00:00.000Z

astro-theme-aonote is an Astro port of runsli/Aonote: the Python static blog’s layout and Markdown features rebuilt on Astro, ready for Vercel, Netlify, GitHub Pages, or any static host.

The goal is not a heavy web app—it is a calm, maintainable writing baseline. Content stays in Markdown, styles in CSS, and the build output is plain static files you can publish anywhere.

Good fits

Personal blogs: learning notes, projects, reading lists, long-form thinking.
Technical notes: snippets, postmortems, tool configs, and workflows.
Lightweight docs: changelogs, guides, and design decisions.
Existing Astro sites: reuse Aonote’s layout and Markdown extensions without a Python build script.

If you already use Astro—or want its deploy and plugin ecosystem—this branch is usually simpler than the upstream Python generator.

Included out of the box

Home, posts, archive, tags, about, and 404 pages.
Markdown: GFM, Shiki highlighting, tables, footnotes, task lists, admonitions, and MathML math.
RSS, Atom, sitemap, canonical URLs, Open Graph, and Twitter cards.
Light/dark theme, mobile navigation, and in-page table of contents.

Getting started

Edit site name, description, author, and baseUrl in src/site.config.ts.
Add or replace posts under src/content/posts/ (kebab-case filenames recommended).
Tune colors, fonts, and spacing in src/styles/aonote.css if needed.
Run npm run dev locally or npm run build to produce dist/.
Deploy dist/ to your static host.

To make the site yours, start by replacing this welcome post and about.md, then trim the sample posts.

Upstream mapping

Upstream (Python)	This branch (Astro)
`config.py`	`src/site.config.ts`
`markdown/`	`src/content/posts/`
`templates/base.html`	`src/layouts/BaseLayout.astro`
`assets/style.css`	`src/styles/aonote.css`
`python autobuild.py`	`npm run build`

We aim to track upstream Aonote; differences mostly come from Astro’s content and build pipeline. Issues and PRs for parity gaps are welcome.