Getting Started

An early-stage Expressive Code plugin to highlight code blocks using Twinkleplop. All code blocks in this documentation are highlighted using Twinkleplop.

How it works

By default, Expressive Code uses Shiki to highlight code blocks. This plugin replaces Shiki with Twinkleplop for this specific step: Twinkleplop finds tokens to highlight within code blocks and Expressive Code still handles everything else like themes, text markers, and other features.

Code blocks are still colored using Expressive Code themes and the plugin aims to match the colors Shiki uses with the same theme as closely as possible, but some token colors may differ.

Installation

1. Install expressive-code-twinkleplop using your favorite package manager:

   npm

   npm i expressive-code-twinkleplop

   pnpm

   pnpm add expressive-code-twinkleplop

   yarn

   yarn add expressive-code-twinkleplop

2. Install the Twinkleplop language packages you need.

   For example, the following command installs the TypeScript language package:

   npm

   npm i @twinkleplop/typescript

   pnpm

   pnpm add @twinkleplop/typescript

   yarn

   yarn add @twinkleplop/typescript

   To learn more about how to configure languages, check the “Languages” guide.

3. Add the plugin to your Expressive Code configuration:

   Astro

   astro.config.mjs

   import { defineConfig } from 'astro/config'
   import astroExpressiveCode from 'astro-expressive-code'
   import { pluginTwinkleplop } from 'expressive-code-twinkleplop'
   import { tokenize as typescript } from '@twinkleplop/typescript'
   
   export default defineConfig({
     integrations: [
       astroExpressiveCode({
         // Disable Shiki.
         shiki: false,
         // Add the Twinkleplop plugin with TypeScript highlighting.
         plugins: [pluginTwinkleplop({ languages: { ts: typescript() } })],
       }),
     ],
   })

   Starlight

   astro.config.mjs

   import { defineConfig } from 'astro/config'
   import starlight from '@astrojs/starlight'
   import { pluginTwinkleplop } from 'expressive-code-twinkleplop'
   import { tokenize as typescript } from '@twinkleplop/typescript'
   
   export default defineConfig({
     integrations: [
       starlight({
         title: 'My Starlight site',
         expressiveCode: {
           // Disable Shiki.
           shiki: false,
           // Add the Twinkleplop plugin with TypeScript highlighting.
           plugins: [pluginTwinkleplop({ languages: { ts: typescript() } })],
         },
       }),
     ],
   })

   EC configuration file

   ec.config.mjs

   import { pluginTwinkleplop } from 'expressive-code-twinkleplop'
   import { tokenize as typescript } from '@twinkleplop/typescript'
   
   export default {
     // Disable Shiki.
     shiki: false,
     // Add the Twinkleplop plugin with TypeScript highlighting.
     plugins: [pluginTwinkleplop({ languages: { ts: typescript() } })],
   }

4. Start your development server to preview your code blocks highlighted by Twinkleplop.

The Expressive Code Twinkleplop plugin behavior can be tweaked using various configuration options.