테마 컴포넌트에서 원본 콘텐츠를 접근하는 방법?

개발
1

테마 컴포넌트를 개발 중인데, 다음과 유사한 작업을 수행하고 싶습니다:

[code]
main() {
  printf("Hello World!\n");
}
[/code]

위 코드는 다음과 같은 결과를 반환합니다:

main() {
  printf("Hello World!\n");
}

이를 위해 api.decorateCooked()를 사용하고 있지만, 콘텐츠가 이미 쿡(cooked) 상태이므로 “불필요한” 공백이 제거되어 있습니다. 예를 들어, 위 예시에서 printf 앞의 공백이 사라진 것입니다.

사용자가 입력한 “미쿡(uncooked)” 텍스트에 접근하는 방법은 무엇일까요?

명확히 하자면, 제 테마 컴포넌트로 지원하고자 하는 기능은 사용자가 다음과 같은 내용을 작성할 수 있도록 하는 것입니다:

[mytag]
main() {
  printf("Hello World!\n");
}
[/mytag]

제 테마 컴포넌트는 이를 이해하고 [mytag] ... [/mytag] 내부의 텍스트를 변환된 결과로 대체합니다.

2

raw에 접근하려면 플러그인을 사용해야 합니다.

다만, wrap 헬퍼를 사용하면 div 요소를 활용할 수 있습니다.

[wrap=test]
hello world
[/wrap]

다음과 같이 렌더링됩니다:

<div class="d-wrap" data-wrap="test">
<p>hello world</p>
</div>
3

감사합니다.

무료 플랜으로 Discourse가 호스팅하는 Discourse 인스턴스에 커스텀 플러그인을 설치할 수 있을까요? 방법을 찾지 못했습니다.

테마 컴포넌트에 대한 raw 지원 구현이 가능할까요? 가능하다면, 이를 위한 PR을 받아 주시겠습니까?

wrap 헬퍼는 제가 요청한 기능을 수행하지 않습니다. 이 역시 들여쓰기를 제거합니다.

4

아쉽게도 무료, 표준, 비즈니스 플랜에서는 사용자 정의 플러그인을 사용할 수 없습니다. 여러 고객을 호스팅하는 클러스터를 사용 중이며, 특정 고객만을 위해 플러그인을 실행할 수 있는 메커니즘이 없습니다.

테마 구성 요소를 통해 마크다운 확장 기능을 주입할 수 있는 기능을 지원할 수 있는지에 대해서는 과거에 생각해 본 적이 있지만, 이를 추가할 구체적인 계획은 없습니다. 구현하기가 매우 어려울 것입니다.

이중 래핑(double wrapping)은 어떨까요? 이는 بالتأكيد 모든 들여쓰기를 유지할 수 있습니다.

[wrap=test]
```
1
  1
    3
```
[/wrap]

아니면 다음과 같은 방법을 사용하는 것만으로도 작동할 수 있습니다. 이렇게 하면 작업할 수 있는 고유한 요소를 갖게 됩니다:

```custom
test
```
5

저한테도 엄청 어려운 건가요, 아니면 구현에 대한 사전 지식이 없는 저 같은 사람에게만 그런 건가요? 난이도의 핵심은 어디에 있나요? 전체 마크다운 확장 기능보다는 원시 데이터에 대한 읽기 전용 접근처럼 더 간단한 것을 구현하는 게 더 쉬울까요?

네, 그건 하나의 선택지가 될 수 있겠네요. 감사합니다.

6

프론트엔드에는 raw 게시글 내용이 전달되지 않습니다. 조리된(cooked) 버전만 전달됩니다. 이는 클라이언트로 전송되는 페이로드 크기를 줄여줍니다. 또한 서버가 최종적으로 마크다운에서 HTML로의 변환을 담당합니다. 만약 이 모든 작업을 브라우저에서 런타임에 수행한다면, 상당한 추가 비용이 발생하고 복잡한 보안 벡터에 대한 우려도 커질 것입니다.

7

@sam 도움을 주셔서 감사합니다. 당신의 제안이 잘 작동했고, 사용자 입장에서도 꽤 괜찮은 구문을 제공해 주었어요:

Screenshot from 2020-05-04 13-40-01
Screenshot from 2020-05-04 13-40-01948×460 23.4 KB

:sunglasses:

8

정확히 말하자면, 당신이 실제로 원하는 것이 커피라면 코드 블록을 세 개의 백틱(```)으로 감싸면 된다는 걸 알고 있죠? 당신의 예시가 어느 정도까지 비유인지 판단하기 어렵습니다.

9

@pfaffman '커피 블록’이 무슨 뜻인지 모르겠지만, 세 개의 백틱(```)이 코드 블록을 생성한다는 것은 알고 있습니다.

제 예시가 왜 비유여야 하는지 모르겠네요. 대체 무엇을 위한 비유인가요? 제가 올린 이미지는 주어진 코드로 제 테마 컴포넌트가 어떤 것을 생성하는지 보여주기 위한 스크린샷입니다.

10

죄송합니다. 제 모바일 키보드에서는 coffee와 code가 거의 같아서 문장을 쓸 때마다 항상 잘못 입력되고 있어요!

여러 번 살펴봤는데, 예시에서 당신의 이미지와 표준 코드 블록 사이에 어떤 차이가 있는지 알 수가 없네요.

11

제 테마 컴포넌트가 추가한 그래프입니다.

12

아! 그래프 언어용으로 TeX 대신 수학 플러그인 같은 걸 원하시는 거죠?

13

네, 그런 것 같습니다. 수학 플러그인은 직접 확인해 보지는 못했지만, 개념적으로는 비슷해 보입니다. Discourse Graphviz 의 기본 기능과 동일하지만, 이 플러그인은 그래프 사이의 애니메이션 전환과 같은 훨씬 고급 기능을 지원하며, 스타일과 동작을 제어할 수 있는 다양한 옵션을 제공합니다.

14

또한 Discourse Graphviz 도 있지만, 플러그인을 설치할 수 없으므로 이 문제가 해결되지 않을 것 같습니다.

15

관심 있으시면 GitHub 저장소를 확인해 보세요. 사용법에 대한 상세한 문서를 먼저 작성해야 하기 때문에 아직 공식적으로 어디에도 배포되지 않았습니다.

16

그렇게 하면 작동하는 것 같고, 아마도 제가 놓친 부분이 있는 것 같지만, 해결책은 변경 사항을 PR로 제출한 후 비즈니스 플랜에서 사용 가능하도록 하는 것입니다.

17

죄송합니다, 말씀하신 내용을 잘 이해하지 못하겠습니다. 이것은 테마 컴포넌트이며, 어떤 플랜을 사용 중이든 웹 인터페이스를 통해 관리자라면 어떤 Discourse 인스턴스에든 설치할 수 있습니다.

18

아마 내가 제대로 이해하지 못한 것 같습니다. 하지만 당신이 하려는 일은 graphviz 플러그인을 확장하여 더 많은 graphviz 기능을 지원하고, 그 기능들이 해당 플러그인에 통합되는 것이 더 합리적이라는 것 같다는 인상을 받았습니다.

하지만 정확히 무엇을 원하시는지 잘 모르겠어서, 제 추측이 완전히 틀렸을 수도 있습니다.

19

이제 말씀하신 내용을 이해했습니다. 아니, 무료 플랜을 사용 중이므로 해당 플러그인을 사용할 수 없었고, 그래서 대신 테마 컴포넌트를 개발했습니다. 추가 기능은 기존 플러그인과 다른 라이브러리를 기반으로 하기 때문에 쉽게 추가할 수 있는 일종의 보너스였습니다.

플러그인과 테마 컴포넌트는 매우 다르기 때문에 두 사이에서 코드를 재사용하는 것은 불가능하다고 생각합니다. 하지만 관심이 있는 사람이 기존 플러그인에 동일한 기능을 추가하는 것은 가능할 것 같습니다.