# Onebox에서 GitHub 링크의 라인 컨텍스트

**URL:** https://meta.discourse.org/t/line-context-for-github-links-in-onebox/156389
**Category:** Support
**Created:** [6월 30, 2020, 6:55오후 UTC](https://meta.discourse.org/t/line-context-for-github-links-in-onebox/156389 "2020-06-30T18:55:04Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![guildai](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/guildai/32/248544_2.png) [@guildai](https://meta.discourse.org/u/guildai)
#### Post date: [6월 30, 2020, 6:55오후 UTC](https://meta.discourse.org/t/line-context-for-github-links-in-onebox/156389/1 "2020-06-30T18:55:05Z")

</div>

GitHub 링크에서 단일 줄을 지정하면, onebox는 해당 줄을 컨텍스트와 함께 표시합니다:

[https://github.com/guildai/guildai/blob/master/examples/get-started/mnist\_mlp.py#L16](https://github.com/guildai/guildai/blob/master/examples/get-started/mnist_mlp.py#L16)

여러 줄을 지정하면, onebox는 컨텍스트 없이 해당 줄들을 표시합니다:

[https://github.com/guildai/guildai/blob/master/examples/get-started/mnist\_mlp.py#L16-L18](https://github.com/guildai/guildai/blob/master/examples/get-started/mnist_mlp.py#L16-L18)

이러한 차이에 대한 이유를 이해합니다. 하지만 줄 범위에 대해서도 컨텍스트를 표시하고 싶습니다. 이를 위한 특별한 트릭이 있을까요?

또한, 표시할 컨텍스트 줄 수를 설정할 수 있는 방법이 있나요?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [6월 30, 2020, 7:27오후 UTC](https://meta.discourse.org/t/line-context-for-github-links-in-onebox/156389/2 "2020-06-30T19:27:19Z")

</div>

어떤 라인 수를 지정하느냐에 따라 달라질 것 같긴 해요(5개? 500개?), 하지만 좀 일관성이 없는 것에는 동의합니다.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [7월 1, 2020, 6:11오전 UTC](https://meta.discourse.org/t/line-context-for-github-links-in-onebox/156389/3 "2020-07-01T06:11:03Z")

</div>

현재 이 부분은 설정할 수 없습니다. 그런데 그냥 `L12-L20`을 요청할 수 있는데, 굳이 컨텍스트를 왜 신경 써야 하는지 궁금하네요.

이것은 사실 하나의 요청 안에 두 가지 기능 요청이 섞여 있는 것 같습니다 🙂 행을 "강조"한 뒤에 그 주위에 컨텍스트를 추가하는 것을 원하시는 건가요? 2~5줄 선택에는 유용할 수 있겠지만, 노란색으로 표시된 범위가 너무 크면 꽤 부담스러울 것 같습니다.

---

<div class="post-metadata">

### Author: ![guildai](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/guildai/32/248544_2.png) [@guildai](https://meta.discourse.org/u/guildai)
#### Post date: [7월 1, 2020, 12:31오후 UTC](https://meta.discourse.org/t/line-context-for-github-links-in-onebox/156389/4 "2020-07-01T12:31:09Z")

</div>

이 경우 저는 파일에 대한 일련의 변경 사항을 독자에게 단계별로 안내하고 있습니다. 한 줄만 강조하든 여러 줄을 강조하든, 각 경우에서 컨텍스트는 중요합니다.

해당 컴포넌트는 이미 컨텍스트와 함께 한 줄을 강조하는 기능을 제공합니다. 제가 언급한 사례에서는 동일한 동작을 여러 줄에 적용하기를 원합니다.

현재 방식의 타당성은 이해하지만, 컨텍스트와 함께 여러 줄을 강조하는 기능도 지원하는 것이 합리적이라고 생각합니다.

Onebox가 링크 자체를 넘어 설정 가능한 기능이 아니라면, 이를 가능하게 해야 합니다. 다음과 같은 방식이 어떨까요?

```plaintext
<span
  data-onebox-highlight="true"
  data-onebox-context="5"
  >https://github.com/.../get-started/mnist_mlp.py#L16-L18</span>

```

여기에는 컴포넌트가 포맷팅하고 표시할 내용을 구성하는 것 외에는 새로운 것이 많지 않습니다.

단순히 보면, 이는 백엔드에서만 변경이 필요한 것으로 보입니다. 다음 두 onebox.json 응답의 차이를 고려해 보세요:

- [단일 줄 + 강조 + 컨텍스트](https://my.guild.ai/onebox.json?url=https%3A%2F%2Fgithub.com%2Fguildai%2Fguildai%2Fblob%2Fmaster%2Fexamples%2Fget-started%2Fmnist_mlp.py%23L18&refresh=true&category_id=14&topic_id=203)
- [여러 줄만](https://my.guild.ai/onebox.json?url=https%3A%2F%2Fgithub.com%2Fguildai%2Fguildai%2Fblob%2Fmaster%2Fexamples%2Fget-started%2Fmnist_mlp.py%23L16-L18&refresh=false&category_id=3&topic_id=188)

예상할 수 있듯이, 하나는 `highlight` 줄과 컨텍스트를 포함하고 다른 하나는 포함하지 않습니다.

[백엔드](https://github.com/discourse/onebox/blob/master/lib/onebox/mixins/git_blob_onebox.rb)가 요청별로 구성 가능하게 된다면, 기존 포맷팅 규칙을 적용하는 문제일 뿐입니다. 구현은 [강조할 한 줄](https://github.com/discourse/onebox/blob/master/lib/onebox/mixins/git_blob_onebox.rb#L51)을 가정하고 있는 것으로 보입니다. 줄 범위를 지원하기 위한 변경은 최소한입니다(예: 강조할 줄의 배열을 사용하고 [멤버십을 확인](https://github.com/discourse/onebox/blob/master/lib/onebox/mixins/git_blob_onebox.rb#L146)하는 방식).

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [7월 2, 2020, 1:03오전 UTC](https://meta.discourse.org/t/line-context-for-github-links-in-onebox/156389/5 "2020-07-02T01:03:29Z")

</div>

이런 경우 100% 아웃라이인 것이라면 이 방식이 작동할 수도 있지만, 문제는 GitHub과 충돌한다는 점입니다. 이건 좋지 않죠.

`https://github.com/.../get-started/mnist_mlp.py?#L16-L18-context-3`

아니면 영역이 4줄 이하인 경우 기본으로 컨텍스트를 포함하도록 하는 것도 고려해볼 수 있습니다.

---

<div class="post-metadata">

### Author: ![guildai](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/guildai/32/248544_2.png) [@guildai](https://meta.discourse.org/u/guildai)
#### Post date: [7월 2, 2020, 1:21오후 UTC](https://meta.discourse.org/t/line-context-for-github-links-in-onebox/156389/6 "2020-07-02T13:21:21Z")

</div>

개인적으로는 암묵적인 동작은 피하는 편입니다. 이미 5줄을 강조하는 예제가 있습니다 🙂

이 문제를 해결하기 위해 임시 해결책을 구현했는데, 감싸는 GitHub 링크에 대한 설정을 포함하는 래퍼 div를 찾는 테마 컴포넌트를 사용합니다. 이 컴포넌트는 링크가 코드 줄로 대체된 시점을 파악하기 위해 DOM modified 이벤트를 대기한 뒤, 선택을 위해 `li.selected` 상태를 조작합니다. 이 해킹 방식은 검색된 줄을 변경하지 않으므로 컨텍스트를 추가하거나 제거할 수 없습니다.

기본값을 변경하거나 컴포넌트를 더 지능적으로 만드는 것보다 동작을 제어하기 위한 명시적인 메서드가 더 낫다고 생각합니다.

설정/환경 변수를 URL 자체에 전달하는 방식도 가능하지만, 이렇게 하면 링크의 의미론적 의미를 훼손하게 됩니다. 래핑 태그를 사용할 수 없는 경우라면, 최소한 onebox 전용 설정은 제거해야 할 것으로 보입니다.
