[Tip] #티스토리 소스 코드 스타일 적용해서 넣기

#티스토리 소스 코드 스타일 적용해서 넣기

정리하면서 소스를 넣어려고 메뉴를 찾아보니.
소스 코드 넣는 메뉴가 없었다....

다른 블로그는 스타일이 적용되어 잘 올라가던데...
찾아보니 따로 설정을 해야되었던 것이다.

파일 다운로드 부터 설정까지 한개 블로그만 참고해서는 안되어서
혼자 정리를 좀 해 보았다.

Tistroy에서는
직접 html과 css파일을 올릴 수 있도록 친절하게 만들어 놓았다.

필요한 파일만 압축해서 올려둠.

아래 파일 다운로드 ㄱㄱ.

syntaxhighlighter_for_tistory.zip

하나씩 이미지 보면서 따라하면 끝.

1. 압축 풀면 이렇게.

2. 블로그 관리 메뉴로 들어가서 HTML/CSS 편집 선택

3. 파일 업로드 선택.

4. 추가 선택.

5. styles 폴더 들어가서 파일 전부 선택 후 열기

6. scripts도 전부 선택해서 열기.

---

7. 파일 추가 완료 후 HTML 메뉴 선택.

8. </head> 찾아서 그 위에 소스 추가.

복사할 때 쓸수 있는 text.

8. 스타일 바꾸고 싶으면 이부분 마음에 드는 스타일로 변경.

css파일명은 style폴더에 있는 파일명으로 변경하면됨.

종류는 shThemeDefault, shThemeDjango, shThemeEclipse, shThemeRDark 등등등 폴더 보면 됨.

9 완료되면 저장, 저장 꼭

10. 테스트 하기 위해 글쓰기 > 오른쪽 위에 HTML 체크 표시 .

아래 소스 추가.

<pre class="brush:언어;"> 

소스 코드

</pre>

테스트용

<pre class="brush:javascript;">var test = "wow";

console.log(test);

</pre>

11. 결과.

var test = "wow";
console.log(test);

사용할 수 있는 언어 종류

참고

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/