CodePen을 사용해 보면

Qiita 기사 등에서 자주 볼 수 있는 소스 코드를 쉽게 공유할 수 있는 도구입니다.

1. 공식으로 이동하여 계정 등록

CodePen 에서 계정을 새로 등록합니다.
등록은 하지 않아도 이용할 수 있습니다만, 등록해 두면 작성한 것을 저장하거나 할 수 있는 것 같습니다.

2. 소스 코드 작성

사이트가 준비하고 있는 에디터에 소스 코드를 기술해 갑니다.
처음에는 튜토리얼이 있으므로 이번에는 그걸 따라 봅시다.

3. 출력

가능한 것을 저장하고 출력합니다.
먼저 편집기의 오른쪽 하단에 있는 Embed를 클릭합니다.



그러면 다음과 같은 팝업이 표시됩니다.



이미지의 빨간색 프레임에 출력 결과가 표시됩니다. 이번에는 Qiita를 태우고 싶으므로 "HTML (recommended)"을 선택했습니다.
필요한 경우 너비, 색상 등도 여기에 지정합니다.

4. 공유하기

그리고는 출력 결과를 기사에 붙이기만 하면 됩니다.

덧붙여 Qiita의 초안 상태에서는 CodePen은 아직 표시되지 않습니다만, 공개 상태이면 제대로 표시되므로 초조할 필요는 없습니다.



할 수있는 것이 여기입니다!
↓↓↓

See the Pen abpbdjx by oioigohan ( @ 맛있는 밥 )
on CodePen .

결론

이상 CodePen을 사용해 보았습니다. Angular와 같은 프런트 엔드 기사를 작성할 때 앞으로 도움이 될 것 같습니다. StackBlitz 와 잘 구분하면서 사용해 가고 싶습니다.