Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Add indentation guides to the code editor

オープン
  • 何か問題がありますか？
#254 コメント 2 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@sidney-Hung がすでに取り組んでいます。

2026年10月7日 から。

  • #267 @sidney-Hung による — オープン

評価

この issue はまだ評価されていません。

説明

Summary

Add vertical indentation guides (indent lines) to the code editor component to improve visual hierarchy and readability when navigating nested code.

Motivation / Problem Statement

When viewing or editing code with multiple levels of nesting it can be difficult to visually trace which indentation level matches which block.

Adding indentation guides will:

  • Make block scope and code hierarchy clear at a glance.
  • Prevent misaligned code during editing.
Proposed Architecture & Changes

The editor relies on multiple synchronized layers stacked behind the <textarea> (the line-number gutter, the syntax-color overlay, and the input textarea itself). This change introduces a dedicated fourth layer, #editor-guides, positioned beneath the syntax-color overlay:

File Proposed Change
web/indent-guides.js (new) Implements indentGuides(code) to generate HTML for the guides layer. Each full 4-column indent level produces a <span class="indent-guide">. Tabs and 4 spaces align to the same guide; partial indentation yields no guide.
web/interview.html Injects the <pre id="editor-guides"> layer into the editor markup.
web/interview.js Repaints guide lines strictly on text changes (paintEditor()), bypassing unnecessary redraws on caret movement. Synchronizes scroll offsets (scrollTop, scrollLeft) with the textarea.
web/styles.css Enforces font, sizing, padding, and tab-stop parity across layers. Sets guide text to transparent and disables pointer events (pointer-events: none). Renders guides as 1px grey vertical lines spanning the full line height.
Key Design Decisions & Considerations
  • Full-Line Layout Rendering: Rather than rendering only leading whitespace, the entire line is written out with transparent text. This ensures #editor-guides shares the exact scrollable scrollWidth and scrollHeight as <textarea>, preventing guide alignment drift on long lines or near file bottoms.
  • Blank-Line Depth Continuity: Empty lines inherit the shallower depth of their nearest non-blank neighbors (min(prev_indent, next_indent)). Guides run unbroken through blank lines inside a block and terminate cleanly once the block ends.
  • Continuous Vertical Lines: Uses display: inline-block instead of standard inline spans to ensure each segment reaches the full line height, rendering solid continuous lines instead of broken dashes.
  • Separation of Concerns: The existing syntax highlighter and <textarea> remain untouched. The trade-off is managing font, sizing, and scroll synchronization across one additional layer.
Verification & Testing
  • tests/browser/indent-guides.test.js (new): 7 tests covering nesting depth, tab vs. space mixing, HTML character escaping, blank-line width calculation, and trailing newlines.
  • tests/browser/editor-font-size.test.js: Extended to assert that the guide layer maintains identical alignment with the <textarea> across all font sizes.
Result
Image
主要言語
Rust
スター
144
フォーク
41
平均マージ
1日 7時間
マージ済み PR（30日）
94

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

sysprog21/codetrial のほかの issue

sysprog21/codetrial の issue をすべて見る

似ている issue

Rust の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。