This is a document that comprehensively tests all Markdown syntax features supported by the Shiroi blog system.

Table of Contents

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

Basic Markdown Syntax

Heading Levels

H1

H2

H3

H4

H5

H6

Text Styles

This is a normal paragraph.

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 Formatting

Highlight (Mark)

This is highlighted text, used to emphasize important content.

Insert Text

This is newly inserted content.

Spoiler Text

||hidden|| text.

Inline Code

Use console.log() for debugging.

Lists & Tasks

Unordered List

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

Ordered List

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

GFM Task List

• Task to do
• Completed task
• Another completed task
• Task in progress

Tables

Basic Table

Alignment

Complex Table Example

Mathematical Formulas (KaTeX)

Inline Formulas

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

Einstein's mass-energy equation: $E = mc^2$

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

Block Formulas

Code Blocks

JavaScript

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

greet('World')

TypeScript

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

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

Python

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

print(fibonacci(10))

Shell

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

Mermaid Flowchart

Mermaid Sequence Diagram

Containers & Layouts

Banner Alerts

Gallery

/04

Grid Layout

Image Grid

Masonry Layout

Rich Links

Shiroi supports automatic recognition and rendering for multiple platform links.

GitHub Repository

Repository · Innei

4.2k

Shiro

📜 A minimalist personal website embodying the purity of paper and freshness of snow.

TypeScript

GitHub Commit

Commit · Innei/Shiro

6957e01

✨ feat: Optimize Footnote Display

+48 −8TNXG2023-10-28

GitHub Pull Request

Pull Request · Innei/Shiro

#129

✨ feat: Optimize Footnote Display

merged+48 −8TNXG2023-10-28

GitHub Gist

Twitter/X

YouTube

CodeSandbox

Regular Links

TRPC Documentation

Mentions & Social

GitHub User Mention

Innei

Twitter User Mention

pseudoyu

Telegram User Mention

Some User

Auto Display Names

InneiInneiInnei

Alerts

NOTE

TIP

IMPORTANT

WARNING

CAUTION

Definition Lists

Basic Definitions

Term 1 : Definition of Term 1. Can contain multiple lines.

Term 2 : First definition of Term 2. : Second definition of Term 2.

Formatted Definitions

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

CSS : Cascading Style Sheets : Language describing webpage styles.

Compact Style

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Footnotes

This is a text with a footnote^{[^1]}. You can add footnote references anywhere^{[^2]}.

Footnotes automatically display at the end.

Multimedia

Video

Can use <video> tag or video links.

LinkCard Component

Advanced Features

Abbreviations

Example for HTML, automatically marked as abbreviation.

*Text Markup Language

Details Collapse

Tabs

Excalidraw

React Remote Component Rendering

Comprehensive Test

This section tests a mix of features.

Nested Feature Test

Complex List Content

1. First Item: contains code and italic
   • Subitem 1: highlighted text
   • Subitem 2: link text
2. Second Item: formula $sum_{i=1}^{n} i$

3. Third Item:

   JavaScriptCopy

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

Table Formatting

Test Summary

This document covers all special Markdown syntax supported by Shiroi, including:

✅ Basic Syntax: headings, paragraphs, lists, links, images, tables, blockquotes
✅ Extended Text: highlight (==), insert (++), spoiler (||)
✅ Task Lists: GFM Tasks
✅ Mathematical Formulas: KaTeX inline and block
✅ Code Highlighting: Shiki multi-language support
✅ Containers & Layouts: Banner, Gallery, Grid, Masonry
✅ Rich Links: GitHub, Twitter, YouTube auto-detection
✅ Social Mentions: GH, TW, TG user mentions
✅ Alerts: GitHub Alerts (NOTE/TIP/WARNING, etc.)
✅ Definition Lists: term definitions
✅ Footnotes: references
✅ Advanced Features: Tabs, Excalidraw, remote components

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