-
Notifications
You must be signed in to change notification settings - Fork 1
/
rainbow.html
123 lines (123 loc) · 29 KB
/
rainbow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="language" content="en">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <style>
:root {
--black: #000000; --i-black: #7f7f7f;
--blue: #0000ee; --i-blue: #5c5cff;
--cyan: #00cdcd; --i-cyan: #00ffff;
--green: #00cd00; --i-green: #00ff00;
--magenta: #cd00cd; --i-magenta: #ff00ff;
--red: #cd0000; --i-red: #ff0000;
--white: #e5e5e5; --i-white: #ffffff;
--yellow: #cdcd00; --i-yellow: #ffff00;
--hl-black: rgba(255, 255, 255, 0.1);
}
.fg0 { color: var(--black); } .bg0 { background: var(--black); }
.fg1 { color: var(--red); } .bg1 { background: var(--red); }
.fg2 { color: var(--green); } .bg2 { background: var(--green); }
.fg3 { color: var(--yellow); } .bg3 { background: var(--yellow); }
.fg4 { color: var(--blue); } .bg4 { background: var(--blue); }
.fg5 { color: var(--magenta); } .bg5 { background: var(--magenta); }
.fg6 { color: var(--cyan); } .bg6 { background: var(--cyan); }
.fg7 { color: var(--white); } .bg7 { background: var(--white); }
.fg8 { color: var(--i-black); } .bg8 { background: var(--i-black); }
.fg9 { color: var(--i-red); } .bg9 { background: var(--i-red); }
.fg10 { color: var(--i-green); } .bg10 { background: var(--i-green); }
.fg11 { color: var(--i-yellow); } .bg11 { background: var(--i-yellow); }
.fg12 { color: var(--i-blue); } .bg12 { background: var(--i-blue); }
.fg13 { color: var(--i-magenta); } .bg13 { background: var(--i-magenta); }
.fg14 { color: var(--i-cyan); } .bg14 { background: var(--i-cyan); }
.fg15 { color: var(--i-white); } .bg15 { background: var(--i-white); }
.term-wrapper {
color: var(--white);
background-color: var(--black);
}
.term-output {
line-height: 1.25;
}
.content {
max-width: 820px;
margin: 0 auto;
padding: .75rem;
}
main {
max-width: 760px;
margin: 0 auto;
padding: .75rem;
}
main .accordion-button {
margin: 0 -.75rem;
padding: .75rem;
width: calc(100% + 1.5rem);
border-radius: 0 !important;
}
.white-space-pre {
white-space: pre;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Terminal transcript</title>
</head>
<body>
<header>
<div class="content">
<h1 class="display-3 mb-4 text-center">Terminal Transcript</h1>
<p class="lead">This example demonstrates using <code>term-transcript</code> with a custom template.</p>
<p>Templating allows changing the output format completely; in this case, it is changed to HTML instead of default SVG. The template source and docs can be found in the <a href="https://github.com/slowli/term-transcript">project repository</a>.</p>
</div>
</header>
<main class="term-wrapper rounded">
<div class="accordion accordion-flush"> <div class="accordion-item bg-transparent mb-2">
<h2 class="accordion-header" id="user-input-0">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#term-output-0" aria-expanded="true" aria-controls="term-output-0">
<span class="font-monospace small white-space-pre">rainbow</span>
</button>
</h2>
<div id="term-output-0" class="accordion-collapse collapse show" aria-labelledby="user-input-0">
<div class="accordion-body p-0 pt-2">
<pre class="term-output mb-0">Base colors:
<span class="underline fg0">black</span> <span class="fg4">blue</span> <span class="underline fg2">green</span> <span class="fg1">red</span> <span class="underline fg6">cyan</span> <span class="fg5">magenta</span> <span class="underline fg3">yellow</span>
<span class="fg8">black</span> <span class="underline fg12">blue</span> <span class="fg10">green</span> <span class="underline fg9">red</span> <span class="fg14">cyan</span> <span class="underline fg13">magenta</span> <span class="fg11">yellow</span>
Base colors (bg):
<span class="fg7 bg0">black</span> <span class="fg7 bg4">blue</span> <span class="fg7 bg2">green</span> <span class="fg7 bg1">red</span> <span class="fg7 bg6">cyan</span> <span class="fg7 bg5">magenta</span> <span class="fg7 bg3">yellow</span>
<span class="fg15 bg8">black</span> <span class="fg15 bg12">blue</span> <span class="fg15 bg10">green</span> <span class="fg15 bg9">red</span> <span class="fg15 bg14">cyan</span> <span class="fg15 bg13">magenta</span> <span class="fg15 bg11">yellow</span>
ANSI color palette:
<span style="color: #000000;">!</span><span class="fg7" style="background: #000000;">?</span><span style="color: #00005f;">!</span><span class="fg7" style="background: #00005f;">?</span><span style="color: #000087;">!</span><span class="fg7" style="background: #000087;">?</span><span style="color: #0000af;">!</span><span class="fg7" style="background: #0000af;">?</span><span style="color: #0000d7;">!</span><span class="fg7" style="background: #0000d7;">?</span><span style="color: #0000ff;">!</span><span class="fg7" style="background: #0000ff;">?</span><span style="color: #005f00;">!</span><span class="fg7" style="background: #005f00;">?</span><span style="color: #005f5f;">!</span><span class="fg7" style="background: #005f5f;">?</span><span style="color: #005f87;">!</span><span class="fg7" style="background: #005f87;">?</span><span style="color: #005faf;">!</span><span class="fg7" style="background: #005faf;">?</span><span style="color: #005fd7;">!</span><span class="fg7" style="background: #005fd7;">?</span><span style="color: #005fff;">!</span><span class="fg7" style="background: #005fff;">?</span><span style="color: #008700;">!</span><span class="fg7" style="background: #008700;">?</span><span style="color: #00875f;">!</span><span class="fg7" style="background: #00875f;">?</span><span style="color: #008787;">!</span><span class="fg7" style="background: #008787;">?</span><span style="color: #0087af;">!</span><span class="fg7" style="background: #0087af;">?</span><span style="color: #0087d7;">!</span><span class="fg0" style="background: #0087d7;">?</span><span style="color: #0087ff;">!</span><span class="fg0" style="background: #0087ff;">?</span><span style="color: #00af00;">!</span><span class="fg0" style="background: #00af00;">?</span><span style="color: #00af5f;">!</span><span class="fg0" style="background: #00af5f;">?</span><span style="color: #00af87;">!</span><span class="fg0" style="background: #00af87;">?</span><span style="color: #00afaf;">!</span><span class="fg0" style="background: #00afaf;">?</span><span style="color: #00afd7;">!</span><span class="fg0" style="background: #00afd7;">?</span><span style="color: #00afff;">!</span><span class="fg0" style="background: #00afff;">?</span><span style="color: #00d700;">!</span><span class="fg0" style="background: #00d700;">?</span><span style="color: #00d75f;">!</span><span class="fg0" style="background: #00d75f;">?</span><span style="color: #00d787;">!</span><span class="fg0" style="background: #00d787;">?</span><span style="color: #00d7af;">!</span><span class="fg0" style="background: #00d7af;">?</span><span style="color: #00d7d7;">!</span><span class="fg0" style="background: #00d7d7;">?</span><span style="color: #00d7ff;">!</span><span class="fg0" style="background: #00d7ff;">?</span><span style="color: #00ff00;">!</span><span class="fg0" style="background: #00ff00;">?</span><span style="color: #00ff5f;">!</span><span class="fg0" style="background: #00ff5f;">?</span><span style="color: #00ff87;">!</span><span class="fg0" style="background: #00ff87;">?</span><span style="color: #00ffaf;">!</span><span class="fg0" style="background: #00ffaf;">?</span><span style="color: #00ffd7;">!</span><span class="fg0" style="background: #00ffd7;">?</span><span style="color: #00ffff;">!</span><span class="fg0" style="background: #00ffff;">?</span>
<span style="color: #5f0000;">!</span><span class="fg7" style="background: #5f0000;">?</span><span style="color: #5f005f;">!</span><span class="fg7" style="background: #5f005f;">?</span><span style="color: #5f0087;">!</span><span class="fg7" style="background: #5f0087;">?</span><span style="color: #5f00af;">!</span><span class="fg7" style="background: #5f00af;">?</span><span style="color: #5f00d7;">!</span><span class="fg7" style="background: #5f00d7;">?</span><span style="color: #5f00ff;">!</span><span class="fg7" style="background: #5f00ff;">?</span><span style="color: #5f5f00;">!</span><span class="fg7" style="background: #5f5f00;">?</span><span style="color: #5f5f5f;">!</span><span class="fg7" style="background: #5f5f5f;">?</span><span style="color: #5f5f87;">!</span><span class="fg7" style="background: #5f5f87;">?</span><span style="color: #5f5faf;">!</span><span class="fg7" style="background: #5f5faf;">?</span><span style="color: #5f5fd7;">!</span><span class="fg7" style="background: #5f5fd7;">?</span><span style="color: #5f5fff;">!</span><span class="fg7" style="background: #5f5fff;">?</span><span style="color: #5f8700;">!</span><span class="fg7" style="background: #5f8700;">?</span><span style="color: #5f875f;">!</span><span class="fg7" style="background: #5f875f;">?</span><span style="color: #5f8787;">!</span><span class="fg7" style="background: #5f8787;">?</span><span style="color: #5f87af;">!</span><span class="fg7" style="background: #5f87af;">?</span><span style="color: #5f87d7;">!</span><span class="fg0" style="background: #5f87d7;">?</span><span style="color: #5f87ff;">!</span><span class="fg0" style="background: #5f87ff;">?</span><span style="color: #5faf00;">!</span><span class="fg0" style="background: #5faf00;">?</span><span style="color: #5faf5f;">!</span><span class="fg0" style="background: #5faf5f;">?</span><span style="color: #5faf87;">!</span><span class="fg0" style="background: #5faf87;">?</span><span style="color: #5fafaf;">!</span><span class="fg0" style="background: #5fafaf;">?</span><span style="color: #5fafd7;">!</span><span class="fg0" style="background: #5fafd7;">?</span><span style="color: #5fafff;">!</span><span class="fg0" style="background: #5fafff;">?</span><span style="color: #5fd700;">!</span><span class="fg0" style="background: #5fd700;">?</span><span style="color: #5fd75f;">!</span><span class="fg0" style="background: #5fd75f;">?</span><span style="color: #5fd787;">!</span><span class="fg0" style="background: #5fd787;">?</span><span style="color: #5fd7af;">!</span><span class="fg0" style="background: #5fd7af;">?</span><span style="color: #5fd7d7;">!</span><span class="fg0" style="background: #5fd7d7;">?</span><span style="color: #5fd7ff;">!</span><span class="fg0" style="background: #5fd7ff;">?</span><span style="color: #5fff00;">!</span><span class="fg0" style="background: #5fff00;">?</span><span style="color: #5fff5f;">!</span><span class="fg0" style="background: #5fff5f;">?</span><span style="color: #5fff87;">!</span><span class="fg0" style="background: #5fff87;">?</span><span style="color: #5fffaf;">!</span><span class="fg0" style="background: #5fffaf;">?</span><span style="color: #5fffd7;">!</span><span class="fg0" style="background: #5fffd7;">?</span><span style="color: #5fffff;">!</span><span class="fg0" style="background: #5fffff;">?</span>
<span style="color: #870000;">!</span><span class="fg7" style="background: #870000;">?</span><span style="color: #87005f;">!</span><span class="fg7" style="background: #87005f;">?</span><span style="color: #870087;">!</span><span class="fg7" style="background: #870087;">?</span><span style="color: #8700af;">!</span><span class="fg7" style="background: #8700af;">?</span><span style="color: #8700d7;">!</span><span class="fg7" style="background: #8700d7;">?</span><span style="color: #8700ff;">!</span><span class="fg7" style="background: #8700ff;">?</span><span style="color: #875f00;">!</span><span class="fg7" style="background: #875f00;">?</span><span style="color: #875f5f;">!</span><span class="fg7" style="background: #875f5f;">?</span><span style="color: #875f87;">!</span><span class="fg7" style="background: #875f87;">?</span><span style="color: #875faf;">!</span><span class="fg7" style="background: #875faf;">?</span><span style="color: #875fd7;">!</span><span class="fg7" style="background: #875fd7;">?</span><span style="color: #875fff;">!</span><span class="fg7" style="background: #875fff;">?</span><span style="color: #878700;">!</span><span class="fg7" style="background: #878700;">?</span><span style="color: #87875f;">!</span><span class="fg7" style="background: #87875f;">?</span><span style="color: #878787;">!</span><span class="fg7" style="background: #878787;">?</span><span style="color: #8787af;">!</span><span class="fg7" style="background: #8787af;">?</span><span style="color: #8787d7;">!</span><span class="fg0" style="background: #8787d7;">?</span><span style="color: #8787ff;">!</span><span class="fg0" style="background: #8787ff;">?</span><span style="color: #87af00;">!</span><span class="fg0" style="background: #87af00;">?</span><span style="color: #87af5f;">!</span><span class="fg0" style="background: #87af5f;">?</span><span style="color: #87af87;">!</span><span class="fg0" style="background: #87af87;">?</span><span style="color: #87afaf;">!</span><span class="fg0" style="background: #87afaf;">?</span><span style="color: #87afd7;">!</span><span class="fg0" style="background: #87afd7;">?</span><span style="color: #87afff;">!</span><span class="fg0" style="background: #87afff;">?</span><span style="color: #87d700;">!</span><span class="fg0" style="background: #87d700;">?</span><span style="color: #87d75f;">!</span><span class="fg0" style="background: #87d75f;">?</span><span style="color: #87d787;">!</span><span class="fg0" style="background: #87d787;">?</span><span style="color: #87d7af;">!</span><span class="fg0" style="background: #87d7af;">?</span><span style="color: #87d7d7;">!</span><span class="fg0" style="background: #87d7d7;">?</span><span style="color: #87d7ff;">!</span><span class="fg0" style="background: #87d7ff;">?</span><span style="color: #87ff00;">!</span><span class="fg0" style="background: #87ff00;">?</span><span style="color: #87ff5f;">!</span><span class="fg0" style="background: #87ff5f;">?</span><span style="color: #87ff87;">!</span><span class="fg0" style="background: #87ff87;">?</span><span style="color: #87ffaf;">!</span><span class="fg0" style="background: #87ffaf;">?</span><span style="color: #87ffd7;">!</span><span class="fg0" style="background: #87ffd7;">?</span><span style="color: #87ffff;">!</span><span class="fg0" style="background: #87ffff;">?</span>
<span style="color: #af0000;">!</span><span class="fg7" style="background: #af0000;">?</span><span style="color: #af005f;">!</span><span class="fg7" style="background: #af005f;">?</span><span style="color: #af0087;">!</span><span class="fg7" style="background: #af0087;">?</span><span style="color: #af00af;">!</span><span class="fg7" style="background: #af00af;">?</span><span style="color: #af00d7;">!</span><span class="fg7" style="background: #af00d7;">?</span><span style="color: #af00ff;">!</span><span class="fg7" style="background: #af00ff;">?</span><span style="color: #af5f00;">!</span><span class="fg7" style="background: #af5f00;">?</span><span style="color: #af5f5f;">!</span><span class="fg7" style="background: #af5f5f;">?</span><span style="color: #af5f87;">!</span><span class="fg7" style="background: #af5f87;">?</span><span style="color: #af5faf;">!</span><span class="fg7" style="background: #af5faf;">?</span><span style="color: #af5fd7;">!</span><span class="fg7" style="background: #af5fd7;">?</span><span style="color: #af5fff;">!</span><span class="fg7" style="background: #af5fff;">?</span><span style="color: #af8700;">!</span><span class="fg7" style="background: #af8700;">?</span><span style="color: #af875f;">!</span><span class="fg7" style="background: #af875f;">?</span><span style="color: #af8787;">!</span><span class="fg7" style="background: #af8787;">?</span><span style="color: #af87af;">!</span><span class="fg7" style="background: #af87af;">?</span><span style="color: #af87d7;">!</span><span class="fg0" style="background: #af87d7;">?</span><span style="color: #af87ff;">!</span><span class="fg0" style="background: #af87ff;">?</span><span style="color: #afaf00;">!</span><span class="fg0" style="background: #afaf00;">?</span><span style="color: #afaf5f;">!</span><span class="fg0" style="background: #afaf5f;">?</span><span style="color: #afaf87;">!</span><span class="fg0" style="background: #afaf87;">?</span><span style="color: #afafaf;">!</span><span class="fg0" style="background: #afafaf;">?</span><span style="color: #afafd7;">!</span><span class="fg0" style="background: #afafd7;">?</span><span style="color: #afafff;">!</span><span class="fg0" style="background: #afafff;">?</span><span style="color: #afd700;">!</span><span class="fg0" style="background: #afd700;">?</span><span style="color: #afd75f;">!</span><span class="fg0" style="background: #afd75f;">?</span><span style="color: #afd787;">!</span><span class="fg0" style="background: #afd787;">?</span><span style="color: #afd7af;">!</span><span class="fg0" style="background: #afd7af;">?</span><span style="color: #afd7d7;">!</span><span class="fg0" style="background: #afd7d7;">?</span><span style="color: #afd7ff;">!</span><span class="fg0" style="background: #afd7ff;">?</span><span style="color: #afff00;">!</span><span class="fg0" style="background: #afff00;">?</span><span style="color: #afff5f;">!</span><span class="fg0" style="background: #afff5f;">?</span><span style="color: #afff87;">!</span><span class="fg0" style="background: #afff87;">?</span><span style="color: #afffaf;">!</span><span class="fg0" style="background: #afffaf;">?</span><span style="color: #afffd7;">!</span><span class="fg0" style="background: #afffd7;">?</span><span style="color: #afffff;">!</span><span class="fg0" style="background: #afffff;">?</span>
<span style="color: #d70000;">!</span><span class="fg7" style="background: #d70000;">?</span><span style="color: #d7005f;">!</span><span class="fg7" style="background: #d7005f;">?</span><span style="color: #d70087;">!</span><span class="fg7" style="background: #d70087;">?</span><span style="color: #d700af;">!</span><span class="fg7" style="background: #d700af;">?</span><span style="color: #d700d7;">!</span><span class="fg7" style="background: #d700d7;">?</span><span style="color: #d700ff;">!</span><span class="fg7" style="background: #d700ff;">?</span><span style="color: #d75f00;">!</span><span class="fg7" style="background: #d75f00;">?</span><span style="color: #d75f5f;">!</span><span class="fg7" style="background: #d75f5f;">?</span><span style="color: #d75f87;">!</span><span class="fg7" style="background: #d75f87;">?</span><span style="color: #d75faf;">!</span><span class="fg7" style="background: #d75faf;">?</span><span style="color: #d75fd7;">!</span><span class="fg7" style="background: #d75fd7;">?</span><span style="color: #d75fff;">!</span><span class="fg7" style="background: #d75fff;">?</span><span style="color: #d78700;">!</span><span class="fg7" style="background: #d78700;">?</span><span style="color: #d7875f;">!</span><span class="fg7" style="background: #d7875f;">?</span><span style="color: #d78787;">!</span><span class="fg7" style="background: #d78787;">?</span><span style="color: #d787af;">!</span><span class="fg7" style="background: #d787af;">?</span><span style="color: #d787d7;">!</span><span class="fg0" style="background: #d787d7;">?</span><span style="color: #d787ff;">!</span><span class="fg0" style="background: #d787ff;">?</span><span style="color: #d7af00;">!</span><span class="fg0" style="background: #d7af00;">?</span><span style="color: #d7af5f;">!</span><span class="fg0" style="background: #d7af5f;">?</span><span style="color: #d7af87;">!</span><span class="fg0" style="background: #d7af87;">?</span><span style="color: #d7afaf;">!</span><span class="fg0" style="background: #d7afaf;">?</span><span style="color: #d7afd7;">!</span><span class="fg0" style="background: #d7afd7;">?</span><span style="color: #d7afff;">!</span><span class="fg0" style="background: #d7afff;">?</span><span style="color: #d7d700;">!</span><span class="fg0" style="background: #d7d700;">?</span><span style="color: #d7d75f;">!</span><span class="fg0" style="background: #d7d75f;">?</span><span style="color: #d7d787;">!</span><span class="fg0" style="background: #d7d787;">?</span><span style="color: #d7d7af;">!</span><span class="fg0" style="background: #d7d7af;">?</span><span style="color: #d7d7d7;">!</span><span class="fg0" style="background: #d7d7d7;">?</span><span style="color: #d7d7ff;">!</span><span class="fg0" style="background: #d7d7ff;">?</span><span style="color: #d7ff00;">!</span><span class="fg0" style="background: #d7ff00;">?</span><span style="color: #d7ff5f;">!</span><span class="fg0" style="background: #d7ff5f;">?</span><span style="color: #d7ff87;">!</span><span class="fg0" style="background: #d7ff87;">?</span><span style="color: #d7ffaf;">!</span><span class="fg0" style="background: #d7ffaf;">?</span><span style="color: #d7ffd7;">!</span><span class="fg0" style="background: #d7ffd7;">?</span><span style="color: #d7ffff;">!</span><span class="fg0" style="background: #d7ffff;">?</span>
<span style="color: #ff0000;">!</span><span class="fg7" style="background: #ff0000;">?</span><span style="color: #ff005f;">!</span><span class="fg7" style="background: #ff005f;">?</span><span style="color: #ff0087;">!</span><span class="fg7" style="background: #ff0087;">?</span><span style="color: #ff00af;">!</span><span class="fg7" style="background: #ff00af;">?</span><span style="color: #ff00d7;">!</span><span class="fg7" style="background: #ff00d7;">?</span><span style="color: #ff00ff;">!</span><span class="fg7" style="background: #ff00ff;">?</span><span style="color: #ff5f00;">!</span><span class="fg7" style="background: #ff5f00;">?</span><span style="color: #ff5f5f;">!</span><span class="fg7" style="background: #ff5f5f;">?</span><span style="color: #ff5f87;">!</span><span class="fg7" style="background: #ff5f87;">?</span><span style="color: #ff5faf;">!</span><span class="fg7" style="background: #ff5faf;">?</span><span style="color: #ff5fd7;">!</span><span class="fg7" style="background: #ff5fd7;">?</span><span style="color: #ff5fff;">!</span><span class="fg7" style="background: #ff5fff;">?</span><span style="color: #ff8700;">!</span><span class="fg7" style="background: #ff8700;">?</span><span style="color: #ff875f;">!</span><span class="fg7" style="background: #ff875f;">?</span><span style="color: #ff8787;">!</span><span class="fg7" style="background: #ff8787;">?</span><span style="color: #ff87af;">!</span><span class="fg7" style="background: #ff87af;">?</span><span style="color: #ff87d7;">!</span><span class="fg0" style="background: #ff87d7;">?</span><span style="color: #ff87ff;">!</span><span class="fg0" style="background: #ff87ff;">?</span><span style="color: #ffaf00;">!</span><span class="fg0" style="background: #ffaf00;">?</span><span style="color: #ffaf5f;">!</span><span class="fg0" style="background: #ffaf5f;">?</span><span style="color: #ffaf87;">!</span><span class="fg0" style="background: #ffaf87;">?</span><span style="color: #ffafaf;">!</span><span class="fg0" style="background: #ffafaf;">?</span><span style="color: #ffafd7;">!</span><span class="fg0" style="background: #ffafd7;">?</span><span style="color: #ffafff;">!</span><span class="fg0" style="background: #ffafff;">?</span><span style="color: #ffd700;">!</span><span class="fg0" style="background: #ffd700;">?</span><span style="color: #ffd75f;">!</span><span class="fg0" style="background: #ffd75f;">?</span><span style="color: #ffd787;">!</span><span class="fg0" style="background: #ffd787;">?</span><span style="color: #ffd7af;">!</span><span class="fg0" style="background: #ffd7af;">?</span><span style="color: #ffd7d7;">!</span><span class="fg0" style="background: #ffd7d7;">?</span><span style="color: #ffd7ff;">!</span><span class="fg0" style="background: #ffd7ff;">?</span><span style="color: #ffff00;">!</span><span class="fg0" style="background: #ffff00;">?</span><span style="color: #ffff5f;">!</span><span class="fg0" style="background: #ffff5f;">?</span><span style="color: #ffff87;">!</span><span class="fg0" style="background: #ffff87;">?</span><span style="color: #ffffaf;">!</span><span class="fg0" style="background: #ffffaf;">?</span><span style="color: #ffffd7;">!</span><span class="fg0" style="background: #ffffd7;">?</span><span style="color: #ffffff;">!</span><span class="fg0" style="background: #ffffff;">?</span>
ANSI grayscale palette:
<span style="color: #080808;">!</span><span class="bold fg7" style="background: #080808;">?</span><span style="color: #121212;">!</span><span class="bold fg7" style="background: #121212;">?</span><span style="color: #1c1c1c;">!</span><span class="bold fg7" style="background: #1c1c1c;">?</span><span style="color: #262626;">!</span><span class="bold fg7" style="background: #262626;">?</span><span style="color: #303030;">!</span><span class="bold fg7" style="background: #303030;">?</span><span style="color: #3a3a3a;">!</span><span class="bold fg7" style="background: #3a3a3a;">?</span><span style="color: #444444;">!</span><span class="bold fg7" style="background: #444444;">?</span><span style="color: #4e4e4e;">!</span><span class="bold fg7" style="background: #4e4e4e;">?</span><span style="color: #585858;">!</span><span class="bold fg7" style="background: #585858;">?</span><span style="color: #626262;">!</span><span class="bold fg7" style="background: #626262;">?</span><span style="color: #6c6c6c;">!</span><span class="bold fg7" style="background: #6c6c6c;">?</span><span style="color: #767676;">!</span><span class="bold fg7" style="background: #767676;">?</span><span style="color: #808080;">!</span><span class="bold fg0" style="background: #808080;">?</span><span style="color: #8a8a8a;">!</span><span class="bold fg0" style="background: #8a8a8a;">?</span><span style="color: #949494;">!</span><span class="bold fg0" style="background: #949494;">?</span><span style="color: #9e9e9e;">!</span><span class="bold fg0" style="background: #9e9e9e;">?</span><span style="color: #a8a8a8;">!</span><span class="bold fg0" style="background: #a8a8a8;">?</span><span style="color: #b2b2b2;">!</span><span class="bold fg0" style="background: #b2b2b2;">?</span><span style="color: #bcbcbc;">!</span><span class="bold fg0" style="background: #bcbcbc;">?</span><span style="color: #c6c6c6;">!</span><span class="bold fg0" style="background: #c6c6c6;">?</span><span style="color: #d0d0d0;">!</span><span class="bold fg0" style="background: #d0d0d0;">?</span><span style="color: #dadada;">!</span><span class="bold fg0" style="background: #dadada;">?</span><span style="color: #e4e4e4;">!</span><span class="bold fg0" style="background: #e4e4e4;">?</span><span style="color: #eeeeee;">!</span><span class="bold fg0" style="background: #eeeeee;">?</span>
24-bit colors:
<span style="color: #ffbbdd;">pink</span> <span style="color: #ffaa44;">orange</span> <span style="color: #9f4010;">brown</span> <span style="color: #10889f;">teal</span> </pre>
</div>
</div>
</div> <div class="accordion-item bg-transparent">
<h2 class="accordion-header" id="user-input-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#term-output-1" aria-expanded="true" aria-controls="term-output-1">
<span class="font-monospace small white-space-pre">rainbow --short</span>
</button>
</h2>
<div id="term-output-1" class="accordion-collapse collapse show" aria-labelledby="user-input-1">
<div class="accordion-body p-0 pt-2">
<pre class="term-output mb-0">Base colors:
<span class="underline fg0">black</span> <span class="fg4">blue</span> <span class="underline fg2">green</span> <span class="fg1">red</span> <span class="underline fg6">cyan</span> <span class="fg5">magenta</span> <span class="underline fg3">yellow</span>
<span class="fg8">black</span> <span class="underline fg12">blue</span> <span class="fg10">green</span> <span class="underline fg9">red</span> <span class="fg14">cyan</span> <span class="underline fg13">magenta</span> <span class="fg11">yellow</span>
Base colors (bg):
<span class="fg7 bg0">black</span> <span class="fg7 bg4">blue</span> <span class="fg7 bg2">green</span> <span class="fg7 bg1">red</span> <span class="fg7 bg6">cyan</span> <span class="fg7 bg5">magenta</span> <span class="fg7 bg3">yellow</span>
<span class="fg15 bg8">black</span> <span class="fg15 bg12">blue</span> <span class="fg15 bg10">green</span> <span class="fg15 bg9">red</span> <span class="fg15 bg14">cyan</span> <span class="fg15 bg13">magenta</span> <span class="fg15 bg11">yellow</span> </pre>
</div>
</div>
</div> </div>
</main>
<footer class="my-4 text-center">
<p><em class="small text-muted">Created with <a href="https://github.com/slowli/term-transcript">term-transcript v0.3.0-beta.1</a></em></p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>