ヘッダー行を pre と一体化し、出力欄に「実行結果」タブを付ける

- ツールバー行が白い帯として浮き、コードの上の隙間が広く見えていた
  ため、pre と同じ背景色を与えてコードブロックと一体のヘッダー行に
  する。ヘッダーが上の余白を兼ねるので、直後の pre の上 padding は
  0.25em に抑える
- RUN の出力欄のヘッダーが入力欄の枠に貼り付いて見えていたため、
  境に 2px の白を挟んで区切る
- 出力欄だとわかるように、出力欄ヘッダーの左端へ caption と同じ
  タブ様式の「実行結果」ラベルを付ける

Author: znz

theme/default/js/run.js

@@ -138,20 +138,24 @@ function setupBlock(pre, runner) {
       output = document.createElement('pre')
       output.className = 'highlight__run-output'
       output.setAttribute('aria-live', 'polite')
-      // COPY ボタン(先頭)を残したまま本文を書き換えられるように、
-      // 出力テキストは専用のテキストノードに持つ
+      // 出力テキストは専用のテキストノードに持つ(丸ごと差し替えられる)
       outputTextNode = document.createTextNode('')
       output.appendChild(outputTextNode)
       pre.after(output)
       // 実行結果もコピーできるようにする(script.js の公開フック)。
       // 出力は実行のたびに変わるので、クリック時のテキストを渡す
       if (window.ruremaAddCopyButton) {
         window.ruremaAddCopyButton(output, () => outputTextNode.data)
-        // 出力欄のツールバーと出力欄は、入力欄の pre に密着させて
-        // 1つのブロックに見せる(pre 下マージンとツールバー上マージンを消す)
+        // 出力欄のヘッダー行と出力欄は、入力欄の pre に密着させて
+        // 1つのブロックに見せる(境の 2px の白は CSS 側)。左端には
+        // 出力欄だとわかるように「実行結果」のタブを付ける
         const outToolbar = output.previousElementSibling
         if (outToolbar && outToolbar.classList.contains('highlight__toolbar')) {
           outToolbar.classList.add('highlight__toolbar--attached')
+          const label = document.createElement('span')
+          label.className = 'caption'
+          label.textContent = '実行結果'
+          outToolbar.insertBefore(label, outToolbar.firstChild)
           pre.classList.add('highlight--with-output')
         }
       }

theme/default/style.css

@@ -138,23 +138,30 @@ pre {
 }
 
 
-/* pre の直前に密着するツールバー行(script.js が生成)。
-   左端に caption のタブ、右端に RUN/COPY のボタン群を置く */
+/* pre の直前に密着するヘッダー行(script.js が生成)。pre と同じ背景色で
+   コードブロックと一体に見せる(白い帯として浮くと、コードの上の隙間が
+   広く見える)。左端に caption のタブ、右端に RUN/COPY のボタン群を置く */
 .highlight__toolbar {
   display: flex;
   align-items: flex-end;
   margin: 1em 0 0;
+  padding: 0.25em 0.25em 0 0.25em;
+  background-color: #f2f2f2;
 }
 .highlight__toolbar + pre {
   margin-top: 0;
+  /* ヘッダー行が上の余白を兼ねるので、上 padding は控えめにする */
+  padding-top: 0.25em;
 }
-/* RUN の出力欄: 入力欄の pre と出力欄(ツールバー+pre)を密着させて
-   1つのブロックに見せる(js/run.js が付与) */
+/* RUN の出力欄: 入力欄の pre と出力欄(ヘッダー行+pre)を密着させて
+   1つのブロックに見せる(js/run.js が付与)。境には 2px だけ白を挟み、
+   出力欄のヘッダー(「実行結果」タブ+COPY)が入力欄の枠に貼り付いて
+   見えないよう区切る */
 .highlight--with-output {
   margin-bottom: 0;
 }
 .highlight__toolbar--attached {
-  margin-top: 0;
+  margin-top: 2px;
 }
 
 /* ツールバー右端のボタン置き場。ボタン間の隙間のカーソル形状と