prettyPrint for Blogger test

HTML이나 CSS 등 각종 코드를 pre 태그로 입력하면 알아서 이쁘게 컬러링해서 보여주는 pretty print라는 걸 알게 되어서... 테스트 삼아 써봅니다.

적용방법은 http://stackoverflow.com/questions/1852537/how-to-use-prettify-with-blogger-blogspot 글을 참고했습니다.

코드표시 테마는 http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html를 참고했는데, 맘에 드는게 없어서 일부는 커스터마이징 했습니다. CSS를 드림위버의 코드 편집기처럼 보여주고 싶었는데 잘 안되네요. 클래스가 막 중복되고... 아무튼 대략 다른 사이트에 박힌 것 비슷하게 나오는 거 같아 좋습니다. HTML을 쓸 땐 괄호를 모두 lt, gt 등으로 바꿔서 넣어야 하는군요(위지윅 에디터에선 알아서 바꿔 넣어줌).

 

여기는 HTML

<p>hey</p>

  <p>yay</p>

  <p><em>test text </em></p>

  <p><strong>html</strong></p>

<p>&nbsp;</p>

여기는 CSS

.x { width:100; height:100;}
.y { font-size:13; font-weight:bold;}
.z { position:relative; display:block;}
#abc { position:relative; display:block; background:#red url(hey.png) no-repeat center top;}

여기는 자바스크립트 또는 jQuery 

$( document ).ready(function() {
    console.log( "ready!" );
});

 

쓰려던 블로그 글은 안 쓰고 또 이렇게 한 순간의 실수(?)를... 이렇게 2015년의 첫 글을 시작합니다.