Markdown & Typography DemoLink to section

Complete showcase of all markdown elements, typography styles, and prose formatting used throughout the HSK Flashcards application.

TypographyLink to section

HeadingsLink to section

The application uses a consistent heading hierarchy:

Heading 1 - Page titlesLink to section

Heading 2 - Major sectionsLink to section

Heading 3 - SubsectionsLink to section

Heading 4 - Sub-subsectionsLink to section

Heading 5 - Minor headingsLink to section

Heading 6 - Smallest headingsLink to section

Body TextLink to section

Regular text: The quick brown fox jumps over the lazy dog. 这是一些中文文字。

Bold text: The quick brown fox jumps over the lazy dog.

Italic text: The quick brown fox jumps over the lazy dog.

Combined: The quick brown fox jumps over the lazy dog.

Chinese Text ExamplesLink to section

• 汉语水平考试 (Hànyǔ Shuǐpíng Kǎoshì) - HSK
• 你好 (nǐ hǎo) - Hello
• 谢谢 (xiè xie) - Thank you
• 再见 (zài jiàn) - Goodbye

LinksLink to section

• Internal link to Home
• Internal link to About
• External link to HSK Official Site
• Download link

ListsLink to section

Unordered ListLink to section

• First item
• Second item
  • Nested item 1
  • Nested item 2
    • Deep nested item
• Third item

Ordered ListLink to section

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Definition ListLink to section

HSK 1 : Beginner level with 150 words

HSK 2
: Elementary level with 300 words

HSK 3 : Intermediate level with 600 words

TablesLink to section

Basic TableLink to section

Aligned TableLink to section

Code BlocksLink to section

Inline CodeLink to section

Use pnpm install to install dependencies and pnpm run develop to start the dev server.

Code BlocksLink to section

# Install dependencies
pnpm install

# Start development server
pnpm run develop

# Build for production
pnpm run build

// TypeScript example
interface FlashCard {
  id: number
  chinese: string
  pinyin: string
  english: string
  level: number
}

function studyCard(card: FlashCard): void {
  console.log(`Studying: ${card.chinese} (${card.pinyin})`)
}

// React component example
export function FlashCard({ chinese, pinyin, english }) {
  return (
    <div className="flashcard">
      <h2>{chinese}</h2>
      <p>{pinyin}</p>
      <p>{english}</p>
    </div>
  )
}

BlockquotesLink to section

“Learning Chinese is a journey of a thousand miles that begins with a single character.”

— Ancient Proverb

Note: The HSK test has been updated with new standards. Make sure you’re studying with the latest materials.

ImagesLink to section

Images can be displayed with captions:

HSKFlashCards Logo

Horizontal RulesLink to section

Use horizontal rules to separate major sections:

Interactive ElementsLink to section

ButtonsLink to section

While this is an MDX file, interactive elements are best demonstrated on the flashcard demo page.

FormsLink to section

Form elements like inputs, selects, and textareas are used throughout the application for:

• Search functionality
• Deck selection
• Study settings
• User preferences

Color PaletteLink to section

The application uses Tailwind CSS color utilities:

• Primary: Blue shades (blue-600 for main actions)
• Text: Gray shades (gray-900 for headings, gray-700 for body)
• Background: White and gray-50
• Borders: Gray-200 and gray-300
• Success: Green-600
• Warning: Yellow-600
• Error: Red-600

SpacingLink to section

The application follows Tailwind’s spacing scale:

• p-2 - Small padding (8px)
• p-4 - Standard padding (16px)
• p-6 - Large padding (24px)
• p-8 - Extra large padding (32px)

Margins follow the same scale with m- prefix.

Responsive DesignLink to section

The application is fully responsive with breakpoints at:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Component ExamplesLink to section

For interactive component examples, visit:

• Flashcard Demo - Interactive flashcard component
• Table of Contents Demo - Scroll-spy navigation demo

AccessibilityLink to section

All components follow accessibility best practices:

• Semantic HTML elements
• ARIA labels where needed
• Keyboard navigation support
• Focus indicators
• Color contrast compliance
• Screen reader friendly

PerformanceLink to section

The site is optimized for performance:

• Static site generation
• Lazy loading for images
• Code splitting by route
• Minimal JavaScript bundle
• Efficient caching strategies