[Trick #2] 코드를 이쁘게 넣어보자, 티스토리 코드 하이라이트 설치/적용법

티스토리에 프로그램 소스를 작성하면 일반적인 텍스트 방식으로 표현되기에 가독성이 떨어진다.

소스 코드를 좀 더 읽기 쉽게 표현해주는 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

적용 후 코드:

@requires_authorization def somefunc(param1=", param2=0): r"'A docstring'" if param1 > param2: # interesting print 'Gre\'ater' return (param2) or None

이렇게 간단하게 멋진 코드 하이라이팅 기능을 사용할 수 있다.

TdD

[Trick #2] 코드를 이쁘게 넣어보자, 티스토리 코드 하이라이트 설치/적용법 - SyntaxHighlighter

티스토리툴바