This post demonstrates all the rich features available in this blog.

Contents

• 1. Images & Lightbox
• 2. Syntax Highlighting
  • Python
  • JavaScript
  • Terminal
• 3. Math Rendering
• 4. Tables (GFM)
• 5. Task Lists
• 6. Footnotes
• 7. Strikethrough & Emphasis
• 8. Blockquotes
• 9. Nested Lists
• 10. GitHub-Style Alerts (Callouts)
• 11. External Links with Favicons
• 12. Multi-Tab Code Snippets
• 13. Collapsible Sections
• 14. CSS Color Chips
• 15. Line Numbers
• 16. Fullscreen Mode
• 17. Typewriter Animation

1. Images & Lightbox

Click on any image to see the lightbox in action!

2. Syntax Highlighting

We use Expressive Code with the Dracula theme for beautiful code blocks with built-in copy buttons.

Python

1
def hello_world():
2
    print("Hello, World!")
3
    return True
4

5
# Call the function
6
hello_world()

JavaScript

1
const future = "web";
2
console.log(`The future of ${future}`); // This line is highlighted

Terminal

npm install astro-expressive-code
npm run dev

3. Math Rendering

Mathematical equations are rendered using KaTeX.

Inline Math: The energy-mass equivalence formula is $E = mc^2$.

Block Math: Here is the Fourier Transform:

And the quadratic formula:

4. Tables (GFM)

5. Task Lists

• Install Astro
• Add MDX support
• Configure syntax highlighting
• Deploy to production
• Add more blog posts

6. Footnotes

Here’s a sentence with a footnote¹. And another one².

7. Strikethrough & Emphasis

This is deleted text and this is bold and italic and bold italic.

8. Blockquotes

“The only way to do great work is to love what you do.”

— Steve Jobs

9. Nested Lists

1. First item
   • Sub-item A
   • Sub-item B
     • Sub-sub-item
2. Second item
3. Third item

10. GitHub-Style Alerts (Callouts)

Use blockquote syntax with [!TYPE] for styled callouts:

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

[!TIP] Helpful advice for doing things better or more easily.

[!IMPORTANT] Key information users need to know to achieve their goal.

[!WARNING] Urgent info that needs immediate user attention to avoid problems.

[!CAUTION] Advises about risks or negative outcomes of certain actions.

11. External Links with Favicons

External links automatically display the website’s favicon:

Check out GitHub for open source projects, YouTube for tutorials, and MDN Web Docs for web documentation.

Other useful sites: Stack Overflow and npm.

12. Multi-Tab Code Snippets

Use the <Tabs> and <TabItem> components to group related code blocks into tabs:

1
{
2
  "name": "my-app",
3
  "scripts": {
4
    "dev": "astro dev",
5
    "build": "astro build"
6
  }
7
}

1
export const config = {
2
  siteName: "My Awesome Blog",
3
  baseUrl: "https://blog.radith.my.id"
4
};

1
.container {
2
  max-width: 1200px;
3
  margin: 0 auto;
4
  padding: 1rem;
5
}

13. Collapsible Sections

Long code blocks can have sections collapsed to focus on what matters:

5 collapsed lines
1
// These imports are collapsed by default
2
import { something } from 'somewhere';
3
import { another } from 'another-place';
4
import { yetAnother } from 'yet-another';
5
const CONFIG = { debug: true };
6

7
// This is the main function you care about
8
function doSomething(input) {
9
  return input.toUpperCase();
10
}
11

4 collapsed lines
12
// Helper functions collapsed below
13
function helper1() { return 1; }
14
function helper2() { return 2; }
15
function helper3() { return 3; }

14. CSS Color Chips

Color values in CSS automatically get a preview chip:

1
:root {
2
  --primary: #ff6b6b;
3
  --secondary: rgb(78, 205, 196);
4
  --accent: hsl(45, 100%, 60%);
5
  --dark: #2d3436;
6
  --light: rgba(255, 255, 255, 0.9);
7
}
8

9
.button {
10
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11
  color: white;
12
  border: 2px solid #333;
13
}

15. Line Numbers

Enable line numbers with showLineNumbers:

1
def fibonacci(n):
2
    """Generate the first n Fibonacci numbers."""
3
    if n <= 0:
4
        return []
5
    elif n == 1:
6
        return [0]
7

8
    fib = [0, 1]
9
    while len(fib) < n:
10
        fib.append(fib[-1] + fib[-2])
11
    return fib
12

13
# Generate first 10 Fibonacci numbers
14
result = fibonacci(10)
15
print(result)

You can also start from a specific line number with startLineNumber:

42
// This continues from line 42
43
const answer = 42;
44
console.log(`The answer is ${answer}`);

16. Fullscreen Mode

All code blocks have a fullscreen button (appears on hover). Click it to view the code in fullscreen mode!

1
interface User {
2
  id: number;
3
  name: string;
4
  email: string;
5
  createdAt: Date;
6
}
7

8
class UserService {
9
  private users: User[] = [];
10

11
  addUser(user: User): void {
12
    this.users.push(user);
13
  }
14

15
  findUser(id: number): User | undefined {
16
    return this.users.find(u => u.id === id);
17
  }
18

19
  getAllUsers(): User[] {
20
    return [...this.users];
21
  }
22
}

17. Typewriter Animation

Terminal blocks can have a typewriter effect (animation plays when visible):

$ npm create astro@latest my-new-project
$ cd my-new-project
$ npm install
$ npm run dev

That’s all the features! 🎉