Skip to content

Commit 88e4ecc

Browse files
committed
docs: 変換対象の条件とはてなブログでの使い方を README に追記
standalone アンカーのみを変換する仕様をユーザーが把握できるよう、 隣接ノードの判定ルール一覧と変換される/されない HTML の例を追加した。 はてなブログセクションに「単独行に置く必要がある」旨と各編集モード での正しい書き方・誤った書き方の例を追記した。
1 parent 310cfb8 commit 88e4ecc

1 file changed

Lines changed: 66 additions & 6 deletions

File tree

README.md

Lines changed: 66 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,43 @@ GitHub blob URL を、シンタックスハイライト付きコードビュー
1111
<a href="https://github.com/owner/repo/blob/main/src/index.ts#L1-L10"></a>
1212
```
1313

14+
行範囲(`#L1-L10`)を省略するとファイル全体を表示します。
15+
16+
## 変換対象の条件
17+
18+
**前後に他のコンテンツがない「単独」の `<a>` タグのみ**を変換します。
19+
文中に埋め込まれたリンクや、同じ行に複数並んだリンクは変換されません。
20+
21+
隣接ノードの判定ルール:
22+
23+
| 隣接ノード | 扱い |
24+
|---|---|
25+
| なし(親要素の端) | 単独とみなす ✅ |
26+
| 空白・改行のみのテキスト | 単独とみなす ✅ |
27+
| `<br>` | 単独とみなす ✅ |
28+
| `<p>`, `<h1>``<h6>`, `<div>` 等のブロック要素 | 単独とみなす ✅ |
29+
| 文字を含むテキスト | 文中リンクとみなし変換しない ❌ |
30+
| 別の `<a>` 等のインライン要素 | 複数リンクとみなし変換しない ❌ |
31+
32+
```html
33+
<!-- 変換される -->
34+
<p><a href="https://github.com/owner/repo/blob/main/src/index.ts"></a></p>
35+
36+
<!-- 変換される(ブロック要素に挟まれた単独リンク) -->
37+
<h2>実装例</h2>
38+
<a href="https://github.com/owner/repo/blob/main/src/index.ts"></a>
39+
<h2>次のセクション</h2>
40+
41+
<!-- 変換されない(文中リンク) -->
42+
<p>詳細は<a href="https://github.com/owner/repo/blob/main/src/index.ts">こちら</a>を参照。</p>
43+
44+
<!-- 変換されない(複数リンクが並んでいる) -->
45+
<p>
46+
<a href="https://github.com/owner/repo/blob/main/a.ts"></a>
47+
<a href="https://github.com/owner/repo/blob/main/b.ts"></a>
48+
</p>
49+
```
50+
1451
## はてなブログでの使い方
1552

1653
### 1. はてなブログにスクリプトを読み込む
@@ -24,16 +61,39 @@ GitHub blob URL を、シンタックスハイライト付きコードビュー
2461

2562
### 2. 記事に GitHub blob URL を貼る
2663

27-
記事の編集画面(見たままモードやMarkdownモード)でリンクを挿入するだけで動作します。
28-
スクリプトがページ読み込み時に全リンクを自動スキャンして変換します。
64+
**単独の行に URL を貼ることが必要です。** 前後に文字が続く形で挿入すると変換されません。
2965

30-
Pro プランの場合は HTML 編集モードで直接 `<a>` タグを記述することもできます。
66+
#### 見たままモード・Markdownモード
3167

32-
```html
33-
<a href="https://github.com/owner/repo/blob/main/src/index.ts#L1-L10"></a>
68+
リンクを単独の段落として挿入します。Markdown の場合は前後に空行を入れます。
69+
70+
```markdown
71+
コードを確認してください。
72+
73+
https://github.com/owner/repo/blob/main/src/index.ts#L1-L10
74+
75+
上記がエントリーポイントです。
3476
```
3577

36-
行範囲(`#L1-L10`)を省略するとファイル全体を表示します。
78+
> **注意:** はてなブログの見たままモードでは、URL を貼り付けると自動的にリンクカードに変換される場合があります。変換された場合は `<a>` タグが単独行に配置されるため、git-code-embed も正しく動作します。
79+
80+
#### HTML編集モード(Pro プランまたは HTML モード)
81+
82+
`<a>` タグを `<p>` タグで囲み、単独で配置します。
83+
84+
```html
85+
<!-- 正しい書き方: <p> で囲んで単独行に置く -->
86+
<p><a href="https://github.com/owner/repo/blob/main/src/index.ts#L1-L10"></a></p>
87+
88+
<!-- 動作しない: 文中に埋め込む -->
89+
<p>詳細は<a href="https://github.com/owner/repo/blob/main/src/index.ts">こちら</a>を参照。</p>
90+
91+
<!-- 動作しない: 複数リンクを並べる -->
92+
<p>
93+
<a href="https://github.com/owner/repo/blob/main/a.ts"></a>
94+
<a href="https://github.com/owner/repo/blob/main/b.ts"></a>
95+
</p>
96+
```
3797

3898
## 既知の制限
3999

0 commit comments

Comments
 (0)