[{"data":1,"prerenderedAt":199},["ShallowReactive",2],{"content-/lesson-page-table-code-formatting":3,"all-pages-for-dir":197,"og-image-/lesson-page-table-code-formatting":198},{"id":4,"title":5,"body":6,"category":178,"description":179,"extension":180,"meta":181,"navigation":182,"ogImage":183,"path":184,"project_name":185,"published":186,"publishedAt":187,"seo":188,"stem":189,"tags":190,"todo":183,"unpublished":186,"updatedAt":183,"__hash__":196},"pages/2026-07/2026-07-03/lesson-page-table-code-formatting.md","レッスンページの表示改善 — テーブルは余白で区切り、コードブロックは折り返してhighlight.jsで着色する",{"type":7,"value":8,"toc":161},"minimark",[9,13,37,40,44,47,50,53,56,59,62,65,73,86,90,93,96,107,110,114,117,120,124,127,134,138,141,144],[10,11,12],"h2",{"id":12},"この記事のポイント",[14,15,16,20,23,31,34],"ul",{},[17,18,19],"li",{},"昨日積み残した自作講座（Claude Codeスキルを教材化したSVG図解編）のレッスンページ検証を再開し、表示の粗を順に潰した",[17,21,22],{},"テーブルは罫線を足すのではなく、余白と薄いグレー背景で領域を区切る方針にした",[17,24,25,26,30],{},"コードブロックは素の ",[27,28,29],"code",{},"\u003Cpre>"," が28箇所。スタイル追加に加えて、横スクロールバーが出ないよう折り返しを指定した",[17,32,33],{},"シンタックスハイライトは Nuxt Content の shiki が使えない構成だったので、highlight.js をクライアント側で遅延ロードした",[17,35,36],{},"メインのモデルは Fable 5、実装系タスクは Sonnet 5 のサブエージェントに振る運用方針を決めた",[10,38,39],{"id":39},"昨日の積み残しから再開",[41,42,43],"p",{},"「そういえば昨日の積み残しがあったと思うんですけど」と切り出して、memo の記録を掘り出してもらった。自作講座のレッスンページは実装がほぼ終わっていて、残りは表示検証だけと分かった。",[41,45,46],{},"ここでモデルの運用を相談した。メインのセッションは Fable 5 で回すとして、実装は Sonnet 5 のサブエージェントに任せてもいいのではないか。返ってきた整理は「今回の残作業は検証中心なのでメインで進める。今後の実装系タスクは Sonnet 5 委任で問題ない」。この日はその方針で走らせた。",[41,48,49],{},"検証はブラウザ確認から。レッスン一覧のカード表示、2カラム（ミラーカラム）表示、ページャー、矢印キーでのセクション遷移と順に見ていった。配布物のDLリンクは zip と個別6件がすべて 200 を返し、未ログイン時のガードも cookie なしの curl で効いていることを確認してもらった。",[41,51,52],{},"ひとつ想定外だったのは、検証を始めた矢先にセッションリミットに当たったこと。リセット時刻の表示を眺めていても進まないので、アカウントを切り替えて続きを進めた。",[10,54,55],{"id":55},"テーブルが文字の壁になっていた",[41,57,58],{},"検証中のスクリーンショットを貼って指摘した。テーブルデータのつもりの領域に、折り返しもカラム境界の線もなく、文字がひと続きに貼り付いている。どの値がどのカラムに属するのか、目で追えない。",[41,60,61],{},"直し方は自分から指定した。罫線を引いて区切るのではなく、すでに入っているマージンを活かす。ヘッダーは色を変え、各領域に薄いグレーの背景を敷いて、スペースで区切られていることを示す。線を足すと画面の情報量が増えるが、余白と背景色なら要素を増やさずに区切れる。この方針で修正してもらい、HMR越しに反映を確認した。",[10,63,64],{"id":64},"コードブロックは2段階で直した",[66,67,69,70,72],"h3",{"id":68},"_1回目-素の-pre-が28箇所","1回目 — 素の ",[27,71,29],{}," が28箇所",[41,74,75,76,78,79,82,83,85],{},"コードブロックのCSSを調べてもらったら、スタイルの当たっていない素の ",[27,77,29],{}," が28箇所見つかった。本文表示の ScrollArticle と Theater モードの TheaterViewer、両方のコンポーネントに ",[27,80,81],{},"pre","/",[27,84,27],{}," のスタイルを追加させた。この時点で ESLint 指摘ゼロ、既存テスト2,631件PASSまで確認。",[66,87,89],{"id":88},"_2回目-横スクロールバーを消す","2回目 — 横スクロールバーを消す",[41,91,92],{},"別のページを見ていたら、コードブロックの下にスクロールバーが顔を出していた。長い行が折り返されずに右へ突き抜けている。「スクロールバーが下に出ないようにうまく改行してほしい」と投げて、折り返しを指定させた。",[41,94,95],{},"あわせて「mdx-playground と同じようにハイライトを付けられないか」と聞いた。調べてもらった答えはこうだった。",[14,97,98,101,104],{},[17,99,100],{},"eurekapu-nuxt4 にはハイライト系の依存がそもそも入っていなかった",[17,102,103],{},"mdx-playground（apps/web）は Nuxt Content 組み込みの shiki でビルド時にハイライトしている",[17,105,106],{},"eurekapu-nuxt4 は Nuxt Content 不使用でコードを v-html 描画しているため、同じ仕組みは持ち込めない",[41,108,109],{},"そこで highlight.js（v11.11.1）をクライアント側で導入することにした。遅延ロード式のハイライトディレクティブを書かせて、TheaterViewer の v-html コンテナ2箇所（Article モードの本文と Theater モードのキャプション）に適用。XML として38トークンが着色されるのをブラウザで確認し、コンソールエラーなし、テストの回帰なしまで見た。",[10,111,113],{"id":112},"レイアウト混在の疑問-バグではなく仕様だった","レイアウト混在の疑問 — バグではなく仕様だった",[41,115,116],{},"隣り合う2つのセクションでレイアウトが違うことに気づいた。片方は右側に目次が出るパターン、もう片方は max-width でコンテンツ幅を決めるパターン。「これってなんで混在してるんですか？」と聞いて、データ構造とレイアウト分岐を追ってもらった。",[41,118,119],{},"答えは、ビューアーがセクション単位で2つの描画モードを切り替えている仕様だった。バグ修正ではなく仕様の理解で終わった一件。原因を確かめる前に「揃えて」と指示していたら、意図した切り替えを壊すところだった。",[10,121,123],{"id":122},"図スライドの境界-枠線案を取り下げて幅760pxに統一","図スライドの境界 — 枠線案を取り下げて幅760pxに統一",[41,125,126],{},"図スライドと本文の境界が曖昧で、急にフォントが変わった感じがして気持ち悪い。最初は「細いグレーの線で囲ってもらえますか」と枠線を頼んだが、見た結果取り下げて、コンテンツ幅を本文と同じ760pxに統一する案だけ適用した。境界を線で主張するより、幅が揃っていれば同じ紙面の続きに見える。",[41,128,129,130,133],{},"仕上げに、目次あり・なしの両タイプのページでカラム位置を実測させたら8pxのズレが残っていた。オフセットを100pxちょうどに調整して解消。スライドSVGの背景を揃える一括スクリプトも回したが、34枚のうち12枚だけ背景rectの書き方が他と違うか背景そのものがなく、挿入位置を ",[27,131,132],{},"\u003C/svg>"," 直前（描画順で最前面）に変えるスクリプト修正で通した。",[10,135,137],{"id":136},"締め-77ファイルをコミット","締め — 77ファイルをコミット",[41,139,140],{},"最後に全体を見て「じゃあこれでいいか。OK」とコミットを頼んだ。講座に関係する変更だけを選別して77ファイル・+6,554行。ミラーカラム用データ9本、ページ10枚、SVG34枚、配布物一式、レイアウト配線まで、2つのコミットに分けて入った。",[10,142,143],{"id":143},"学び",[14,145,146,149,152,155,158],{},[17,147,148],{},"表の区切りは罫線より先に余白と背景色を試す。線は情報を足すが、余白は要素を増やさずに区切れる",[17,150,151],{},"ハイライトは「フレームワークに入っているはず」と思い込まない。shiki は Nuxt Content とセットで、v-html 描画のプロジェクトには highlight.js のクライアント導入が別途要る",[17,153,154],{},"レイアウトの混在を見つけても、直す前に「仕様か、バグか」を確かめる。今回は仕様だった",[17,156,157],{},"境界の曖昧さは枠線で囲うより、幅を揃える方が効くことがある。一度枠線を試して取り下げたからこそ比較できた",[17,159,160],{},"検証中心の日はメインモデル一本で足りる。実装をまとめて振る日に Sonnet 5 サブエージェント委任を使う、という切り分けができた",{"title":162,"searchDepth":163,"depth":163,"links":164},"",2,[165,166,167,168,174,175,176,177],{"id":12,"depth":163,"text":12},{"id":39,"depth":163,"text":39},{"id":55,"depth":163,"text":55},{"id":64,"depth":163,"text":64,"children":169},[170,173],{"id":68,"depth":171,"text":172},3,"1回目 — 素の \u003Cpre> が28箇所",{"id":88,"depth":171,"text":89},{"id":112,"depth":163,"text":113},{"id":122,"depth":163,"text":123},{"id":136,"depth":163,"text":137},{"id":143,"depth":163,"text":143},"dev","自作講座のレッスンページで、境界線のないテーブルと横スクロールバーの出るコードブロックを直した記録。罫線ではなく余白と薄いグレー背景で区切り、pre/codeの折り返しとhighlight.jsのクライアント遅延ロードまで整えた。","md",{},true,null,"/lesson-page-table-code-formatting","eurekapu-nuxt4",false,"2026-07-03T00:00:00.000Z",{"title":5,"description":179},"2026-07/2026-07-03/lesson-page-table-code-formatting",[191,192,193,194,195],"Nuxt","CSS","highlight.js","表示改善","サブエージェント","UPcq8o3WYAV-sGeNCjfB-vHHD4YMl6igII66NetxW2s",[],"https://log.eurekapu.com/og/blog/lesson-page-table-code-formatting.png?v=2026-07-03T00%3A00%3A00.000Z&title=%E3%83%AC%E3%83%83%E3%82%B9%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E8%A1%A8%E7%A4%BA%E6%94%B9%E5%96%84%20%E2%80%94%20%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AF%E4%BD%99%E7%99%BD%E3%81%A7%E5%8C%BA%E5%88%87%E3%82%8A%E3%80%81%E3%82%B3%E3%83%BC%E3%83%89%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AF%E6%8A%98%E3%82%8A%E8%BF%94%E3%81%97%E3%81%A6highlight.js%E3%81%A7%E7%9D%80%E8%89%B2%E3%81%99%E3%82%8B&author=Kei%20Komatsu&sig=fb992c0913480945",1783124600743]