티스토리 블로그에 소스코드 Trinket으로 실행하고 결과까지 볼 수 있게 만들기

블로그에 소스코드 올릴 때 대부분 사용하는 방법이

https://colorscripter.com/

사이트에 가서 입력 후 클립보드에 복사를 눌러 가져오는 방법인데

이건 뭐 나쁘지 않긴 한데 크기 조정이 세밀하게 안되고

블로그 가운데에 배치하지도 못한다

뭐 대부분의 기능이 지원이 안되서 되게 쓰기 불편하다

깔끔하긴 한데 깔끔하게 불편한 태양초고추장 같은 느낌이다

다음으로는

SyntaxHightlighter 를 블로그 내에 설치해서 사용하는 방법인데

이건 기본적으로 설치하기 귀찮다!!!

글만 쓰기도 힘든데 저걸 언제 설치하냐!!!

이것 외에는 방법이 없나?

하고 찾아보다가 찾은 것이

trinket인데 두개보다 훨씬 낫다

코드도 복붙하면 되는거고!!!!

심지어 결과까지 출력해서 뽑아주는데

더 놀라운 점은 코드를 고쳐서 실행까지 가능하기 때문에

작은 이클립스를 갖다 논 느낌이다!!!

이제 바로 어떻게 사용하는지 알아보자

먼저 

https://trinket.io/

를 눌러 사이트에 들어가자

로그인을 해야 하는데

구글 계정 있는걸로 로그인하면 회원가입 할 필요도 없다!!

로그인을 하고 난 후 좌측 상단에

home 버튼이 보일텐데

홈 버튼을 눌러보자

그럼 이러한 화면으로 이동하는데

여기서 우측에 보이는 New Trinket을 누른 뒤

원하는 언어를 선택하자

나 같은 경우에는 자바를 선택하겠다

누르고 나면 이래서 하얀 화면에 대략 정신이 멍해지는데

침착하게 이클립스에서 

소스 코드를 package 부분만 빼고 긁어온 다음에!!

붙여넣자!!

Hello 클래스를 긁어왔는데

이 경우에는 Main.java로 되어있기에

톱니바퀴 버튼을 눌러 Main.java를 Hello.java로 바꿔주자!!

이후 상단에 Run 때리면 Hello가 출력이 되는 것이 보인다

아니 이거 완전 이클립스 아냐??

아니 근데 에러 유발해도 에러 안나는 사기극이 아닐까?

완전 이클립스랑 흡사해서 에러 유발하면 에러도 뜨고

코드를 눈으로 보기만 하는 것이 아니라

체험해보고 왜 되는지, 안되는지 확인이 가능하다

이게 다른거 두개보다 훨씬 낫지 않은가

하지만 이 내용을 블로그로 가져와야 의미가 있는 것!!

한번 가져와보자!!!

Run 우측에 Share가 보이는데

여기서 Embed를 눌러보자

이런 창이 뜨는데 위의 iframe~~ 이 내용을 복사해다가 넣으면 되는 것이다

하단에 auto run trinket when loaded 부분을 체크해서

불러오자마자 run 버튼 없이도 출력 값이 나와있게 할 수 있다

복사를 한 뒤에 티스토리로 다시 돌아와보자

글 작성 시에 여기 외부콘텐츠가 보이는데

이걸 눌러보자

html을 선택한 후 복사한 내용을 붙여넣고 확인을 누르면..

짜잔짠!! 대성공이다!!

이제 보기만 하는 방식이 아니라

소스코드를 갖다 놓으면 실제로 사용할 수도 있는 Trinket을 사용해보자