티스토리에 간단하게 코드 블록 적용하기

티스토리를 사용하다보면 욕심이 생겨 이것저것 만지다 보면 어느 순간 HTML부터 css 까지 코드를 만지는 자신을 발견하게 되었다. 나 뿐만 아니라 만약에 이글을 보는 여러분도 저와 같은 입장일 수도 있다.

코드블록을 사용하게 되면 보는 이도 쉽게 볼수 있다. 즉 가독성이 뛰어나다. 

Google 코드블록 설치하기 

내가 소개하려는 것은 google-code-prettify 이다. 다른 방법으로 Prism, 마크다운등 다양한 방법이 있지만, 코드도 복잡하고 적용하기 나중에 업데이트 하는 방식도 그렇고 가장 중요 한 것은 불안정한 부분이 있다는 것이다. 그래서 나는 google-code-prettify를 적용했다. 

가장 먼저 티스토리 HTML 편집기로 들어간다. 

코드 블록 적용 방법 

가장 중요한 적용 방법은 간단하다. 

코드를 입력하고 포스팅의 창에서 html 체크 박스를 클릭한 후에 들어가서 <pre class="prettyprint linenums:1"> 코드 내용 </pre> 입력하면 된다. 

적용 후 나타나는 화면 

 html 태그 편집기를 나오면 아래와 같이 회색박스에 코드가 들어가 있는 것을 볼수 있는데 매우 어색하다. 

하지만 미리보기를 하면 아래와 같이 깔끔하게 나오는 것을 볼 수 있다.

 MsgBox "반갑습니다." & Application.UserName & "님"