한 줄에서 일부 텍스트를 선택한 뒤 composer 버튼으로 감싸기(wrap)를 적용하면 인라인 감싸기가 적용됩니다. 이 방법은 동작은 하지만, 선택된 텍스트의 마지막 글자가 일부 잘리는 문제가 있습니다:
![]()
인라인 감싸기를 만드는 방법 중 하나이며, 같은 줄에 다른 콘텐츠가 없으면 자동으로 블록 감싸기로 변환됩니다.
다른 방법은 <span data-attribute>인데, 리치 에디터에서는 지원되지 않습니다(data-attribute가 제거됨). 하지만 마크다운 에디터에서는 완전히 지원됩니다. 흥미롭게도, 이 허용 구문은 discourse/frontend/pretty-text/addon/allow-lister.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub 에 나열되어 있지 않고, 대신 discourse/frontend/discourse-markdown-it/src/features/d-wrap.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub 에 있습니다 ![]()
<span data-attribute>는 메타(meta)에 문서화되어 있으며, 제 포럼 밖에서도 실제 사용되고 있을 가능성이 높습니다. 같은 줄에 다른 콘텐츠가 없더라도 블록 요소로 변환되지 않는다는 장점이 있습니다.
이런 식으로 한 줄에 단독으로 있는 일반 감싸기:
[wrap="fish"]text[/wrap]
블록으로 렌더링됩니다:
<div class="d-wrap" data-wrap="fish">
<p>text</p>
</div>
제 지식 범위 내에서 이 동작을 피하는 유일한 방법들은 다음과 같습니다:
-
<span data-attribute>사용:<span data-fish>text</span>다음과 같이 렌더링됩니다:
<span data-fish="">text</span> -
줄의 시작이나 끝에 공백이 제거되지 않는(가장 이상적으로는 제로-폭) 공백, 예:
​을 추가합니다.​[wrap=fish]Fishyfishy[/wrap]다음과 같이 렌더링됩니다:
​<span class="d-wrap" data-wrap="fish">Fishyfishy</span>
후자는 다소 해킹(hacky)적인 방법입니다.
저는 리치 에디터에서 첫 번째 해결책을 사용할 수 있기를 선호합니다. 더 일반적으로, 인라인 감싸기를 쉽게 만들 수 있는 어떤 방법도 좋겠습니다.