티스토리(Tistory)에 소스코드 넣기(적용하기) / SyntaxHighlighter

티스토리 뷰

IT/티스토리

스어비 2016. 9. 22. 14:59

저는 티스토리를 시작하게 된 이유가 개발을 하면서 새롭게 알게 된 점이나, 기록 해두고 싶은 코드를 관리하기 위해서 입니다.

저와 같은 이유로 티스토리를 시작하시는 분들이 많을 거라고 생각합니다.

그런 분들을 위해서 코드를 이쁘게 올리는 방법을 소개하려고 합니다.

바로 SyntaxHighlighter

1.설치

먼저 SyntaxHighlighter를 다운받아 줍니다. [Download]

다운받은 후 압축을 풀고나면

위와 같은 파일들을 볼 수 있습니다. 저희는 이중에서 scripts, styles 2가지만 사용 합니다.

2.적용

관리자 페이지에서 HTML/CSS편집 탭으로 이동합니다.

HTML/CSS 편집 탭에서 파일 업로드를 선택하고 아래의 추가 버튼을 눌러줍니다.

추가 버튼을 눌러서 아래의 사진처럼 style폴더의 css파일 전부와 / scripts의 js파일 전부를 추가 해줍니다.

모든 파일이 추가 되면 HTML탭 으로 이동해서 아래의 코드를 </head> 바로 윗 부분에 붙여넣어 줍니다.

body 부분에는 아래와 같이 입력해줍니다.

모든 과정을 마치고 나면 저장을 눌러줍니다.

3.실행법

html사용에 체크를 해준다

소스코드 스타일 적용하기

brush:python에서 python대신 cpp를 넣으면 cpp코드가 삽입 가능하다.

<pre name="code" class="brush:원하는 언어;"> 

에디터 모드에서 이 사이에 코드를 작성하면 된다.

</pre>

예) javascript 코드 삽입하기.

<pre name="code" class="brush:javascript;"> 

print 'hello world'.

</pre>

요런 식으로 사용해주면 된다.

2-1) 적용 가능한 언어 목록

[참고] http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

공유하기 링크

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함