온라인으로 HTML, CSS, JavaScript 코딩 환경을 제공하고 그 결과를 출력해 주는 유용한 웹사이트 애플리케이션으로 JSFiddle과 CodePen이 있다.

이 사이트에서는 HTML, CSS, JavaScript로 코딩하면 그 결과물을 화면에 출력해 준다.

또한 작업한 것을 자신의 블로그 등의 웹페이지에 html코드로 삽입할 수도 있고 사이트에 오픈 되어있는 소스들을 가져다 사용하는것도 가능하다.

매우 좋음!!!

CodePen - Front End Developer Playground & Code Editor in the Browser

Create a new fiddle - JSFiddle

참고

- What is the best way to showcase your code on your website? (해석 : 웹 사이트에 코드를 보여줄 수있는 가장 좋은 방법은 무엇입니까?)

집에서 받아보는 무료 구독 잡지(무료 정기 간행물)

http://blog.gaerae.com/2014/12/free-magazine.html

- 서울사랑 말고도 다른 잡지들도 많다. 들어가서 확인해보면 됨!!

↑ 위 사이트를 참고하여 서울 사랑이라는 잡지를 신청해 보았다.

신청해놓고 잊고 있었는데 우편함에 있더라 ㅋㅋㅋㅋ

내용도 알차고 받아볼만 하네~

SyntaxHighlighter 3.0.83 사용방법

<pre class="brush:html">  <!-- HTML 소스표시 -->
<pre class="brush:css">   <!-- CSS 소스표시 -->
<pre class="brush:js">    <!-- JavaScript 소스표시 -->
<pre class="brush:html highlight:[2,4]">  <!-- 특정 행 강조 -->
<pre class="brush:js html-script:true">   <!-- 다른 언어와 HTML -->
<pre class="brush:html first-line:25">    <!-- 시작 행 번호 변경 -->
<pre class="brush:html toolbar:false">    <!-- 도구모음 숨기기 -->
<pre class="brush:html auto-links:false"> <!-- 오토 링크 해제 -->
<pre class="brush:html" title="Blomari Note">  <!-- 제목 표시 -->

"<"을 "&lt;"로, ">"을 "&gt;"로 바꿔서 입력해야 한다. 안그러면 오류나서 화면에 표시가 안된다.

참고 사이트 : http://blomari.tistory.com/54

테마 종류 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/emacs.html

브러쉬 종류 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

결과값 작성 사이트 : http://colorscripter.com/