风绘笔记

Markdown Example

2026-06-15T00:00:00.000Z

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

MDX Integration and M3E Atomic Components

2026-06-15T00:00:00.000Z

:::tip MDX (Markdown + JSX) bridges the gap between static writing and application interfaces. In Shirone, authors can seamlessly mix dynamic logic, reactive Svelte 5 components, and Material 3 design tokens directly within post content. :::

1. Markdown vs MDX Capability Matrix

Feature	Standard Markdown (`.md`)	Shirone MDX (`.mdx`)	Execution Mode
Typography & Structure	Full Support	Full Support	Static SSR
Code Highlighting	Line Numbers, Frames, Collapsible	Line Numbers, Frames, Collapsible	Static SSR (Expressive Code)
Diagrams & Mathematics	Mermaid, KaTeX	Mermaid, KaTeX	Client Enhanced
Callout Admonitions	Note, Tip, Important, Warning, Caution	Note, Tip, Important, Warning, Caution	Static SSR
M3E Display Atoms	Not Available	Direct Integration (``, )	Pure SSR (Zero Client JS)
Svelte 5 Reactive Islands	Not Available	On-Demand Hydration (	`client:visible` Lazy Hydrated
Feedback & Loading Atoms	Not Available	Animated Morph ()	`client:visible` Reactive
Dynamic JSX Expressions	Not Available	Native Evaluation (`{authorInfo.ui}`)	Compile-Time / Client

2. Dynamic Expressions and Data Mapping

MDX allows declaring scoped constants using export const at the top of the file, which can be evaluated inline or mapped across templates:

Core Framework: {authorInfo.framework}
UI Engine: {authorInfo.ui}
Design Tokens: {authorInfo.tokens}
Architecture Pattern: {authorInfo.architecture}

Arrays and collections can be rendered dynamically into grid layouts:

{showcaseItems.map((item, idx) => (

{idx + 1} {item.name}

{item.desc}

))}

3. M3E Display and Layout Primitives (SSR-Only)

In accordance with Shirone's component architecture (docs/atomic-structure.md), stateless display components output clean, accessible semantic HTML with no client-side runtime payload.

3.1 Card Containers (`Card.svelte`)

Filled Card

Default container background with no elevation shadow. Ideal for grouped content blocks.

Elevated Card
Level 1 container elevation with interactive state layering for heightened visual focus.



Outlined Card
A crisp 1px outline boundary providing clean separation on neutral surfaces.

3.2 Accent Bars and Badges (`AccentBar` & `Badge`)

System Announcement

Combine AccentBar with Badge to build prominent visual callouts

M3E v0.192

3.3 Skeleton Placeholders (`Skeleton.svelte`)

For previewing layout skeletons or prototyping async states:

4. Feedback and Loading Indicators

Shirone features full-fidelity Material 3 Expressive motion and feedback atoms:

4.1 Morphing Loading Indicator (`LoadingIndicator.svelte`)

Implemented with androidx.graphics.shapes polygon morphing, providing smooth spring-interpolated 7-shape animations:


Indeterminate Shape Morph


Contained Circular Variant


Determinate Progress (68%)

4.2 Linear and Indeterminate Progress (`ProgressIndicator.svelte`)

Pipeline Compilation 80%

Continuous Dual-Line Animation

5. Interactive Svelte 5 Islands

Components declared with client:visible are lazy-hydrated via IntersectionObserver when entering the viewport:

5.1 Button Matrix (`Button.svelte`)

Filled Button Elevated Tonal Button Outlined Text Button

5.2 Filter Chips and Segmented Buttons (`Chips` & `SegmentedButton`)

M3E Filter Chips

Segmented Control

5.3 Switches, Checkboxes, and Sliders (`Switch`, `Checkbox`, `Slider`)

Switch with Status Icons

Selection Checkboxes

Hue Spectrum Slider

5.4 Input Controls (`TextField.svelte`)

6. Markdown Extension Compatibility

Shirone's SSOT unified plugin pipeline preserves full compatibility with all Markdown extensions:

6.1 GitHub Repository Cards

::github{repo="saicaca/fuwari"}

6.2 Mermaid Architecture Diagrams

flowchart TD
    MDX[MDX Source Entry] --> Compiler["@astrojs/mdx Compiler"]
    Compiler --> Plugins["Remark / Rehype SSOT Pipeline"]
    Plugins --> Islands["Svelte 5 Interactive Islands"]
    Islands --> Swup["Swup Client Navigation Shell"]
    Swup --> Screen["M3E Expressive Article View"]

6.3 Mathematical Expressions (LaTeX / KaTeX)

Inline equation: Mass-energy equivalence $E = mc^2$ and Gaussian integral $\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$.

Block equation:

$$ \mathcal{L}{M3E} = \sum{i=1}^{N} \left( \text{Token}_i \cdot \text{ContrastRatio} \right) + \lambda |\text{MotionElegance}| $$

7. Summary

The native integration of MDX empowers technical writers to build rich, interactive documentation while preserving Shirone's ultra-fast static performance. All components adhere to the Material 3 Expressive token design system, ensuring consistency, accessibility, and visual harmony.