sublime text, prism, jsfiddle 이 3가지 tool을 이용하다.

Excel 밟아 2014. 9. 21. 16:56

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 순으로 나옴)

*수정한 코드 (html, result 순으로 나옴)

원래 코드에 html,result를 삽입하여 티스토리 글쓰기에서 html로 전환하여 이 코드를 붙여 넣기 한다. 아래 그림처럼 글에 넣어진 것을 확인할 수 있다.(아래 그림의 html과 result를 클릭해보세요!)