Interactive Pricing Component
A web agency React component displayed with the One Dark theme, macOS-style header, background-highlighted state hooks, and line numbers.
PricingToggle.jsx
JSX
import { useState } from 'react';
export default function PricingToggle({ plans }) {
const [annual, setAnnual] = useState(true);
return (
<section className="pricing-grid">
<div className="toggle-bar">
<span className={!annual ? 'active' : ''}>Monthly</span>
<button onClick={() => setAnnual(!annual)} aria-label="Toggle billing">
<span className={annual ? 'knob right' : 'knob left'} />
</button>
<span className={annual ? 'active' : ''}>Annual</span>
</div>
{plans.map((plan) => (
<PricingCard
key={plan.id}
name={plan.name}
price={annual ? plan.annualPrice : plan.monthlyPrice}
features={plan.features}
/>
))}
</section>
);
}Quarterly Revenue Analysis
A data science Python script presented in the GitHub Light theme with a plain header, glow-highlighted core logic, and focus mode to dim surrounding lines.
revenue_analysis.py
Python
import pandas as pd
import matplotlib.pyplot as plt
def analyze_quarterly_revenue(filepath):
df = pd.read_csv(filepath, parse_dates=["date"])
quarterly = df.resample("Q", on="date")["revenue"].sum()
growth = quarterly.pct_change().dropna() * 100
avg_growth = growth.mean()
fig, ax = plt.subplots(figsize=(10, 5))
quarterly.plot(kind="bar", ax=ax, color="#4C72B0")
ax.set_title("Quarterly Revenue Breakdown")
ax.set_ylabel("Revenue (USD)")
ax.set_xlabel("")
plt.xticks(rotation=45)
plt.tight_layout()
plt.savefig("quarterly_revenue.png", dpi=150)
return {
"quarters": len(quarterly),
"total_revenue": quarterly.sum(),
"avg_growth_pct": round(avg_growth, 2),
}Production Deployment Config
A DevOps Kubernetes manifest rendered in the Dracula theme with a minimal header, border-highlighted rolling update strategy, and a scrollable max-height container.
deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: api-gateway
namespace: production
labels:
app: api-gateway
tier: frontend
spec:
replicas: 3
strategy:
type: RollingUpdate
rollingUpdate:
maxSurge: 1
maxUnavailable: 0
selector:
matchLabels:
app: api-gateway
template:
spec:
containers:
- name: api-gateway
image: registry.internal/api-gateway:2.8.1
ports:
- containerPort: 8080
resources:
requests:
memory: "256Mi"
cpu: "250m"
limits:
memory: "512Mi"
cpu: "500m"