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:
- Update your
astro.config.mjs:
import { function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never>(config: AstroUserConfig<TLocales, TDriver>): AstroUserConfig<TLocales, TDriver>See the full Astro Configuration API Documentation
https://astro.build/configdefineConfig } from "astro/config";
export default defineConfig<never, never>(config: AstroUserConfig<never, never>): AstroUserConfig<never, never>See the full Astro Configuration API Documentation
https://astro.build/configdefineConfig({
AstroUserConfig<never, never>.markdown?: {
shikiConfig?: Partial<ShikiConfig>;
syntaxHighlight?: "shiki" | "prism" | false;
remarkPlugins?: RemarkPlugins;
rehypePlugins?: RehypePlugins;
gfm?: boolean;
smartypants?: boolean;
remarkRehype?: RemarkRehype;
} | undefined
shikiConfig?: Partial<ShikiConfig> | undefinedshikiConfig: {
themes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw> | undefinedthemes: { light: "min-light"light: "min-light", dark: "tokyo-night"dark: "tokyo-night" },
wrap?: boolean | null | undefinedEnable word wrapping.
- true: enabled.
- false: disabled.
- null: All overflow styling removed. Code will overflow the element by default.wrap: true,
},
},
});- 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:
interface User {
User.name: stringname: string;
User.age: numberage: number;
}
const const user: Useruser: User = {
User.name: stringname: "John Doe",
age: "30" // Type error: Type 'string' is not assignable to type 'number'};
var console: ConsoleThe `console` module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:
* A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream.
* A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstdout) and
[`process.stderr`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module.
_**Warning**_: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v22.x/api/process.html#a-note-on-process-io) for
more information.
Example using the global `console`:
```js
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
```
Example using the `Console` class:
```js
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to `stdout` with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html)
(the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args)).
```js
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
```
See [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args) for more information.log(const user: Useruser.User.name: stringname);You can also show type information inline:
interface User {
User.name: stringname: string;
User.age: numberage: number;
}
const const user: Useruser: User = {
User.name: stringname: "John Doe",
User.age: numberage: 30
};
// The type of user.name is 'string'
const const name: stringname = const user: Useruser.User.name: stringname;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.