프로그래밍이나 IT관련 블로그를 보다보면, 멋진 박스안에 코드(code)들이 알록달록한 색상으로 가지런하게 놓인 것을 보면 참 깔끔하고 예쁘죠. 오늘은 블로그에 이 기능을 구현해볼까 합니다. 이렇게 코드들을 멋지게 구현할 수 있는 프로그램은 여러가지가 있지만, 그 중에서도 가장 깔끔하고 대중적인 것이 Syntax Highliter와 구글에서 만든 Prettify입니다. 저는 이 둘 중에서 SyntaxHighlighter를 설치해볼까 합니다. (Pettify는 다음기회에~)
먼저 어떠한 순서로 진행될지 큰 그림을 그리고 가겠습니다.
(1) 설치파일 다운로드
(2) 블로그에 파일업로드
(3) 필요한 설정
(4) 사용방법
설치파일 다운로드
먼저 아래의 링크를 통해 홈페이지를 통하여 최신버전을 다운로드 합니다. 오랫동안 버전업이 되고 있질 않습니다. 2017년03월 현재까지 3.0.83버전이 최신버전입니다. (가끔 홈페이지가 접속이 안될 때도 있기 때문에, 밑에 3.0.83버전 파일도 첨부해 둡니다. 이 후에 나온 버전은 홈페이지를 참고하시기 바랍니다.)
syntaxhighlighter_3.0.83.zip다운로드가 완료되면, 해당파일의 압축을 풀어줍니다. 그러면 아래와 같은 모습으로 폴더구성이 되어있습니다. 이 중에서 scripts폴더와 styles폴더에 있는 파일만 사용하게 됩니다.
블로그에 파일 업로드 하기
티스토리 블로그 관리페이지로 이동한 후에, 꾸미기 ▶ HTML/CSS편집 메뉴를 눌러 파일업로드 화면으로 이동한 후에, 하단에 있는 추가 버튼을 클릭합니다.
위와 같이 팝업창이 뜨면, scripts폴더로 경로를 찾아가서 안에 있는 모든 파일을 선택한 후에, 열기버튼을 눌러서 추가해 줍니다.
추가가 완료되면 다시한번 더 파일업로드창 하단에 있는 추가 버튼을 눌러서, styles폴더 안에 있는 모든 파일들을 모두 추가합니다.
※ 참고로, 업로드는 필요한 파일들만 선택해 주는 것이 좋은데, 일단 모든 파일을 다 올리도록 설명하였습니다. 불필요한 파일들은 추후에 삭제하시면 됩니다. 필요한 파일들이란, 자신이 사용하려고 하는 언어와 관련된 파일들입니다. 전혀 사용하지 않는 언어들이 올라가 있으면, 페이지 로딩시간이 길어지기 때문입니다. 하지만, 용량이 크게 부담되는 정도는 아니므로, 다 올리셔도 관계없습니다. 대부분의 언어를 다 이용할 수 있으니 좋은 점도 있습니다.
모든 파일의 추가가 완료되면, 우측 상단에 있는 저장버튼을 클릭하여 파일들을 서버에 저장합니다.
HTML에 필요한 설정하기
다음으로 SyntaxHighlighter를 사용하기 위해 할 일은 skin.html파일에 필요한 설정을 추가하는 것입니다.
이 부분도 역시 본인이 사용하고자 하는 코드에 필요한 내용만 적으면 되지만, 우리는 사용가능한 모든 코드 형태를 사용하는 것을 기준으로 모든 파일을 업로드 하였기 때문에 아래의 내용을 위에 그림에 표시한 </head> 바로 앞에 그대로 붙여넣어 주시면 됩니다.
사용방법
이제 SyntaxHighLighter를 사용할 수 있는 기본적인 환경세팅이 완료 되었습니다. 코드 강조하기 위한 방법에는 다음과 같이 3가지 방법이 있습니다.
1. <pre>태그
2. <textearea>태그
3. <script>태그
그러나 제작 홈페이지에서 명시적으로 블로그에는 <pre>태그를 권장하고 있기 때문에, <pre>태그에 관한 사용방법만 다루겠습니다. 일단 <pre>태그에도 단점이 있습니다. 그것은 html 태그를 이용할 때 몇 몇 태그가 나타나질 않습니다. '<' (태그괄호) 인식문제로 인해 나타나는 현상인데, < = < 나 > = > 의 방식으로 변환해서 이용을 해야 합니다. 따라서 <html>은 <html> 이렇게 표시해야 합니다. 다만 이를 간단하게 변환할 수 있는 툴(Tool)들이 존재하므로, 큰 문제거리는 아닙니다.
먼저 글쓰기 에디터에서 우측상단에 있는 HTML 체크박스에 체크를 해줍니다. 그리고 나서 코드를 넣고자 하는 부분에 아래와 같은 형식을 이용해서 코드를 작성하면 됩니다.
<pre class = "brush : 사용하고 싶은 언어">
자유롭게 코드입력
</pre>
일단 사용하고 싶은 언어에 해당하는 이름들이 있습니다. 해당 언어의 이름들은 사용방법에 관한 예시를 든 후에, 첨부하도록 하겠습니다. 그럼 일단 예를 들어서 html 코드를 작성한다고 하면, 아래와 같이 작성하시면 됩니다.
<pre class = "brush : html">
<html>
<head>
<title> HTML 코드 작성하기 </title>
</head>
</html>
</pre>
위의 코드를 그대로 복사 + 붙여넣기 하면, 결과는 아래와 같습니다. 보시다시피 <html> 태그와 <head> 태그가 보이지 않습니다.
HTML 코드 작성하기
아래는 괄호를 < 와 > 로 변환해준 결과물입니다.
<html> <head> <title> HTML 코드 작성하기 </title> </head> </html>
코드 쉽게 변환하기
저는 Notepad++을 이용해서 한번에 찾아서 바꿉니다. 이것도 귀찮으신 분들을 위해 손쉽게 '< , >'를 '< , >'로 바꿀 수 있는 툴을 소개해드릴까 합니다. IT블로거 커니님께서 만드신 툴이구요. 사용방법은 매우 간단합니다. 다운받으신 후에 실행하셔서 HTML코드를 넣고 변환버튼을 누르면 변환이 됩니다. (다운로드 하는 중에 위험이 있을 수 있다는 경고메세지가 나올수가 있는데, 실행가능한 파일이기에 뜨는 경고메세지 이므로 무시하셔도 됩니다.)
언어별사용방법
<pre>태그 사용시, <pre class="brush: XXXX "> 에 사용할 수 있는 언어별 명칭은 아래를 참고하시면 됩니다. Brush name이 사용하고 싶은 프로그래밍 언어이고, Brush aliases가 <pre> 태그 안에 넣어줄 이름입니다.
마치며
일단 본 포스팅에 있는 화면이랑 본인이 보고 있는 화면이 많이 다르실 겁니다. 바로 테마, 폰트, 툴바 등을 조절하지 않은 상태이기 때문입니다. 이와 관련해서는 다른 포스팅에서 다루도록 하겠습니다.
'Blog > TIPS' 카테고리의 다른 글
| 이미지 및 사진 용량줄이기 (PNG, JPG변환) (0) | 2017.03.27 |
|---|---|
| 블로그글 드래그시 선택영역 색상 변경하는 방법 (0) | 2017.03.09 |
| 티스토리 초대장 없이 블로그 만드는 방법 (0) | 2016.07.27 |
| 네이버 오픈캐스트를 발행하는 방법 (0) | 2016.07.26 |
| 티스토리 블로그, 네이버 오픈캐스트를 개설하는 방법 (0) | 2016.07.25 |