수식 입력 및 외부 서비스 개체 삽입 기능 업데이트

안녕하세요, 이번 업데이트에서는 벨로그에 드디어 수식 입력 기능이 지원됐습니다! 이 기능에 대하여 작년부터 요청이 꾸준히 있었습니다. 추가적으로, 벨로그 v2 릴리즈가 될 때 Youtube, Twitter, CodeSandbox, Codepen을 포스트에 삽입할 수 있는 기능이 도입됐었는데, 이에 대한 별도 공지를 기존에 하지 않았어서, 이번 기회에 함께 안내드립니다.

수식 입력

수식 입력은 KaTeX 이라는 라이브러리를 적용하여 도입을 했습니다. LaTeX 형식으로 수식을 입력하시면 되며, 블록 수식 및 인라인 수식을 작성 할 수 있습니다.

예시를 확인해볼까요?

블록 수식

블록 수식은 $$ 문자로 블록을 감싸시면 됩니다.

$$
\displaystyle\sum_{i=1}^{k+1}i
\displaystyle \displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)
$$

결과는 다음과 같습니다.

위 수식이 보이지 않는다면 F5를 눌러 새로고침 후 다시 확인해보세요!

인라인 수식

인라인 수식은 수식을 $ 문자로 감싸시면 됩니다.

인라인 수식: $f(x) = \sqrt{1+x}, \quad x \ge -1$$

결과는 다음과 같습니다.

인라인 수식: $f(x) = \sqrt{1+x}, \quad x \ge -1$

외부 서비스 개체 삽입

현재 다음 서비스들에 대하여 포스트에 개체 삽입 기능이 지원되고 있습니다.

• Youtube
• Twitter
• CodeSandbox
• Codepen

지원 서비스 추가 요청은 GitHub Issue를 통해서 요청해주시길 바랍니다.

개체 삽입 신택스는 다음과 같습니다.

![service_name](id)

service_name: youtube, twitter, codesandbox, codepen
id: 고유 ID 값

그런데, 원하는 페이지의 고유ID를 추출하는 방법을 또는 이 신택스를 외워두실 필요는 없습니다. 외부 서비스에서 공유 전용 소스코드를 복사하신 후, 벨로그 에디터에 붙여 넣으시면 자동으로 변환됩니다. Codepen의 경우 iframe 형태의 소스 코드를 복사하셔야 합니다.

예시

!youtube[rutC3xoAjo4]

!twitter[velog_official/status/1238490689752535045]

!codesandbox[cool-mountain-tffvw?fontsize=14&hidenavigation=1&theme=dark]

!codepen[aaroniker/embed/NWqyego?height=265&theme-id=light&default-tab=css,result]

주의사항: 외부 서비스 개체를 삽입 할 땐 사이 사이에 한 줄이 꼭 띄워져있어야 제대로 나타납니다.

!youtube[rutC3xoAjo4]
!youtube[rutC3xoAjo4]

위와 같이 작성하시면 결과가 보여지지 않습니다.

결과