sublime text, prism, jsfiddle 이 3가지 tool을 이용하다.
Html과 css 관련 포스팅을 가끔 올립니다.
글을 작성하면서
'코딩'과 '결과'를 어떻게 하면
편리하고 이쁘게 포스팅에 넣을 수 있을까 고민을 했습니다.
마땅한 툴을 찾아 헤맨 시간이 적지 않았습니다.
1. 코딩
(1) 'Sublime text'를 이용하여 코딩하고
이것을 'prism'을 이용하여 블로그에 게시
(2) 사용법
- '서브라임 텍스트' 여기 클릭
- '프리즘' 여기 클릭
2. 결과
(1) jsfiddle을 이용하여 블로그에 게시
(2) jsfiddle 사용법
▶ jsfiddle.net 에 접속(회원가입/로그인 않고도 사용가능)
▶ html 입력칸에 코딩 한다. <html>...</html>,<head>....</head> 등은 쓸 필요가 없고, <body>...</body>태그 사이에 오는 요소만 입력한다.
▶ run을 클릭하여 result를 확인하고, save를 클릭하여 저장 한다.
▶ share를 클릭하고 embed on your page에 있는 코딩을 복사한다.
※ share를 클릭하고 (embed options)을 클릭하면 튜토리올을 볼 수 있다.
▶ 티스토리 글쓰기에서 html로 전환하여 위 코딩을 붙여 넣는다.
※ 예를 들어 html과 result만 원한다면
*원래 코드 (javascript, html, css, result 순으로 나옴)
<iframe width="100%" height="300" src="http://jsfiddle.net/n7sta64t/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
*수정한 코드 (html, result 순으로 나옴)
<iframe width="100%" height="300" src="http://jsfiddle.net/n7sta64t/embedded/html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
원래 코드에 html,result를 삽입하여 티스토리 글쓰기에서 html로 전환하여 이 코드를 붙여 넣기 한다. 아래 그림처럼 글에 넣어진 것을 확인할 수 있다.(아래 그림의 html과 result를 클릭해보세요!)