Code Blocks and Syntax Highlighting

as-folio uses Shiki for syntax highlighting, switching between the github-light and github-dark themes to match your active color scheme. Every code block gets a copy button on hover.

Python

import numpy as np
from scipy.integrate import solve_ivp

def lorentz(t, y, sigma=10, rho=28, beta=8/3):
    """Lorentz attractor differential equations."""
    x, y_, z = y
    dx = sigma * (y_ - x)
    dy = x * (rho - z) - y_
    dz = x * y_ - beta * z
    return [dx, dy, dz]

sol = solve_ivp(lorentz, [0, 50], [1, 1, 1], max_step=0.01)
print(f"Final state: {sol.y[:, -1]}")

TypeScript

interface Publication {
  title: string;
  authors: string[];
  year: number;
  venue?: string;
  doi?: string;
}

function formatCitation(pub: Publication): string {
  const authors = pub.authors.join(', ');
  const venue = pub.venue ? `. *${pub.venue}*` : '';
  return `${authors} (${pub.year}). ${pub.title}${venue}.`;
}

const paper: Publication = {
  title: 'On the Electrodynamics of Moving Bodies',
  authors: ['A. Einstein'],
  year: 1905,
  venue: 'Annalen der Physik',
  doi: '10.1002/andp.19053221004',
};

console.log(formatCitation(paper));

Shell

# Clone the template and get started in under 5 minutes
git clone https://github.com/your-username/as-folio.git my-site
cd my-site

# Install dependencies with Yarn 4
yarn install

# Start the dev server
yarn dev

# Build for production (includes Pagefind indexing)
yarn build

LaTeX (shown as code)

\documentclass{article}
\usepackage{amsmath}

\begin{document}

The general theory of relativity is based on the equivalence principle:

\begin{equation}
  G_{\mu\nu} + \Lambda g_{\mu\nu} =
    \frac{8\pi G}{c^4} T_{\mu\nu}
\end{equation}

where $G_{\mu\nu}$ is the Einstein tensor, $\Lambda$ is the cosmological
constant, and $T_{\mu\nu}$ is the stress-energy tensor.

\end{document}

Astro component

---
// src/components/Figure.astro
interface Props {
  src: string;
  alt: string;
  caption?: string;
  width?: number;
}

const { src, alt, caption, width = 800 } = Astro.props;
---

<figure class="my-6">
  <img src={src} alt={alt} width={width} class="mx-auto rounded-lg" />
  {caption && <figcaption class="mt-2 text-center text-sm text-gray-500">{caption}</figcaption>}
</figure>

JSON

{
  "name": "as-folio",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build && pagefind --site dist",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^6.0.0",
    "@tailwindcss/vite": "^4.0.0",
    "medium-zoom": "^1.1.0"
  }
}

---

The copy button appears when you hover over any block. Click it and the text is written to your clipboard — the label changes to copied! for two seconds to confirm.