@sp-days-framework/docusaurus-plugin-terminal-codeblock

A Docusaurus plugin for rendering realistic terminal output with command prompts, ANSI colors, and interactive highlights.

Features

• Realistic Terminal Rendering - Mimics actual terminal appearance with customizable prompts
• Command/Output Distinction - Clear visual separation between commands and their output
• ANSI Color Support - Syntax for colored text (red, green, yellow, blue, magenta, cyan, gray)
• Line Highlighting - Highlight important lines with optional tooltips
• Multi-line Commands - Automatic formatting of commands with backslash continuation
• Per-Command Metadata - Override user, host, and directory for individual commands
• Flexible Configuration - Global and per-terminal settings for prompts and appearance
• Theme-Aware - Adapts colors for light and dark modes
• Plugin Compatible - Works seamlessly with other Docusaurus plugins without breaking theme resolution

Installation

npm install @sp-days-framework/docusaurus-plugin-terminal-codeblock

Quick Start

1. Add the plugin to your Docusaurus config

// docusaurus.config.js
module.exports = {
  plugins: ["@sp-days-framework/docusaurus-plugin-terminal-codeblock"],

  presets: [
    [
      "classic",
      {
        docs: {
          remarkPlugins: [
            require("@sp-days-framework/docusaurus-plugin-terminal-codeblock")
              .remarkTerminalDirective,
          ],
        },
      },
    ],
  ],
};

How It Works: The plugin automatically injects Terminal component imports into MDX files that use terminal codeblocks. This ensures compatibility with other plugins while maintaining clean theme resolution.

2. Use terminal codeblocks in your markdown

```terminal user="ubuntu" host="server" directory="~/"
// command "ls -la"
total 48
drwxr-xr-x  12 user  staff   384 Dec  5 10:30 .
drwxr-xr-x   8 user  staff   256 Dec  4 15:20 ..
-rw-r--r--   1 user  staff  1024 Dec  5 09:15 README.md
```

Basic Syntax

Simple Terminal

```terminal
// command "echo 'Hello, World!'"
Hello, World!
```

With User/Host/Directory

```terminal user="developer" host="localhost" directory="~/projects"
// command "pwd"
/home/developer/projects
```

Colored Output

```terminal
// command "npm test"
{green}✓{/green} All tests passed
{red}✗{/red} 1 test failed
```

Available colors: red, green, yellow, blue, magenta, cyan, gray

Highlighted Lines

```terminal
// command "docker ps"
CONTAINER ID   IMAGE       STATUS          PORTS
// highlight-next-line This container is important
a1b2c3d4e5f6   nginx       Up 2 hours      80/tcp
```

Documentation

For detailed documentation including advanced features, configuration options, and examples, see the package documentation.

License

MIT © Sykehuspartner HF