[Trick #2] 코드를 이쁘게 넣어보자, 티스토리 코드 하이라이트 설치/적용법 - SyntaxHighlighter
IT_Tips&Tricks
티스토리에 프로그램 소스를 작성하면 일반적인 텍스트 방식으로 표현되기에 가독성이 떨어진다.
소스 코드를 좀 더 읽기 쉽게 표현해주는 SyntaxHighlighter를 티스토리 블로그에 적용하는 방법에 대해 알아보자.
CDN으로 사용해도 되지만 페이지 로딩 속도를 고려해 직접 파일을 올리도록 하겠다.
1.다운로드 하기
http://alexgorbatchev.com/SyntaxHighlighter/download
다운로드는 간단하니 걱정하지 않아도 되겠다. Syntax Highlighter 공식 홈페이지에서 다운로드 받을 수 있다.
위 링크를 클릭하면 큼지막 하게 Click Here to Download. 라고 친절하게 쓰여있다.
2.파일 업로드
다운받은 압축 폴더를 풀면 아래와 같은 파일 구성이 보일 것이다.
이중에 우리가 업로드 할 폴더는 scripts와 styles이다.
용량이 부족하다면 필요한 언어만 업로드 하고,
아니라면 하위 파일들 모두 업로드 시키자.
3.HTML 수정하기
여러분이 제일 귀찮아하는 나도 귀찮은 HTML 손보기는 의외로 간단하다
Tistory 관리 - HTML/CSS 편집에 다시 들어가 CTRL + F 로 </head>를 찾는다.
찾고나서 </head> 바로 아래 다음 태그를 삽입해준다.
나중에 textarea태그를 이용해서 편하게 코드를 삽입하려면 아래 코드도 body태그에 덮어 씌워주자
이렇게 html수정은 모두 끝이났다. 증말좋슴당?
4.코드에 적용시키기
Syntax Highlighter적용 시키기 위해선 크게 두 가지 방법이 있다. <pre> 태그 이용법, <textarea> 태그 이용법 하지만 <pre>태그를 이용하게 되면 잔고생이 많다. 그러니 <textarea>태그를 이용하자.
<textarea name="code" class="brush:원하는 언어">html 에디터 모드에서 이 사이에 코드를 작성하면 된다.</textarea>
적용 전 코드 :
@requires_authorization
def somefunc(param1=", param2=0):
r"'A docstring'"
if param1 > param2: # interesting
print 'Gre\'ater'
return (param2) or None
적용 후 코드: