오늘은 한번 블로그에 다트 패드 삽입하는 방법을 알아볼 것이다.
바로 알아보도록 하자.
1. 아이디 발급 받기
일단 가장 먼저 다트 패드에 넣을 코드를 작성해야 한다.
이제 그 코드를 github gist 에 올리면 된다.
Discover gists
GitHub Gist: instantly share code, notes, and snippets.
gist.github.com
여기 들어가 준다.
그럼 이제 이런 화면이 나올 건데 여서 Filenname including extension 이 부분이 누가 봐도 알 수 있듯이 제목이다만 유의할 점은 우리가 dartpad 에 넣는 것이기 때문에 dart 여야 한다.
확장자 .dart 를 붙여주도록 하자.
그런 후 바디에 코드를 삽입해 주고 밑에 create gist 를 해줘야 한다. 기본은 secret 으로 되어 있을 테니 public 으로 바꾸자.
이렇게 만들었다면 이제 만든 gist 에 들어가 주자.
여기서 링크를 보면 고유 아이디가 부여가 되어 있는데 이걸 복사해 주자.
2. 다트 패드에서 실행되는지 확인
https://dartpad.dev/[id]
여기서 [id] 값에 발급된 id를 넣고 잘 되는지 확인해 보자.
잘 된다면 이제 블로그에서 사용할 차례이다.
3. 블로그에서 다트 패드 사용
블로그에서 글을 쓸 때 위에 모드를 바꿀 수 있는데
이걸 클릭하면
이렇게 나오는데 그냥 사진에 나온 순서대로 눌러주면 된다.
그럼 이제 막 html 코드가 보일 텐데 그냥 이제 iframe 코드만 넣어주면 끝난다.
<p><iframe src="https://dartpad.dev/c82dc380c4588405fd3e117e053c9e93" width="100%" height="600" frameborder="0"></iframe></p>
src 부분에다가 본인이 만든 다트 패드 주소를 삽입하도록 하자.
이러면 문제없이 작동이 될 것이다.
이렇게 아주 간단하게 다트 패드를 임베딩 하는 방법을 알아보았다. 도움이 되었길 바라며 마치겠다.
