npm package: @sp-days-framework/docusaurus-plugin-terminal-codeblock
Description: A Docusaurus plugin for rendering realistic terminal output with command prompts, ANSI colors, and interactive highlights
Author: SP-Days Framework
Latest version: 1.1.2

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

[![npm version](https://img.shields.io/npm/v/@sp-days-framework/docusaurus-plugin-terminal-codeblock?logo=nodedotjs)](https://www.npmjs.com/package/@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

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

## Quick Start

### 1. Add the plugin to your Docusaurus config

```js
// 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

````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

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

### With User/Host/Directory

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

### Colored Output

````markdown
```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

````markdown
```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](https://github.com/helse-sorost/sp-days-framework/tree/main/docusaurus-plugin-terminal-codeblock/docs).

## License

MIT © [Sykehuspartner HF](https://github.com/helse-sorost)