Code Block Showcase
A comprehensive showcase of code blocks with various programming languages and syntax highlighting
Code Block Showcase
This project demonstrates the beautiful and consistent code block rendering across all pages of the Peta website. It showcases the One Dark Pro theme with line numbers and syntax highlighting for multiple programming languages.
Features
- Consistent Styling: All code blocks use the same One Dark Pro theme
- Line Numbers: Every code block displays line numbers for better readability
- Syntax Highlighting: Support for 17+ programming languages
- Copy Functionality: One-click code copying with visual feedback
- Responsive Design: Code blocks adapt to different screen sizes
Python Example
Here's a Python implementation of a binary search tree:
1
2
3
4 =
5 =
6 =
7
8
9
10 = None
11
12
13
14 =
15 return
16
17 =
18
19
20
21 =
22
23 =
24 break
25 > :
26
27 =
28
29 =
30 break
31
32 break # Value already exists
33
34
35 =
36
37
38 return True
39 < :
40 =
41
42 =
43 return False
44
45
46 =
47
48
49
50
51
52
53
54
55 return
TypeScript Example
TypeScript interface for a user management system:
1
2 interface User
13
14 enum UserRole
20
21
35
36 : User | undefined
39
40
Rust Example
Rust implementation of a thread-safe counter using Arc and Mutex:
1
2 use ;
3 use thread;
4 use Duration;
5
6
9
10
27
28
SQL Example
Complex SQL query for analytics dashboard:
1
2 WITH monthly_revenue AS (
3 SELECT
4 DATE_TRUNC('month', order_date) AS month,
5 SUM(total_amount) AS revenue,
6 COUNT(*) AS order_count
7 FROM orders
8 WHERE order_date >= CURRENT_DATE - INTERVAL '12 months'
9 GROUP BY DATE_TRUNC('month', order_date)
10 ),
11
12 customer_segments AS (
13 SELECT
14 customer_id,
15 CASE
16 WHEN total_spent > 1000 THEN 'High Value'
17 WHEN total_spent > 500 THEN 'Medium Value'
18 ELSE 'Low Value'
19 END AS segment
20 FROM (
21 SELECT
22 customer_id,
23 SUM(total_amount) AS total_spent
24 FROM orders
25 GROUP BY customer_id
26 ) customer_totals
27 ),
28
29 top_products AS (
30 SELECT
31 product_id,
32 product_name,
33 SUM(quantity) AS total_sold,
34 SUM(total_amount) AS product_revenue
35 FROM order_items
36 GROUP BY product_id, product_name
37 ORDER BY product_revenue DESC
38 LIMIT 10
39 )
40
41 SELECT
42 mr.month,
43 mr.revenue,
44 mr.order_count,
45 COUNT(cs.customer_id) AS customer_count,
46 SUM(CASE WHEN cs.segment = 'High Value' THEN 1 ELSE 0 END) AS high_value_customers,
47 STRING_AGG(tp.product_name, ', ') AS top_products
48 FROM monthly_revenue mr
49 LEFT JOIN orders o ON DATE_TRUNC('month', o.order_date) = mr.month
50 LEFT JOIN customer_segments cs ON o.customer_id = cs.customer_id
51 LEFT JOIN top_products tp ON TRUE
52 GROUP BY mr.month, mr.revenue, mr.order_count
53 ORDER BY mr.month DESC;
Go Example
Go implementation of a concurrent web server with middleware:
1
2 package main
3
4
11
12
13
14 .HandlerFunc
24
25
36
37 .HandlerFunc
43
44
47
48
52
53
57
58
72
73
84
85
C++ Example
C++ implementation of a template-based smart pointer:
1
2
6
7 ;
85
86 // Usage example
87 int
Conclusion
This showcase demonstrates that the Peta website now provides:
- Beautiful Code Blocks: Consistent One Dark Pro theme across all pages
- Line Numbers: Every code block displays line numbers for easy reference
- Syntax Highlighting: Proper highlighting for all major programming languages
- Responsive Design: Code blocks work perfectly on all screen sizes
- Accessibility: Copy buttons and proper contrast for readability
The code blocks are now fully functional and consistent across articles, books, snippets, and projects pages! 🎉