Skip to content

Commit e96f8d0

Browse files
mintlify[bot]mintlify[bot]
authored
Update components/terminal.mdx
1 parent 194d7bc commit e96f8d0

File tree

1 file changed

+232
-0
lines changed

1 file changed

+232
-0
lines changed

‎components/terminal.mdx‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
---
2+
title: "Terminal"
3+
description: "Display command-line interfaces and terminal output with syntax highlighting"
4+
icon: "terminal"
5+
---
6+
7+
import IconsOptional from "/snippets/icons-optional.mdx";
8+
9+
Use the terminal widget to display command-line interfaces, terminal sessions, and code execution output. The terminal widget provides a realistic terminal appearance with customizable themes and interactive features.
10+
11+
## Basic terminal
12+
13+
<Terminal>
14+
$ npm install @mintlify/terminal
15+
✓ Package installed successfully
16+
$ npm start
17+
Starting development server...
18+
Server running on http://localhost:3000
19+
</Terminal>
20+
21+
```mdx Terminal example
22+
<Terminal>
23+
$ npm install @mintlify/terminal
24+
✓ Package installed successfully
25+
$ npm start
26+
Starting development server...
27+
Server running on http://localhost:3000
28+
</Terminal>
29+
```
30+
31+
## Terminal with title
32+
33+
Add a title to provide context for the terminal session.
34+
35+
<Terminal title="Development Setup">
36+
$ git clone https://github.com/your-repo/project.git
37+
Cloning into 'project'...
38+
$ cd project
39+
$ npm install
40+
Installing dependencies...
41+
</Terminal>
42+
43+
```mdx Terminal with title
44+
<Terminal title="Development Setup">
45+
$ git clone https://github.com/your-repo/project.git
46+
Cloning into 'project'...
47+
$ cd project
48+
$ npm install
49+
Installing dependencies...
50+
</Terminal>
51+
```
52+
53+
## Terminal themes
54+
55+
Customize the appearance with different terminal themes.
56+
57+
### Dark theme (default)
58+
59+
<Terminal theme="dark">
60+
$ ls -la
61+
total 24
62+
drwxr-xr-x 4 user staff 128 Dec 1 10:30 .
63+
drwxr-xr-x 3 user staff 96 Dec 1 10:29 ..
64+
-rw-r--r-- 1 user staff 1024 Dec 1 10:30 README.md
65+
-rw-r--r-- 1 user staff 2048 Dec 1 10:30 package.json
66+
</Terminal>
67+
68+
### Light theme
69+
70+
<Terminal theme="light">
71+
$ whoami
72+
developer
73+
$ pwd
74+
/home/developer/projects
75+
</Terminal>
76+
77+
```mdx Terminal themes
78+
<Terminal theme="dark">
79+
$ ls -la
80+
total 24
81+
drwxr-xr-x 4 user staff 128 Dec 1 10:30 .
82+
</Terminal>
83+
84+
<Terminal theme="light">
85+
$ whoami
86+
developer
87+
</Terminal>
88+
```
89+
90+
## Interactive terminal
91+
92+
Enable interactive features like copy buttons and command highlighting.
93+
94+
<Terminal interactive title="API Testing">
95+
$ curl -X GET https://api.example.com/users
96+
{
97+
"users": [
98+
{"id": 1, "name": "John Doe"},
99+
{"id": 2, "name": "Jane Smith"}
100+
]
101+
}
102+
$ curl -X POST https://api.example.com/users \
103+
-H "Content-Type: application/json" \
104+
-d '{"name": "New User"}'
105+
{"id": 3, "name": "New User", "created": true}
106+
</Terminal>
107+
108+
```mdx Interactive terminal
109+
<Terminal interactive title="API Testing">
110+
$ curl -X GET https://api.example.com/users
111+
{
112+
"users": [
113+
{"id": 1, "name": "John Doe"},
114+
{"id": 2, "name": "Jane Smith"}
115+
]
116+
}
117+
</Terminal>
118+
```
119+
120+
## Multi-step commands
121+
122+
Show complex workflows with multiple commands and outputs.
123+
124+
<Terminal title="Docker Deployment">
125+
$ docker build -t myapp .
126+
Sending build context to Docker daemon 2.048kB
127+
Step 1/5 : FROM node:16-alpine
128+
---> 1234567890ab
129+
Step 2/5 : WORKDIR /app
130+
---> Running in abcdef123456
131+
---> fedcba654321
132+
Successfully built fedcba654321
133+
Successfully tagged myapp:latest
134+
135+
$ docker run -p 3000:3000 myapp
136+
Server starting...
137+
✓ Application ready on port 3000
138+
</Terminal>
139+
140+
```mdx Multi-step terminal
141+
<Terminal title="Docker Deployment">
142+
$ docker build -t myapp .
143+
Sending build context to Docker daemon 2.048kB
144+
Step 1/5 : FROM node:16-alpine
145+
---> 1234567890ab
146+
Successfully tagged myapp:latest
147+
148+
$ docker run -p 3000:3000 myapp
149+
Server starting...
150+
✓ Application ready on port 3000
151+
</Terminal>
152+
```
153+
154+
## Error handling
155+
156+
Display error messages and troubleshooting information.
157+
158+
<Terminal title="Debugging Session">
159+
$ npm test
160+
> test
161+
> jest
162+
163+
FAIL src/components/Button.test.js
164+
✕ should render correctly (5ms)
165+
166+
Error: Cannot find module 'react-testing-library'
167+
at Object.<anonymous> (src/components/Button.test.js:2:1)
168+
169+
$ npm install --save-dev @testing-library/react
170+
+ @testing-library/react@13.4.0
171+
added 1 package
172+
173+
$ npm test
174+
> test
175+
> jest
176+
177+
PASS src/components/Button.test.js
178+
✓ should render correctly (12ms)
179+
180+
Test Suites: 1 passed, 1 total
181+
Tests: 1 passed, 1 total
182+
</Terminal>
183+
184+
```mdx Error handling terminal
185+
<Terminal title="Debugging Session">
186+
$ npm test
187+
FAIL src/components/Button.test.js
188+
✕ should render correctly (5ms)
189+
190+
Error: Cannot find module 'react-testing-library'
191+
192+
$ npm install --save-dev @testing-library/react
193+
+ @testing-library/react@13.4.0
194+
added 1 package
195+
196+
$ npm test
197+
PASS src/components/Button.test.js
198+
✓ should render correctly (12ms)
199+
</Terminal>
200+
```
201+
202+
## Properties
203+
204+
<ResponseField name="title" type="string">
205+
Optional title displayed at the top of the terminal window.
206+
</ResponseField>
207+
208+
<ResponseField name="theme" type="string" default="dark">
209+
Terminal color theme. Options: `dark`, `light`, `matrix`, `retro`.
210+
</ResponseField>
211+
212+
<ResponseField name="interactive" type="boolean" default="false">
213+
Enable interactive features like copy buttons and command highlighting.
214+
</ResponseField>
215+
216+
<ResponseField name="height" type="string">
217+
Set a fixed height for the terminal (e.g., `300px`, `20rem`).
218+
</ResponseField>
219+
220+
<ResponseField name="maxHeight" type="string">
221+
Set a maximum height with scrolling for long output.
222+
</ResponseField>
223+
224+
<ResponseField name="showLineNumbers" type="boolean" default="false">
225+
Display line numbers for each line of output.
226+
</ResponseField>
227+
228+
<ResponseField name="copyable" type="boolean" default="true">
229+
Allow users to copy terminal content to clipboard.
230+
</ResponseField>
231+
232+
<IconsOptional />

0 commit comments

Comments
 (0)