'etc/티스토리 활용'에 해당되는 글 2건
- 2017.07.26 :: 티스토리 소스 코드 넣기 플러그인 - syntaxhighlighter
- 2014.04.07 :: 티스토리 단축키 활용
etc/티스토리 활용
2017. 7. 26. 14:17
블로그에 글을 올릴 때 소스 코드를 넣어야 하는 경우가 있다.
이 경우 그냥 소스 코드를 텍스트로 올리면 보기도 좋지 않고 가독성도 떨어지기 때문에, 소스 코드에 대한 가독성을 좋게 하는 syntaxhighlight 플러그인을 이용하는 것이 좋다.
검색을 해보면 syntaxhighlighter 플러그인은 대부분 다음 오픈 소스가 나온다. - http://alexgorbatchev.com/SyntaxHighlighter/
현재 4 버전이 최신인데, 기존과 사용법이 변경되어, 예전 방식 중 최신 버전인 3.0.83을 사용했다.
기존 블로그를 참고했지만, 개인적으로는 시행착오를 겪어서 좀 자세하게 남긴다.
1. 3.0.83 버전 파일 다운로드
다운로드 후 압축을 풀면 다음과 같은 폴더 구조를 볼 수 있다.
여기서 사용할 폴더는 붉은 상자 안의 두 폴더이다.
2. 티스토리 관리에서 HTML/CSS 편집을 실행한다.
3. 파일업로드
4. 처음 다운로드 했던 파일중 scripts, styles 폴더의 파일을 모두 업로드 한다.
styles
5. HTML 코드 수정
HTML 탭을 선택하고 먼저 <head> 안에 css 파일을 link 시킨다.
여기서 css파일은 앞에서 업로드 했던 파일 중에 하나를 선택하면 되고, 이 파일에 따라 코드 highlight 모양이 다르게 적용 된다.
textarea 태그를 사용하기 위해 body 태그에 다음을 추가한다.
마지막으로 js 파일을 읽어들일 수 있게 다음을 추가한다.
2~3번 라인의 순서는 꼭 지켜야 한다.
5~30라인은 필요한 것만 사용해도 된다.
5. 모두 적용 후 테스트
<textarea name="code" class="brush:python;" cols="60" rows="10">import sys def hello(): print "hello world" </textarea> |
'etc > 티스토리 활용' 카테고리의 다른 글
| 티스토리 단축키 활용 (0) | 2014.04.07 |
|---|
etc/티스토리 활용
2014. 4. 7. 20:23
'etc > 티스토리 활용' 카테고리의 다른 글
| 티스토리 소스 코드 넣기 플러그인 - syntaxhighlighter (0) | 2017.07.26 |
|---|