NOTICE


 블로그를 하다보면 소스코드를 입력해야 할 때가 있습니다. 보기 편하고 깔끔하게 올리고 싶은데 방법을 모르겠더군요. 그래서 찾아보니 Syntax Highlighter라는 소스 코드 편집기라는 것이 있었습니다. 오늘은 이 Syntax Highlighter를 설치하고 사용하는 법에 대해 알아보고자 합니다.



1. Syntax Highlighter Download

  먼저 Syntax Highlighter 공식 홈페이지에서 파일을 다운로드 합니다. 홈페이지 주소는 아래로 들어가면 됩니다.


Syntax Highlighter 공식 홈페이지: http://alexgorbatchev.com/SyntaxHighlighter/download/



2. File Upload

 내려받은 파일의 압축을 풀면 다음과 같은 폴더들을 확인할 수 있습니다.



 script와 styles 폴더에는 업로드 할 파일들이 들어있습니다. script 폴더에 있는 파일은 모두 업로드합니다. styles 폴더의 파일들은 모두 올려도 상관없지만 용량에 부담을 느끼신다면 마음에 드는 스타일에 필요한 파일만 선택해서 업로드하면 됩니다. 예를 들어 이클립스 스타일을 선택하셨다면 아래 3개 파일만 업로드합니다.


이클립스 스타일에 필요한 파일

 shCore.css

 shCoreEclipse.css

 shThemeEclipse.css


 파일 업로드 방법은 다음과 같습니다. 먼저 블로그 관리 모드에서 차례로 'HTML/CSS 편집' - '파일 업로드' - '추가 버튼'을 선택한 후 파일을 업로드합니다. 




3. HTML 수정하기

 파일 업로드가 끝나면 HTML 코드를 수정해야 합니다. 블로그 관리 모드에서 'HTML/CSS 편집'에 들어가 CTRL+F로 </head>를 찾습니다. 그리고 </head> 바로 위에 다음 코드를 넣어줍니다.

 21 열에서 href=""에 들어가는 파일 명은 자신이 선택한 스타일의 .css 파일 명으로 수정해주어야 합니다. 이클립스의 경우 href="./images/shThemeEclipse.css"가 됩니다.

 마지막으로 CTRL + F를 사용해 <body>를 찾고 다음 코드를 덮어씌웁니다.


   <body Onload="dp.SyntaxHighlighter.HighlightAll('code');">                                                                   



4. 적용하기

 Syntax Highlighter 적용법에는 <pre> 태그와 <textarea> 태그 이용법이 있습니다. <pre>태그는 html 태그 코드를 사용할 때 많이 많이 불편하므로 <textarea>태그를 사용해 보도록 하겠습니다.

 사용법은 매우 간단합니다. 사용자가 글쓰기를 시작했다면 오늘쪽 상단에 HTML 에디터 체크 박스를 확인할 수 있을 것 입니다.



 체크 박스를 선택하고 다음 코드를 적당한 곳에 입력하면 모든 과정이 완료됩니다.

 '원하는 언어'는 아래 표를 참고해서 입력하고자 하는 코드의 언어에 맞게 넣으시면 됩니다. 예를 들어 자바스크립트 코드를 올리고자 하는 경우 아래 표에서 Brush aliases를 확인하고 class="brush:js;"를 입력합니다.



 이상으로 '블로그 본문에 소스코드 입력창 넣기' 포스트를 마치겠습니다.