Getting Started

The Typewriter plugin enhances Expressive Code blocks on your website by adding terminal typing animations to code blocks. Commands appear character-by-character with a blinking cursor, while output appears instantly.

This guide will show you how to add it to your website.

Set-up

1. Install the expressive-code-typewriter dependency using your preferred package manager:

   npm

   npm i expressive-code-typewriter

   pnpm

   pnpm add expressive-code-typewriter

   yarn

   yarn add expressive-code-typewriter

2. Add the plugin to your site’s Expressive Code configuration:

   Astro

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import astroExpressiveCode from 'astro-expressive-code';
   import { pluginTypewriter } from 'expressive-code-typewriter';
   
   export default defineConfig({
     integrations: [
       astroExpressiveCode({
         plugins: [pluginTypewriter()],
       }),
     ],
   });

   Starlight

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import starlight from '@astrojs/starlight';
   import { pluginTypewriter } from 'expressive-code-typewriter';
   
   export default defineConfig({
     integrations: [
       starlight({
         title: 'My Starlight site',
         expressiveCode: {
           plugins: [pluginTypewriter()],
         },
       }),
     ],
   });

   Next.js

   next.config.mjs

   import createMDX from '@next/mdx';
   import rehypeExpressiveCode from 'rehype-expressive-code';
   import { pluginTypewriter } from 'expressive-code-typewriter';
   
   /** @type {import('rehype-expressive-code').RehypeExpressiveCodeOptions} */
   const rehypeExpressiveCodeOptions = {
     plugins: [pluginTypewriter()],
   };
   
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     reactStrictMode: true,
     pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
   };
   
   const withMDX = createMDX({
     extension: /\.mdx?$/,
     options: {
       remarkPlugins: [],
       rehypePlugins: [
         // The nested array structure is required to pass options
         // to a rehype plugin
         [rehypeExpressiveCode, rehypeExpressiveCodeOptions],
       ],
     },
   });
   
   export default withMDX(nextConfig);

   EC config file

   ec.config.mjs

   import { pluginTypewriter } from 'expressive-code-typewriter';
   
   export default {
     plugins: [pluginTypewriter()],
   };

3. That’s it! Now add the typed meta option to any code block to enable the typing animation.

Basic Usage

Add typed to your code block’s meta string to enable the typing effect:

```bash typed
$ npm install my-package
Installing dependencies...
Done!
```

Lines starting with $ (the default prompt) type character-by-character, while other lines appear instantly.

Usage

For more information on how to configure the plugin, see the Configuration page.

Support

This plugin is open-source software licensed under the MIT license. If you run into any bugs, please report issues on GitHub.