feat: add visual prompt rendering for code blocks

[keytech42]

기능 제안: 코드 블록 내 프롬프트(기호) 시각화 지원

🧩 제안 배경

문서 내 쉘 명령어나 디버깅 예제를 코드 블록으로 작성할 때, 프롬프트($, #, (gdb) 등)를 시각적으로 함께 보여줄 필요가 있다.
하지만 프롬프트를 코드 블록 본문에 직접 포함하면 복사 시 불필요한 문자열이 함께 복사돼 사용성을 해친다.
프롬프트는 시각적으로는 노출되되, 실제 복사되는 텍스트에는 포함되지 않도록 분리 렌더링할 수 있어야 한다.

💡 제안 내용

프롬프트 기호를 코드 블록의 속성(prop)으로 지정하고, 렌더링 결과에만 반영되도록 처리한다.
본문에는 명령어만 작성하고, 프롬프트는 메타 정보로 분리해 전달한다.

요구 사항:

• $, #, (gdb) 등 프롬프트 기호를 코드 블록 좌측 또는 인라인으로 시각적 표시
• 복사 시에는 명령어 본문만 클립보드에 포함되도록 처리
• 프롬프트 종류를 마크다운 코드 블록의 속성으로 지정 가능
• 접근성을 고려해 aria-hidden 등 사용

예시 입력

```shell prompt="$"
echo "Hello"
apt update
```

기대 렌더링 결과

$ echo "Hello"
$ apt update

복사 시:

echo "Hello"
apt update

🔧 구현 접근

Starlight는 코드 블록 렌더링에 Expressive Code를 사용하므로, 해당 기능은 Expressive Code의 커스텀 플러그인으로 구현하는 것이 적절해 보인다.

플러그인은 다음을 수행한다:

• 코드 블록 속성에서 프롬프트 기호를 읽어 각 줄에 시각적으로 표시
• 렌더링 시 프롬프트를 별도 레이어로 분리
• 복사 시 프롬프트가 제외되도록 DOM 구조 또는 클립보드 핸들링을 조작
• 접근성과 유연성을 위해 aria-hidden, data-* 속성 등을 활용

🔠 prop 명칭에 대한 고려

현재 제안하는 속성명은 prompt이다.

• prompt는 직관적이고 간결하지만, 일반적인 용례(예: window.prompt)와의 혼동 가능성 있음
• 대안으로 promptSymbol, promptPrefix, shellPrompt, uiPrompt 등을 고려할 수 있음
• 단일 타입 프롬프트 지원이 기본이라면 prompt가 적절하며, 확장이 필요할 경우 더 구체적인 이름이 바람직함

✨ 기대 효과

• 문서 내 예제 코드의 시각적 명확성 향상
• 사용자는 별도 편집 없이 명령어를 바로 복사해 사용할 수 있음
• 다양한 환경(쉘, 루트, 디버거 등)에 유연하게 대응 가능
• 유지보수 측면에서도 Expressive Code의 확장 방식과 잘 맞음

[keytech42]

원글에서 접근성과 유연성을 위해 aria-hidden, data-* 속성 등을 활용이라 언급한 부분을 이하에서 구체화한다.
주 기능의 접근성과 유연성 측면을 좀 더 확장하는 방향에 대한 제안이다.

기존 제안 - 코드 블록에 단순 문자열 형태로 프롬프트를 지정하는 예:

```shell prompt="$"
echo "Hello"
```

이 방식은 기본적인 사용에는 충분하지만, 확장하여 다음과 같은 구조화된 형태도 고려 가능:

```shell prompt="{ symbol: '$', color: 'gray', ariaHidden: true }"
echo "Hello"
```

이처럼 prompt 값을 객체 형태로 확장하면 예시로 다음과 같이 다양한 렌더링 조건에 유연성을 부여할 수 있다:

• symbol: 표시할 프롬프트 문자 지정
• color: 시각적 스타일 지정 (선택적)
• ariaHidden: 스크린리더가 프롬프트를 무시하도록 설정 (접근성 향상)
• 이후 필요 시 data-* 속성도 추가 가능 (data-prompt, data-context 등)

이 구조를 통해 다양한 렌더링 조건을 유연하게 지정할 수 있다:

속성	설명
symbol	시각적으로 표시할 프롬프트 문자 ($, #, (gdb) 등)
color	프롬프트의 스타일을 조정 (예: "gray", "#ccc" 등)
ariaHidden	true일 경우 스크린리더가 프롬프트를 무시 (접근성 향상)
(기타)	data-* 속성 등 추가적인 정보 전달용 확장 (data-prompt, data-context 등)

예상 렌더링 결과 (HTML 구조):

<span class="prompt" aria-hidden="true" style="color: gray">$</span>
<span class="code">echo "Hello"</span>

이런 구조는 프롬프트를 복사 대상에서 제외하면서도, 렌더링 결과상 시각적으로 더 명확한 전달을 가능하게 한다.
또한 커스터마이징 요구에도 유연하게 대응할 수 있다.