Markdown Features Guide

Mon, 16 Mar 2026 00:00:00 GMT

This guide showcases the rich Markdown features available in Astro Theme Shyne, including code syntax highlighting, math formulas, callouts, and more.

Code Highlighting

The theme uses Expressive Code and Shiki for beautiful code highlighting. Here's a TypeScript example:

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

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com"
};

console.log(greetUser(user));

And here's some Python:

def fibonacci(n: int) -> int:
    """Calculate the nth Fibonacci number."""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Calculate first 10 Fibonacci numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Math Formulas

The theme supports LaTeX math rendering via KaTeX.

Inline Math

The equation $E = mc^2$ is famous.

Block Math

$$ \frac{d}{dx}\left( \int_{a}^{x} f(t),dt\right) = f(x) $$

Callouts / Admonitions

Use GitHub-style callouts to highlight important information:

[!NOTE] Useful information that users should know, even when skimming.

[!TIP] A helpful suggestion to improve your workflow.

[!WARNING] Potential problems that users should avoid.

[!CAUTION] Advises about situations that could cause loss of data or hardware damage.

Tables

Feature	Status	Description
Blog	✅	Full-featured blog system
Projects	✅	Portfolio showcase
Photos	✅	Polaroid gallery
Search	✅	Instant search
RSS	✅	RSS feed generation

Lists

Unordered

First item
Second item
- Nested item
- Another nested
Third item

Ordered

First step
Second step
Third step

Images

You can include images in your posts:

![Sample Image](/images/sample.jpg)

Conclusion

These features make Astro Theme Shyne perfect for technical writing and documentation.

Welcome to Astro Theme Shyne

Mon, 16 Mar 2026 00:00:00 GMT

Welcome to Astro Theme Shyne! This guide will help you understand the key features and how to customize this theme for your personal blog or portfolio.

Why Astro Theme Shyne?

Astro Theme Shyne is built with modern technologies to provide:

Blazing fast performance with static site generation
Beautiful Polaroid-style photo gallery
Full TypeScript support
SEO optimization out of the box

Getting Started

Installation

Clone the repository and install dependencies:

git clone https://github.com/FuTseYi/Astro-Theme-Shyne.git
cd Astro-Theme-Shyne
pnpm install
pnpm dev

Configuration

Edit src/config.ts to customize your site:

export const SITE: Site = {
  title: 'Your Site Name',
  description: 'Your site description',
  href: 'https://your-domain.com',
  author: 'Your Name',
}

Key Features

Polaroid Photo Gallery

One of the unique features is the Polaroid-style photo timeline. Here's how to use it:

Create a new folder in src/content/photos/
Add your photos to an assets subfolder
Create an index.md file with frontmatter

---
title: My Trip
description: An amazing journey
startDate: 2026-01-01
favicon: ✈️
location: Japan
---

![](./assets/photo1.jpg)
![](./assets/photo2.jpg)

Blog Posts

Create blog posts in src/content/blog/:

---
title: My First Post
date: 2026-01-01
tags:
  - tech
---

Your content here...

Projects

Add projects in src/content/projects/:

---
name: My Project
description: A cool project
startDate: 2026-01-01
tags:
  - react
featured: true
---

Advanced Features

Subposts

For long-form content, you can organize posts into subposts:

src/content/blog/my-topic/
  index.md      (parent post)
  part-1/
    index.md    (subpost 1)
  part-2/
    index.md    (subpost 2)

Custom Components

The theme includes React components in src/components/ui/ following shadcn/ui patterns.

Deployment

Deploy to Vercel, Netlify, or any static hosting:

pnpm build

The output will be in the dist folder.

Contributing

Contributions are welcome! Please see CONTRIBUTING.md.

License

MIT License - feel free to use this theme for your own projects!

Happy blogging!

Shyne