코드 임베딩

개요

2023년 05월 패치 중, 다양한 코드 공유 사이트들을 임베딩 할 수 있는 확장기능을 추가했습니다. 본 문서는 각 서비스 별 사용 방법에 대해 기술합니다.

한계

• StackBlitz를 임베딩 할 때, ID만 입력하는 방식으로 사용할 때 주의하시기 바랍니다. Replit과 동시에 사용하는 경우, Preview가 계속 로딩이 되면서 'Connecting to dev server...'라고 뜨는 문제가 생기는 문제가 있습니다.
• 주피터 노트북은 직접 실행할 수 없고, 결과 화면을 HTML로 변환하여 임베딩 합니다. 또한 외부 서비스에서 읽어와 보여주는 방식이므로, URL 주소가 외부에서 접근할 수 있어야 합니다.

Codepen

Full URL

입력값: <codepen>https://codepen.io/ztephanuz7/pen/XWeKgaZ</codepen>

See the Pen here!(@pen) on CodePen.

Username/pen/ID

입력값: <codepen>chrisgannon/pen/dypvKvR</codepen>

See the Pen here!(@pen) on CodePen.

codesandbox

Full URL

입력값: <codesandbox>https://codesandbox.io/s/three-js-initial-forked-t81ck4</codesandbox>

ID Only

입력값: <codesandbox>koh-test-forked-e5v71k</codesandbox>

jsfiddle

Full URL

입력값: <jsfiddle>https://jsfiddle.net/theo/VsWb9/</jsfiddle>

Username/ID

입력값: <jsfiddle>retorillo/vw5r78zc</jsfiddle>

Replit

Full URL

입력값: <replit>https://replit.com/@19hancock5767/The-best-python</replit>

@Username/ID

입력값: <replit>@mooboo23/python-code</replit>

StackBlitz

Full URL

입력값: <stackblitz>https://stackblitz.com/edit/angular-ivy-1ynhkh?file=src%2Fapp%2Fapp.component.ts</stackblitz>

ID Only

입력값: <stackblitz>typescript-msfpva</stackblitz>

Glitch

Full URL

입력값: <glitch>https://glitch.com/edit/#!/darkened-citrine-kicker?path=server.js%3A1%3A0</glitch>

ID Only

입력값: <glitch>lumbar-harmless-watch</glitch>