Skip to content

Commit 9ac5b21

Browse files
na-trium-144na-trium-144
committed
テーマ切替時のターミナルのテーマ設定を修正&色を調整
1 parent 5b114a8 commit 9ac5b21

File tree

2 files changed

+82
-41
lines changed

2 files changed

+82
-41
lines changed

‎app/terminal/page.tsx‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { ReplTerminal } from "./repl";
1414
import { EditorComponent, getAceLang } from "./editor";
1515
import { ExecFile } from "./exec";
1616
import { useTypeScript } from "./typescript/runtime";
17+
import { useTerminal } from "./terminal";
1718

1819
export default function RuntimeTestPage() {
1920
return (
@@ -38,6 +39,9 @@ export default function RuntimeTestPage() {
3839
))}
3940
</div>
4041

42+
<Heading level={2}>Xterm.js Colors</Heading>
43+
<AnsiColorSample />
44+
4145
<Heading level={2}>自動テスト</Heading>
4246
<MochaTest />
4347
</div>
@@ -53,23 +57,24 @@ interface SampleConfig {
5357
const sampleConfig: Record<RuntimeLang, SampleConfig> = {
5458
python: {
5559
repl: true,
56-
replInitContent: '>>> print("Hello, World!")\nHello, World!',
60+
replInitContent: '>>> print("Hello, World!")\x1b[0m\nHello, World!',
5761
editor: {
5862
"main.py": 'print("Hello, World!")',
5963
},
6064
exec: ["main.py"],
6165
},
6266
ruby: {
6367
repl: true,
64-
replInitContent: 'irb(main):001:0> puts "Hello, World!"\nHello, World!',
68+
replInitContent:
69+
'irb(main):001:0> puts "Hello, World!"\x1b[0m\nHello, World!',
6570
editor: {
6671
"main.rb": 'puts "Hello, World!"',
6772
},
6873
exec: ["main.rb"],
6974
},
7075
javascript: {
7176
repl: true,
72-
replInitContent: '> console.log("Hello, World!");\nHello, World!',
77+
replInitContent: '> console.log("Hello, World!");\x1b[0m\nHello, World!',
7378
editor: {
7479
"main.js": 'console.log("Hello, World!");',
7580
},
@@ -78,7 +83,8 @@ const sampleConfig: Record<RuntimeLang, SampleConfig> = {
7883
typescript: {
7984
repl: false,
8085
editor: {
81-
"main.ts": 'function greet(name: string): void {\n console.log("Hello, " + name + "!");\n}\n\ngreet("World");',
86+
"main.ts":
87+
'function greet(name: string): void {\x1b[0m\n console.log("Hello, " + name + "!");\x1b[0m\n}\x1b[0m\n\x1b[0m\ngreet("World");',
8288
},
8389
exec: ["main.ts"],
8490
},
@@ -129,6 +135,44 @@ function RuntimeSample({
129135
);
130136
}
131137

138+
function AnsiColorSample() {
139+
const { terminalRef, terminalInstanceRef } = useTerminal({
140+
getRows: () => 6,
141+
onReady: () => {
142+
for (let i = 0; i <= 7; i++) {
143+
terminalInstanceRef.current!.write(`\x1b[0;${30 + i}m${30 + i}`);
144+
}
145+
terminalInstanceRef.current!.write("\x1b[0m\n");
146+
terminalInstanceRef.current!.write("\x1b[1m1;");
147+
for (let i = 0; i <= 7; i++) {
148+
terminalInstanceRef.current!.write(`\x1b[1;${30 + i}m${30 + i}`);
149+
}
150+
terminalInstanceRef.current!.write("\x1b[0m\n");
151+
for (let i = 0; i <= 7; i++) {
152+
terminalInstanceRef.current!.write(`\x1b[0;${90 + i}m${90 + i}`);
153+
}
154+
terminalInstanceRef.current!.write("\x1b[0m\n");
155+
terminalInstanceRef.current!.write("\x1b[1m1;");
156+
for (let i = 0; i <= 7; i++) {
157+
terminalInstanceRef.current!.write(`\x1b[1;${90 + i}m${90 + i}`);
158+
}
159+
terminalInstanceRef.current!.write("\x1b[0m\n");
160+
for (let i = 0; i <= 7; i++) {
161+
terminalInstanceRef.current!.write(`\x1b[0;${40 + i}m${40 + i}`);
162+
}
163+
terminalInstanceRef.current!.write("\x1b[0m\n");
164+
for (let i = 0; i <= 7; i++) {
165+
terminalInstanceRef.current!.write(`\x1b[0;${100 + i}m${100 + i}`);
166+
}
167+
},
168+
});
169+
return (
170+
<div className="bg-base-300 border border-accent border-2 shadow-md m-2 p-4 pr-1 rounded-box relative h-max">
171+
<div ref={terminalRef} />
172+
</div>
173+
);
174+
}
175+
132176
function MochaTest() {
133177
const pyodide = usePyodide();
134178
const ruby = useRuby();
@@ -156,9 +200,9 @@ function MochaTest() {
156200
filesRef.current = files;
157201

158202
const runTest = async () => {
159-
if(typeof window !== "undefined") {
203+
if (typeof window !== "undefined") {
160204
setMochaState("running");
161-
205+
162206
await import("mocha/mocha.js");
163207

164208
mocha.setup("bdd");

‎app/terminal/terminal.tsx‎

Lines changed: 32 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,36 @@ export function showCursor(term: Terminal) {
5353

5454
export const systemMessageColor = chalk.blue.bold.italic;
5555

56+
function computeTerminalTheme() {
57+
const fromCSS = (varName: string) =>
58+
window.getComputedStyle(document.body).getPropertyValue(varName);
59+
// "--color-" + color_name のように文字列を分割するとTailwindCSSが認識せずCSSの値として出力されない場合があるので注意
60+
return {
61+
// DaisyUIの変数を使用してテーマを設定している
62+
background: fromCSS("--color-base-300"),
63+
foreground: fromCSS("--color-base-content"),
64+
cursor: fromCSS("--color-base-content"),
65+
selectionBackground: fromCSS("--color-primary"),
66+
selectionForeground: fromCSS("--color-primary-content"),
67+
black: fromCSS("--color-black"),
68+
red: fromCSS("--color-red-600"),
69+
green: fromCSS("--color-green-700"),
70+
yellow: fromCSS("--color-yellow-700"),
71+
blue: fromCSS("--color-indigo-600"),
72+
magenta: fromCSS("--color-fuchsia-500"),
73+
cyan: fromCSS("--color-cyan-600"),
74+
white: fromCSS("--color-neutral-100"),
75+
brightBlack: fromCSS("--color-neutral-500"),
76+
brightRed: fromCSS("--color-red-400"),
77+
brightGreen: fromCSS("--color-green-500"),
78+
brightYellow: fromCSS("--color-yellow-500"),
79+
brightBlue: fromCSS("--color-indigo-400"),
80+
brightMagenta: fromCSS("--color-fuchsia-300"),
81+
brightCyan: fromCSS("--color-cyan-400"),
82+
brightWhite: fromCSS("--color-white"),
83+
} as const;
84+
}
85+
5686
interface TerminalProps {
5787
getRows?: (cols: number) => number;
5888
onReady?: () => void;
@@ -83,9 +113,6 @@ export function useTerminal(props: TerminalProps) {
83113
document.fonts.load("1rem Inconsolata Variable"),
84114
]).then(([{ Terminal }, { FitAddon }]) => {
85115
if (!abortController.signal.aborted) {
86-
const fromCSS = (varName: string) =>
87-
window.getComputedStyle(document.body).getPropertyValue(varName);
88-
// "--color-" + color_name のように文字列を分割するとTailwindCSSが認識せずCSSの値として出力されない場合があるので注意
89116
const term = new Terminal({
90117
cursorBlink: true,
91118
convertEol: true,
@@ -98,31 +125,7 @@ export function useTerminal(props: TerminalProps) {
98125
letterSpacing: 0,
99126
fontFamily:
100127
"'Inconsolata Variable', 'Noto Sans JP', 'Noto Sans CJK JP', 'Source Han Sans JP', '源ノ角ゴシック', 'Noto Sans JP Variable', monospace",
101-
theme: {
102-
// DaisyUIの変数を使用してテーマを設定している
103-
// TODO: ダークテーマ/ライトテーマを切り替えたときに再設定する?
104-
background: fromCSS("--color-base-300"),
105-
foreground: fromCSS("--color-base-content"),
106-
cursor: fromCSS("--color-base-content"),
107-
selectionBackground: fromCSS("--color-primary"),
108-
selectionForeground: fromCSS("--color-primary-content"),
109-
black: fromCSS("--color-black"),
110-
brightBlack: fromCSS("--color-neutral-500"),
111-
red: fromCSS("--color-red-600"),
112-
brightRed: fromCSS("--color-red-400"),
113-
green: fromCSS("--color-green-600"),
114-
brightGreen: fromCSS("--color-green-400"),
115-
yellow: fromCSS("--color-yellow-700"),
116-
brightYellow: fromCSS("--color-yellow-400"),
117-
blue: fromCSS("--color-indigo-600"),
118-
brightBlue: fromCSS("--color-indigo-400"),
119-
magenta: fromCSS("--color-fuchsia-600"),
120-
brightMagenta: fromCSS("--color-fuchsia-400"),
121-
cyan: fromCSS("--color-cyan-600"),
122-
brightCyan: fromCSS("--color-cyan-400"),
123-
white: fromCSS("--color-base-100"),
124-
brightWhite: fromCSS("--color-white"),
125-
},
128+
theme: computeTerminalTheme(),
126129
});
127130
terminalInstanceRef.current = term;
128131

@@ -185,14 +188,8 @@ export function useTerminal(props: TerminalProps) {
185188
// テーマが変わったときにterminalのテーマを更新する
186189
useEffect(() => {
187190
if (terminalInstanceRef.current) {
188-
const fromCSS = (varName: string) =>
189-
window.getComputedStyle(document.body).getPropertyValue(varName);
190-
191191
terminalInstanceRef.current.options = {
192-
theme: {
193-
background: fromCSS("--color-base-300"),
194-
foreground: fromCSS("--color-base-content"),
195-
},
192+
theme: computeTerminalTheme(),
196193
};
197194
}
198195
}, [theme]);

0 commit comments

Comments
 (0)