TypeScript Snippets in Astro: Show, Don't Tell

Elevate Your Astro Code Highlights with TypeScript Snippets

Want to take your Astro code highlights to the next level? This guide will show you how to add TypeScript snippets with hover-over type information, making your code examples more interactive and informative.

Prerequisites for Astro Code Highlights

Start with an Astro project. Follow the official Astro quickstart guide to set up your project.

Configuring Shiki for Enhanced Astro Code Highlights

Astro includes Shiki for syntax highlighting. Here’s how to optimize it for TypeScript snippets:

1. Update your astro.config.mjs:

import { defineConfig } from "astro/config";

export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: { light: "min-light", dark: "tokyo-night" },
      wrap: true,
    },
  },
});

2. Add a stylish border to your code blocks:

pre:has(code) {
  @apply border border-skin-line;
}

Adding Type Information to Code Blocks

To add type information to your code blocks, you can use TypeScript’s built-in type annotations:

// @errors: 2322
interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "John Doe",
  age: "30" // Type error: Type 'string' is not assignable to type 'number'
};

console.log(user.name);

You can also show type information inline:

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "John Doe",
  age: 30
};

// The type of user.name is 'string'
const name = user.name;

Benefits of Enhanced Astro Code Highlights

Your Astro site now includes:

• Advanced syntax highlighting
• Type information in code blocks
• Adaptive light and dark mode code blocks

These features enhance code readability and user experience, making your code examples more valuable to readers.