Rendering Test

The silent page awaits the waking dawn.

Rendering Test - Teror的客栈

Rendering Test

Shiroi Markdown Feature Test Document

This is a comprehensive document to test all the Markdown syntax features supported by the Shiroi blog system.

Basic Markdown Syntax
Extended Text Formats
Lists & Tasks
Tables
Mathematical Formulas (KaTeX)
Code Blocks
Containers & Layouts
Rich Links
Mentions & Social
Alert Boxes
Definition Lists
Footnotes
Multimedia
Advanced Features

Basic Markdown Syntax

Level 1 Header H1

Level 2 Header H2

Level 3 Header H3

Level 4 Header H4

Level 5 Header H5

Level 6 Header H6

Text Styles

This is a regular text.

This is bold text

This is italic text

This is bold italic text

~~This is strikethrough text~~

Links & Images

This is a link

Horizontal Rule

Blockquote

This is a blockquote.
Blockquotes can contain multiple paragraphs.
— Source

Extended Text Formats

Mark (Highlight)

This is highlighted text, used for emphasis.

Inserted Text

This is newly inserted content.

Spoiler Text

||spoiler|| text.

Inline Code

Use console.log() to output debug information.

Lists & Tasks

Unordered List

Item 1
Item 2
- Subitem 2.1
- Subitem 2.2
  - Nested Subitem 2.2.1
Item 3

Ordered List

Step 1
Step 2
1. Substep 2.1
2. Substep 2.2
Step 3

GFM Task List

Task to complete
Completed task
Another completed task
Task in progress

Tables

Basic Table

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Alignment

Left Align	Center Align	Right Align
Content A	Content B	Content C
Data 1	Data 2	Data 3

Complex Table Example

Expression	Example	Description
File	`options.txt`	Text file
Variable	`<version>`	Placeholder
Must Delete	`libraries ***`	Asterisk marked

Mathematical Formulas (KaTeX)

Inline Formula

This is an inline formula: $c = pmsqrt{a^2 + b^2}$

Einstein's famous equation: $E = mc^2$

Polynomial: $P(x) = a_nx^n+a_{n-1}x^{n-1} + dots + a_1x + a_0$

Block Formula

rac{d}{dx}int_{a}^{x} f(t)dt = f(x)

sum_{i=1}^{n} i = rac{n(n+1)}{2}

Pleft(U,T ight)=100left.left(0.6minleft(1,rac{U-0.70}{0.90-0.70} ight)+0.4minleft(1,rac{T-4000}{14000-4000} ight) ight) ight.

Code Blocks

JavaScript Code

CodeBlock Loading...

TypeScript Code

CodeBlock Loading...

Python Code

CodeBlock Loading...

Shell Script

CodeBlock Loading...

Mermaid Flowchart

CodeBlock Loading...

Mermaid Sequence Diagram

CodeBlock Loading...

Containers & Layouts

Gallery Image Gallery

Grid Layout

Grid Item 1

This is the content of the first grid item.

Grid Item 2

This is the content of the second grid item.

Grid Item 3

This is the content of the third grid item.

Image Grid

Masonry Layout

Rich Links

Shiroi supports automatic detection and rendering of links from various platforms.

Twitter/X

YouTube

CodeSandbox

Regular Link

TRPC Documentation

GitHub User Mention

Innei

Twitter User Mention

pseudoyu

Telegram User Mention

SomeUser

Auto Display Name

InneiInneiInnei

Alert Boxes

NOTE

Note

This is a note, meant to inform the user of important information they need to know.

TIP

Tip

This is a tip, providing guidance to the user on how to complete the task.

IMPORTANT

Important

This is important information, the user needs to pay special attention to this to achieve their goal.

WARNING

Warning

This is a warning, the user needs to act immediately to avoid issues.

CAUTION

Caution

This is a caution, alerting the user about risks or potential negative results of their actions.

Definition Lists

Basic Definitions

Term 1 : This is the definition for Term 1. It can span multiple lines.

Term 2 : This is the first definition for Term 2. : This is the second definition for Term 2.

Formatted Definitions

HTML : Hyper Text Markup Language : Standard markup language for creating web pages.

CSS : Cascading Style Sheets : Style sheet language for describing web page layouts.

Compact Style

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Footnotes

This is a text with footnotes^{[^1]}. You can place footnote references anywhere in the text^{[^2]}.

Footnotes will appear at the end of the document.

Multimedia

Video

You can directly use the <video> tag or a video link.

LinkCard Component

Advanced Features

Abbreviation

This is an example of HTML, which will be automatically marked as an abbreviation.

*Text Markup Language

Details Folding

Tabs

This is the content for the first tab.

Excalidraw Sketch

Whiteboard loading…

React Remote Component Rendering

Component Loading...

Comprehensive Testing

This section combines various features for testing.

Nested Feature Test

Tip

Use highlight and ~~spoiler~~ text in the blockquote.

Formula: $E = mc^2$

Code: const x = 10

Complex Content in Lists

Item 1: Contains code and italic
- Subitem 1: highlighted text
- Subitem 2: Link Text
Item 2: Mathematical formula $sum_{i=1}^{n} i$
Item 3:
CodeBlock Loading...

Formatting in Tables

Feature	Syntax	Example
Bold	`text`	Bold
Italic	`text`	Italic
Code	`code`	`code`
Highlight	`==text==`	highlight
Formula	$formula$	$x^2$

Test Summary

This document covers all special Markdown syntax supported by Shiroi:

✅ Basic Syntax: Headers, paragraphs, lists, links, images, tables, blockquotes ✅ Extended Text: Highlighting (==), Insertion (++), Spoilers (||) ✅ Task Lists: GFM Tasks ✅ Mathematical Formulas: KaTeX Inline and Block ✅ Code Highlighting: Shiki supports multiple languages ✅ Containers & Layouts: Banner, Gallery, Grid, Masonry ✅ Rich Links: GitHub, Twitter, YouTube automatic recognition ✅ Social Mentions: GH, TW, TG user mentions ✅ Alert Boxes: GitHub Alerts (NOTE/TIP/WARNING etc.) ✅ Definition Lists: Term definitions ✅ Footnotes: Citation references ✅ Advanced Features: Tabs, Excalidraw, Remote Components

Last Updated: February 17, 2026 Project: Shiroi (Shiroi) Document Version: 1.0.0

1: This is the first footnote content.
Return1
2: This is the second footnote content, and it can include more detailed information.
Return2

Shiroi Markdown Feature Test Document

This is a comprehensive document to test all the Markdown syntax features supported by the Shiroi blog system.

Basic Markdown Syntax
Extended Text Formats
Lists & Tasks
Tables
Mathematical Formulas (KaTeX)
Code Blocks
Containers & Layouts
Rich Links
Mentions & Social
Alert Boxes
Definition Lists
Footnotes
Multimedia
Advanced Features

Basic Markdown Syntax

Level 1 Header H1

Level 2 Header H2

Level 3 Header H3

Level 4 Header H4

Level 5 Header H5

Level 6 Header H6

Text Styles

This is a regular text.

This is bold text

This is italic text

This is bold italic text

~~This is strikethrough text~~

Links & Images

This is a link

Horizontal Rule

Blockquote

This is a blockquote.
Blockquotes can contain multiple paragraphs.
— Source

Extended Text Formats

Mark (Highlight)

This is highlighted text, used for emphasis.

Inserted Text

This is newly inserted content.

Spoiler Text

||spoiler|| text.

Inline Code

Use console.log() to output debug information.

Lists & Tasks

Unordered List

Item 1
Item 2
- Subitem 2.1
- Subitem 2.2
  - Nested Subitem 2.2.1
Item 3

Ordered List

Step 1
Step 2
1. Substep 2.1
2. Substep 2.2
Step 3

GFM Task List

Task to complete
Completed task
Another completed task
Task in progress

Tables

Basic Table

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Alignment

Left Align	Center Align	Right Align
Content A	Content B	Content C
Data 1	Data 2	Data 3

Complex Table Example

Expression	Example	Description
File	`options.txt`	Text file
Variable	`<version>`	Placeholder
Must Delete	`libraries ***`	Asterisk marked

Mathematical Formulas (KaTeX)

Inline Formula

This is an inline formula: $c = pmsqrt{a^2 + b^2}$

Einstein's famous equation: $E = mc^2$

Polynomial: $P(x) = a_nx^n+a_{n-1}x^{n-1} + dots + a_1x + a_0$

Block Formula

rac{d}{dx}int_{a}^{x} f(t)dt = f(x)

sum_{i=1}^{n} i = rac{n(n+1)}{2}

Pleft(U,T ight)=100left.left(0.6minleft(1,rac{U-0.70}{0.90-0.70} ight)+0.4minleft(1,rac{T-4000}{14000-4000} ight) ight) ight.

Code Blocks

JavaScript Code

function greet(name) {
  console.log(`Hello, ${name}!`)
  return `Welcome to Shiroi`
}

greet('World')

CodeBlock Loading...

TypeScript Code

interface User {
  id: number
  name: string
  email: string
}

const createUser = (user: User): void => {
  console.log(`Creating user: ${user.name}`)
}

CodeBlock Loading...

Python Code

PYTHON

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

CodeBlock Loading...

Shell Script

BASH

#!/bin/bash
echo "Starting Shiroi..."
pnpm install
pnpm dev

CodeBlock Loading...

Mermaid Flowchart

CodeBlock Loading...

Mermaid Sequence Diagram

CodeBlock Loading...

Containers & Layouts

Gallery Image Gallery

Grid Layout

Grid Item 1

This is the content of the first grid item.

Grid Item 2

This is the content of the second grid item.

Grid Item 3

This is the content of the third grid item.

Image Grid

Masonry Layout

Rich Links

Shiroi supports automatic detection and rendering of links from various platforms.

GitHub Repository

https://github.com/Innei/Shiro

GitHub Commit

https://github.com/Innei/Shiro/commit/6957e011439eb2d3cbf42bfb67ed81b07d4bcc2a

GitHub Pull Request

https://github.com/Innei/Shiro/pull/129

GitHub Gist

https://gist.github.com/Innei/94b3e8f078d29e1820813a24a3d8b04e

Twitter/X

YouTube

CodeSandbox

Regular Link

TRPC Documentation

GitHub User Mention

Innei

Twitter User Mention

pseudoyu

Telegram User Mention

SomeUser

Auto Display Name

InneiInneiInnei

Alert Boxes

NOTE

Note

This is a note, meant to inform the user of important information they need to know.

TIP

Tip

This is a tip, providing guidance to the user on how to complete the task.

IMPORTANT

Important

This is important information, the user needs to pay special attention to this to achieve their goal.

WARNING

Warning

This is a warning, the user needs to act immediately to avoid issues.

CAUTION

Caution

This is a caution, alerting the user about risks or potential negative results of their actions.

Definition Lists

Basic Definitions

Term 1 : This is the definition for Term 1. It can span multiple lines.

Term 2 : This is the first definition for Term 2. : This is the second definition for Term 2.

Formatted Definitions

HTML : Hyper Text Markup Language : Standard markup language for creating web pages.

CSS : Cascading Style Sheets : Style sheet language for describing web page layouts.

Compact Style

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Footnotes

This is a text with footnotes^{[^1]}. You can place footnote references anywhere in the text^{[^2]}.

Footnotes will appear at the end of the document.

Multimedia

Video

You can directly use the <video> tag or a video link.

LinkCard Component

Advanced Features

Abbreviation

This is an example of HTML, which will be automatically marked as an abbreviation.

*Text Markup Language

Details Folding

Tabs

This is the content for the first tab.

Excalidraw Sketch

Whiteboard loading…

React Remote Component Rendering

Component Loading...

Comprehensive Testing

This section combines various features for testing.

Nested Feature Test

Tip

Use highlight and ~~spoiler~~ text in the blockquote.

Formula: $E = mc^2$

Code: const x = 10

Complex Content in Lists

Item 1: Contains code and italic
- Subitem 1: highlighted text
- Subitem 2: Link Text
Item 2: Mathematical formula $sum_{i=1}^{n} i$

Item 3:

// Code block in list
console.log('Hello from list')

CodeBlock Loading...

Formatting in Tables

Feature	Syntax	Example
Bold	`text`	Bold
Italic	`text`	Italic
Code	`code`	`code`
Highlight	`==text==`	highlight
Formula	$formula$	$x^2$

Test Summary

This document covers all special Markdown syntax supported by Shiroi:

Last Updated: February 17, 2026 Project: Shiroi (Shiroi) Document Version: 1.0.0

1: This is the first footnote content.
Return1
2: This is the second footnote content, and it can include more detailed information.
Return2

Rendering Test

Rendering Test

Shiroi Markdown Feature Test Document

Table of Contents

Basic Markdown Syntax

Header Levels

Level 1 Header H1

Level 2 Header H2

Level 3 Header H3

Level 4 Header H4

Level 5 Header H5

Level 6 Header H6

Text Styles

Links & Images

Horizontal Rule

Blockquote

Extended Text Formats

Mark (Highlight)

Inserted Text

Spoiler Text

Inline Code

Lists & Tasks

Unordered List

Ordered List

GFM Task List

Tables

Basic Table

Alignment

Complex Table Example

Mathematical Formulas (KaTeX)

Inline Formula

Block Formula

Code Blocks

JavaScript Code

TypeScript Code

Python Code

Shell Script

Mermaid Flowchart

Mermaid Sequence Diagram

Containers & Layouts

Banner Alert

Gallery Image Gallery

Grid Layout

Image Grid

Masonry Layout

Rich Links

GitHub Repository

GitHub Commit

GitHub Pull Request

GitHub Gist

Twitter/X

YouTube

CodeSandbox

Regular Link

Mentions & Social

GitHub User Mention

Twitter User Mention

Telegram User Mention

Auto Display Name

Alert Boxes

NOTE

TIP

IMPORTANT

WARNING

CAUTION

Definition Lists

Basic Definitions

Formatted Definitions

Compact Style

Footnotes

Multimedia

Video

LinkCard Component

Advanced Features

Abbreviation

Details Folding

Tabs

Excalidraw Sketch

React Remote Component Rendering

Comprehensive Testing