Terminal and Command Output

Display styled console output with syntax highlighting for commands and results

Terminal and Command Output

Terminal blocks provide a visually appealing way to display command-line interactions, console output, and terminal sessions with automatic syntax highlighting.

Basic Syntax

Use :::terminal to create a terminal output block:

$ npm install
✓ Installed 142 packages

Command Prompts

Terminal blocks automatically style different command prompt symbols:

Dollar Sign ($)

The most common prompt for Unix/Linux shells:

$ npm install express
$ npm run dev
$ git status

Greater Than (>)

Common in Windows PowerShell and some shells:

> Get-Process
> docker ps
> node app.js

Hash Symbol (#)

Root/administrator prompts:

# apt-get update
# systemctl restart nginx
# chmod 755 script.sh

Output Types

Terminal blocks automatically style different types of output:

Success Output

Lines with success indicators are highlighted in green:

$ npm test
✓ All tests passed
✔ Build completed successfully
SUCCESS: Deployment complete

Error Output

Error messages are highlighted in red:

$ npm start
✗ Failed to start server
error: Cannot find module 'express'
ERROR: Connection refused

Warning Output

Warnings are highlighted in orange:

$ npm install
⚠ Deprecated dependencies detected
warning: Package update available
WARNING: Memory usage high

Info Output

URLs and file paths are highlighted for visibility:

$ npm run dev
Server running on http://localhost:3000
Output written to /dist/bundle.js
Visit https://example.com for docs

Real-World Examples

Package Installation

$ npm install express body-parser cors
added 45 packages in 3.2s
✓ Installation successful

Running Tests

$ npm test
Running test suite...
✓ 25 tests passed
✗ 2 tests failed
⚠ 1 test skipped
Total: 28 tests

Git Workflow

$ git status
On branch main
Your branch is up to date with 'origin/main'
$ git add .
$ git commit -m "Add new feature"
[main 7a8b9c0] Add new feature
$ git push origin main
✓ Successfully pushed to remote

Build Process

$ npm run build
Building for production...
✓ Compiled successfully in 4.2s
Output written to /dist/bundle.js
Total size: 245 KB

Docker Commands

$ docker build -t myapp .
Sending build context to Docker daemon...
✓ Successfully built a1b2c3d4e5f6
$ docker run -p 3000:3000 myapp
Server listening on http://localhost:3000

Database Operations

$ psql -U postgres
postgres=# CREATE DATABASE myapp;
CREATE DATABASE
postgres=# \l
✓ Database created successfully

Server Deployment

$ ssh user@server.com
Last login: Mon Nov 10 14:30:00 2025
$ cd /var/www/app
$ git pull origin main
✓ Updated to latest version
$ pm2 restart app
✓ Application restarted successfully
Server running at https://app.example.com

Multi-Line Sessions

Show complete terminal sessions with multiple commands and outputs:

$ npm init -y
✓ Created package.json
$ npm install express
added 50 packages in 5s
$ npm install --save-dev nodemon
added 8 packages in 2s
$ npm run dev
Server started successfully
✓ Listening on http://localhost:3000

Error Debugging

Show error scenarios and troubleshooting:

$ npm start
error: Cannot find module 'dotenv'
$ npm install dotenv
✓ Installed dotenv@16.0.0
$ npm start
✓ Server running on port 3000

Installation Instructions

Provide clear installation steps:

$ git clone https://github.com/user/repo.git
Cloning into 'repo'...
✓ Clone complete
$ cd repo
$ npm install
✓ Installed 142 packages
$ npm run dev
✓ Development server started
Visit http://localhost:3000

API Testing

Show curl commands and responses:

$ curl -X GET https://api.example.com/users
{"users": [{"id": 1, "name": "John"}]}
✓ Request successful
$ curl -X POST https://api.example.com/users -d '{"name":"Jane"}'
{"id": 2, "name": "Jane"}
✓ User created

System Administration

Show system commands:

# systemctl status nginx
● nginx.service - A high performance web server
   Active: active (running)
✓ Service is running
# systemctl reload nginx
✓ Configuration reloaded successfully

Continuous Integration

Show CI/CD pipeline output:

$ npm run ci
Running linter...
✓ No linting errors
Running tests...
✓ 150 tests passed
Building production bundle...
✓ Build completed in 12.5s
Deploying to production...
✓ Deployment successful
Visit https://app.example.com

Environment Setup

Guide users through environment configuration:

$ cp .env.example .env
$ vim .env
(Edit configuration...)
$ npm run setup
✓ Database migrated
✓ Seed data loaded
✓ Environment configured

Troubleshooting

Show diagnostic commands:

$ npm run dev
error: Port 3000 already in use
$ lsof -ti:3000
12345
$ kill -9 12345
✓ Process terminated
$ npm run dev
✓ Server started on port 3000

Mixed Output

Combine different output types in one session:

$ npm install --save react react-dom
added 4 packages in 2.3s
⚠ 2 moderate severity vulnerabilities
$ npm audit fix
✓ Fixed 2 vulnerabilities
$ npm start
✓ Compiled successfully
Server running on http://localhost:3000

Best Practices

Use Realistic Commands

✅ Good:

$ npm install
✓ Installed 142 packages

❌ Avoid:

$ some_fake_command
Random output

Show Expected Output

✅ Good:

$ node --version
v18.12.0
$ npm --version
9.1.0

Include Error Context

✅ Good:

$ npm test
✗ Test suite failed
error: Assertion failed on line 42
Fix: Update test expectations

Separate Complex Sessions

✅ Good:

Use separate terminal blocks for distinct sessions:

First, install dependencies:

$ npm install
✓ Done

Then run the server:

$ npm run dev
✓ Server started

Empty Lines

Terminal blocks preserve empty lines for readability:

$ npm install

✓ Installation complete

$ npm run dev

Long Output

Terminal blocks handle long output with horizontal scrolling:

$ npm install express body-parser cors dotenv helmet morgan winston pino express-validator bcrypt jsonwebtoken
added 142 packages in 8.5s

Features

Terminal blocks include:

  • Automatic Syntax Highlighting: Commands, success, errors, warnings
  • Dark Theme: Terminal-like dark background by default
  • Light Mode Support: Adapts to system theme
  • Monospace Font: Uses code-friendly fonts
  • Scrollable: Long lines scroll horizontally
  • Copy-Friendly: Easy to select and copy commands
  • Responsive: Works on mobile devices

Syntax Reference

:::terminal
$ command here
output here
:::
Markdown

Detected Patterns

Command Prompts

  • $ - Regular user shell
  • > - PowerShell or alternative shell
  • # - Root/administrator shell

Success Indicators

  • ✓ (checkmark)
  • ✔ (heavy checkmark)
  • SUCCESS (keyword)
  • successfully (in text)

Error Indicators

  • ✗ (ballot X)
  • ✘ (heavy ballot X)
  • ERROR (keyword)
  • error: (prefix)
  • failed (in text)

Warning Indicators

  • ⚠ (warning sign)
  • WARNING (keyword)
  • warning: (prefix)

Info Indicators

  • URLs: http:// or https://
  • Paths: Starting with /

Accessibility

Terminal blocks are accessible:

  • Semantic HTML: Uses <pre> and <code> tags
  • Keyboard Navigation: Focusable with proper outline
  • Screen Readers: Content is readable by assistive tech
  • High Contrast: Supports high contrast mode
  • Print-Friendly: Prints with borders
  • Code Blocks - For source code with syntax highlighting
  • Code Diff - For showing code changes
  • File Trees - For directory structures
  • Annotations - For inline explanations
Back to Markdown Features