This series previews the Markdown extensions currently supported by SoraPaper. This article focuses on block components that help organize content and interactive information.
Blockquotes
Standard Markdown blockquotes begin with > and work well for excerpts, opinions or source notes.
The visual layer should feel present, but never louder than the writing.
Blockquotes also support multiple paragraphs and lists:
The first paragraph holds the main point.
- Keep the content clear.
- Let the visual layer serve the reading experience.
Notice Blocks
Notice blocks use the ::: syntax consistently. The current types are note, info, tips, warning, success and error.
Note
Info
Tips
Warning
Success
Error
Custom Titles
Add a title in square brackets after the type to override the default title.
Markdown Inside Blocks
Notice blocks can still contain common Markdown such as lists, links, inline code and code blocks.
Details Blocks
Details blocks are useful for supplementary notes, longer explanations or content that does not need to be expanded by default.
Expand for More
Here is the content of a details block. It can contain regular paragraphs, lists and code blocks.
- Good for optional information.
- Uses the browser’s native
details/summarysemantics. - Requires no additional client-side JavaScript.
Expanded by Default
This details block is expanded by default. It can highlight supplementary content while keeping the same structure.
Tabs
Tabs use ::::tabs to wrap multiple :::tab[title] blocks and are useful for showing different versions of the same content.
A tabs group consists of one ::::tabs container and multiple :::tab[title] child blocks. Each tab must be closed independently.
The first tab is selected by default. Switching tabs requires no client-side JavaScript, and the content remains in the article flow.
Each tab can still contain regular Markdown such as bold text, lists and code blocks.
Encrypted Block Syntax
Encrypted blocks wrap content with :::encrypted and :::. The password is entered to unlock the page, and is not written to the final HTML after the build.
:::encrypted[Private Note]{password="Password hint"}
This content enters the page in encrypted form after the build and is unlocked in the browser after entering the password.
```ts
const secret = "encrypted at build time";
```
:::加密内容Encrypted content