操作可能なコードブロックとそうでないものの区別をわかりやすく

Author: na-trium-144

app/[docs_id]/markdown.tsx

@@ -53,7 +53,7 @@ const components: Components = {
         ---------------------------
         */
         return (
-          <div className="border border-primary m-2 rounded-lg">
+          <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
             <ExecFile
               language={match[1]}
               filename={match[3]}
@@ -64,7 +64,7 @@ const components: Components = {
       } else if (match[3]) {
         // ファイル名指定がある場合、ファイルエディター
         return (
-          <div className="border border-primary m-2 rounded-lg">
+          <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
             <EditorComponent
               language={match[1]}
               tabSize={4}
@@ -80,7 +80,7 @@ const components: Components = {
         switch (match[1]) {
           case "python":
             return (
-              <div className="bg-base-300 border border-primary m-2 p-4 pr-1 rounded-lg">
+              <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
                 <PythonEmbeddedTerminal
                   content={String(props.children || "").replace(/\n$/, "")}
                 />
@@ -95,7 +95,7 @@ const components: Components = {
         <SyntaxHighlighter
           language={match[1]}
           PreTag="div"
-          className="border border-primary mx-2 my-2 rounded-lg text-sm! m-2! p-4! font-mono!"
+          className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
           // style={todo dark theme?}
           {...props}
         >
@@ -107,7 +107,7 @@ const components: Components = {
       return (
         <SyntaxHighlighter
           PreTag="div"
-          className="border border-primary mx-2 my-2 rounded-lg text-sm! m-2! p-4! font-mono!"
+          className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
           // style={todo dark theme?}
           {...props}
         >

app/terminal/repl.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef } from "react";
 import { highlightCodeToAnsi } from "./highlight";
 import chalk from "chalk";
 import { MutexInterface } from "async-mutex";
-import { clearTerminal, getRows, useTerminal } from "./terminal";
+import { clearTerminal, getRows, hideCursor, showCursor, useTerminal } from "./terminal";
 import { useSectionCode } from "../[docs_id]/section";
 
 export interface ReplOutput {
@@ -88,8 +88,7 @@ export function ReplTerminal(props: ReplComponentProps) {
   const updateBuffer = useCallback(
     (newBuffer: () => string[]) => {
       if (terminalInstanceRef.current) {
-        // カーソル非表示
-        terminalInstanceRef.current.write("\x1b[?25l");
+        hideCursor(terminalInstanceRef.current);
         // バッファの行数分カーソルを戻す
         if (inputBuffer.current.length >= 2) {
           terminalInstanceRef.current.write(
@@ -116,8 +115,7 @@ export function ReplTerminal(props: ReplComponentProps) {
             terminalInstanceRef.current.writeln("");
           }
         }
-        // カーソルを表示
-        terminalInstanceRef.current.write("\x1b[?25h");
+        showCursor(terminalInstanceRef.current);
       }
     },
     [prompt, promptMore, language, terminalInstanceRef]
@@ -289,22 +287,24 @@ export function ReplTerminal(props: ReplComponentProps) {
   }, [keyHandler, termReady, runtimeReady, terminalInstanceRef]);
 
   return (
-    <div
-      className="relative h-max"
-      onClick={() => {
-        if (
-          !runtimeInitializing &&
-          !runtimeReady &&
-          terminalInstanceRef.current &&
-          termReady
-        ) {
-          initRuntime();
-          terminalInstanceRef.current.write(
-            chalk.dim.bold.italic("(初期化しています...しばらくお待ちください)")
-          );
-        }
-      }}
-    >
+    <div className={"relative h-max"}>
+      {!runtimeInitializing && !runtimeReady && (
+        <div
+          className="absolute z-10 inset-0 cursor-pointer"
+          onClick={() => {
+            if (terminalInstanceRef.current && termReady) {
+              initRuntime();
+              hideCursor(terminalInstanceRef.current);
+              terminalInstanceRef.current.write(
+                chalk.dim.bold.italic(
+                  "(初期化しています...しばらくお待ちください)"
+                )
+              );
+              terminalInstanceRef.current.focus();
+            }
+          }}
+        />
+      )}
       {runtimeInitializing && (
         <div className="absolute z-10 inset-0 cursor-wait" />
       )}

app/terminal/terminal.tsx

@@ -42,6 +42,12 @@ export function clearTerminal(term: Terminal) {
   // term.clear();
   term.write("\x1b[3J\x1b[2J\x1b[1;1H");
 }
+export function hideCursor(term: Terminal) {
+  term.write("\x1b[?25l");
+}
+export function showCursor(term: Terminal) {
+  term.write("\x1b[?25h");
+}
 
 interface TerminalProps {
   getRows?: (cols: number) => number;

public/docs/python-1.md

@@ -33,7 +33,8 @@ macOSでは、**Homebrew** というパッケージマネージャを使って
 
 ### ブラウザで今すぐ試す
 
-このウェブサイトではこのようにドキュメント内に Python {process.env.PYODIDE_PYTHON_VERSION} のREPLが埋め込まれており、インストール不要ですぐにPythonコードを試せます。気軽に利用してください。
+このウェブサイトではドキュメント内に Python {process.env.PYODIDE_PYTHON_VERSION} の実行環境を埋め込んでいます。
+以下のように青枠で囲われたコード例には自由にPythonコードを書いて試すことができます。気軽に利用してください。
 
 ```python-repl
 >>> message = "Hello, Python!"
@@ -86,6 +87,7 @@ class str(object)
 ## スクリプトの実行方法
 
 一連の処理をまとめて実行する場合は、`.py` という拡張子を持つファイルにコードを記述します。例えば、`hello.py` というファイルを以下のように作成します。
+REPLでは式を入力するだけでも結果が表示されていましたが、スクリプトで結果を表示するには `print()` 関数を使う必要があります。
 
 ```python:hello.py
 print("Hello from a Python script!")
@@ -99,8 +101,6 @@ print("Hello from a Python script!")
 Hello from a Python script!
 ```
 
-REPLでは式を入力するだけでも結果が表示されていましたが、スクリプトで結果を表示するには `print()` 関数を使う必要があります。
-
 ### __main__ について
 
 前述の hello.py のようにファイルの1行目から処理を書いても問題なく動作しますが、一般的には以下のようなお決まりの書き方が用いられます。