Syntax highlighting already ships with Astro

In a technical post, code blocks are half the content. Without color they are hard to read. Luckily Astro bundles Shiki, so markdown code fences are highlighted out of the box — no extra plugin.

Config is one theme line

Pick a theme in astro.config.mjs and you are done. This blog uses a light theme to sit on its paper-colored background.

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'github-light',
      wrap: false,
    },
  },
});

Shiki runs at build time. It ships no highlighting JavaScript to the browser — the colors are already inlined as styles in the HTML, so they show even with JavaScript disabled. A good fit for a static blog.

By language

A language is recognized from the fence label.

type Post = {
  title: string;
  pubDate: Date;
  draft?: boolean;
};

npm run build      # writes static files to dist/
npm run preview    # check the build locally

Inline code

Short code inside a sentence, like npm run dev, stays a single color with no highlighting. Saving color keeps the sentence flowing. Code blocks scroll horizontally when they get wide, so a narrow screen never overflows.

The effort spent adding color here was close to zero. It was already there.