댓글 형식 지원

확장된 Markdown 구문과 HTML 태그를 포함하여 댓글에 다양한 콘텐츠를 추가할 수 있습니다.

형식 지원

전체 CommonMark (표준 Markdown 구문)과 함께 다음 확장을 지원합니다:

• GFM 스타일 표
• GFM 스타일 취소선
• 아래 첨자 및 위 첨자
• 이모지
• 코드 블록 하이라이팅
• $TEX$ 수식

GFM

Github Flavored Markdown

또한 보호 메커니즘을 트리거하지 않고 모든 HTML 콘텐츠를 자유롭게 삽입할 수 있습니다.

제한된 미리보기 지원

클라이언트의 크기를 제어하기 위해 공식 클라이언트 @waline/client에는 작은 Markdown 파서만 포함되어 있으며, 이로 인해 미리보기 패널에서 많은 문법이 올바르게 표시되지 않습니다 (댓글 영역에서는 올바르게 렌더링됩니다).

여기에는 다음과 같은 제한 사항이 포함됩니다:

• 표준 이모지 구문 (예: 🎉:tada:)이 올바르게 렌더링되지 않습니다

• 위 첨자 및 아래 첨자 (예: H~2~O, x^2^)가 올바르게 렌더링되지 않습니다

• $TEX$ 구문, 즉 수학 수식 (예: $a = 1$)이 기본적으로 렌더링되지 않습니다.

  공식 클라이언트를 사용할 때 texRenderer 옵션을 설정하여 미리보기에서 $TEX$ 렌더링을 커스터마이즈할 수 있습니다. Cookbook → 커스텀 $TEX$ 렌더러 사용을 참조하세요.

• 기본 하이라이터에서 코드 블록은 특정 구분자와 함께 임의의 색상으로 하이라이팅됩니다.

  공식 클라이언트를 사용할 때 highlighter 옵션을 설정하여 미리보기 시 코드 하이라이팅을 커스터마이즈할 수 있습니다. Cookbook → 커스텀 코드 하이라이팅을 참조하세요.

더 보기

원리

1. 패키지 크기를 고려하여 클라이언트는 기본적으로 렌더링에 marked를 사용하고 하이라이팅에 1kb 미만의 하이라이터를 사용하며, $TEX$ 렌더러를 포함하지 않아 위의 제한 사항이 발생합니다.

2. 사용자가 댓글을 제출하면 클라이언트는 커스텀 이모지 이미지를 삽입하고 원본 댓글을 서버로 보냅니다.

3. 서버는 원본 텍스트를 수신하고, 관련 플러그인과 함께 markdown-it을 사용하여 Markdown을 올바르게 렌더링하고, prismjs를 사용하여 언어에 따라 코드 블록을 하이라이팅하며, 사용자 설정에 따라 $TEX$ 렌더링을 수행하고, 마지막으로 XSS 처리를 수행합니다.

4. 처리가 완료되면 서버는 올바른 렌더링 콘텐츠를 저장하고 필요할 때 클라이언트에 반환하여 댓글 영역의 정상적인 표시를 보장합니다.