Merged
Conversation
はてなブログ等のホストページグローバル CSS（table/td ルール）が .gce-* 要素に干渉する問題と、文中の GitHub URL リンクが意図せず 変換される問題を修正する。 - src/styles.ts: セレクタを .gce-container .gce-xxx 形式に変更して specificity を引き上げ、外部テーマ CSS に勝てるようにした。 .gce-container * の box-sizing リセット、display:table 明示、 border/padding/line-height の明示プロパティを追加。 - src/index.ts: isStandaloneAnchor() を追加し、前後のシブリングが null または <BR> でない <a> タグは変換対象から除外する。 - test/index.test.ts: isStandaloneAnchor に対応した既存テスト修正 と新規テスト 5 件を追加。 - test-page.html: 変換されないインラインリンクの手動確認ケースを追加。
実際のブログ HTML では <p> と <a> の間に改行・インデントの空白
テキストノード（nodeType === 3）が挿入される。前の実装では
テキストノードを一律 false にしていたため、以下のような
よく見られる HTML パターンで変換がスキップされていた:
<p>
<a href="https://github.com/...">...</a>
</p>
textContent?.trim() === "" の空白テキストノードを edge として
扱うことで、はてなブログ等の実際の HTML 構造でも正しく動作する。
空白テキストノードを透過させる実装では、改行＋インデントを挟んで
並ぶ複数の <a> タグが standalone と誤判定されて変換されてしまう
問題があった。
<p>
<a href="...">link1</a>
<a href="...">link2</a> ← 誤って変換されていた
</p>
isEdgeSibling で空白を単純に許容するのではなく、
nonWhitespaceSibling で空白テキストノードをスキップして
実質的な隣接ノードを取得するよう実装を変更した。
nonWhitespaceSibling で空白スキップ後の隣接ノードがブロック要素 （<h1>〜<h6>, <p>, <div> 等）の場合も行境界として扱うことで、 <body> 直下や <p> の外に単独で置かれた <a> を正しく変換対象と する。 <a> タグ同士が空白テキストノード越しに隣接するケースは、 nonWhitespaceSibling がスキップ後に <a>（非ブロック要素）を 返すため引き続き変換されない。
standalone アンカーのみを変換する仕様をユーザーが把握できるよう、 隣接ノードの判定ルール一覧と変換される/されない HTML の例を追加した。 はてなブログセクションに「単独行に置く必要がある」旨と各編集モード での正しい書き方・誤った書き方の例を追記した。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
はてなブログで git-code-embed を使用した際、以下の2つの問題が発生していた。
.gce-*要素に干渉し、意図した表示にならない変更内容
CSS specificity 強化 (
src/styles.ts).entry-content table td { border: 1px solid #d2d7e5 }.entry-content table td { padding: 5px 10px }.entry-content table { display: block; overflow: auto }line-height継承.gce-container .gce-xxx形式に変更し、外部テーマ CSS に勝てる specificity に引き上げ.gce-container *のbox-sizing: border-boxリセットを追加display: table、border-top/bottom/left: none、line-height等の明示プロパティを追加変換対象の限定 (
src/index.ts)isEdgeSibling()を追加: 隣接ノードがnull・空白テキストノード・<BR>のいずれかなら edge と判定isStandaloneAnchor()を追加: 前後のシブリングが両方 edge の<a>のみ変換対象とするテスト追加 (
test/index.test.ts)<p>でラップ）<br>隣接、テキスト囲み、同行2リンク等）手動確認ケース追加 (
test-page.html)変換されないインラインリンクのケースを3件追加。
確認
npm test全59件通過npm run build成功