Word Wrap

astro.config.mjs

import { defineConfig } from 'astro/config';
import astroExpressiveCode from 'astro-expressive-code';
import { pluginWordWrap } from '@khaister/expressive-code-word-wrap';

export default defineConfig({
  integrations: [
    astroExpressiveCode({
      plugins: [pluginWordWrap()],
    }),
  ],
});

See it in action

Once configured, your code blocks will display a word wrap toggle button in the toolbar. Click it to enable or disable word wrapping on long lines. The toggle allows readers to view code in their preferred style—wrapped for readability or unwrapped to see the full line width at a glance.

# Getting Started with the Word Wrap Plugin

This plugin adds a convenient toggle button to code blocks, allowing your readers to switch between word-wrapped and non-wrapped views. This is particularly useful for long lines of code, configuration files, or any content where line length matters.

## Features

- **Interactive Toggle**: A button in the code block toolbar lets readers choose their preferred view
- **Persistent State**: The preference can be saved using browser storage for a better user experience
- **Accessibility**: Fully keyboard accessible and works with screen readers
- **Performance**: Lightweight implementation that doesn't impact page load times
- **Responsive**: Works seamlessly on mobile, tablet, and desktop devices

## Configuration Options

You can customize the plugin behavior by passing options to the `pluginWordWrap()` function in your astro.config.mjs file. The plugin respects the natural line breaks in your content and provides a smooth transition when toggling between states.