Study Everyday :)

티스토리에 소스코드 넣는법 3 syntaxhighlighter 적용 본문

티스토리

티스토리에 소스코드 넣는법 3 syntaxhighlighter 적용

은세 2018. 3. 8. 14:04

안녕하세요 오늘은 티스토리 블로그에 소스 코드 넣는법 3번째 방법으로

syntaxhighlighter 를 이용해서 적용해보려고 합니다 !

syntaxhighlighter git 사이트에서는 syntaxhighlighter v4 라고 나와있습니다.



공식사이트는 syntaxhighlighter 이 사이트 입니다.



1. 공식사이트/ 티스토리에서 다운로드 받습니다.





공식 사이트에 가면 사이트 오른쪽에 download 링크가 있습니다.

download 링크를 클릭하시면 syntaxhighlighter git 사이트로 이동이 될거에요.







이 git 사이트가 나옵니다 :) !

지금 현재 git 사이트에서 받을 수 있는건 syntaxhighlighter v4 에요 ㅠㅠㅠ...

dev.bak 에 있는 파일들도 받아 봤지만 에러가 조금 나서 적용이 안됩니다. 흑흑

이것저것 해봐야할텐데 일단은 다른 블로그에도 많이 올려져 있는 방법인 syntaxhighlighter 3.0.83을 적용했습니다.


다른 티스토리 블로그에서 syntaxhighlighter 3.0.83 을 다운 받았어요 !







다운로드 받은 파일을 열어보면 scripts 와 styles 폴더가 있습니다.

저 두개의 폴더 안에 있는 파일만 사용할거에요 ~




2. 티스토리에 적용하기 !



티스토리 블로그 관리로 들어갑니다.








티스토리 블로그 관리에서 꾸미기 영역에 있는 스킨 편집을 클릭해주세요








티스토리 블로그관리 페이지가 바뀌어서 스킨 편집 페이지에 html 편집이 있어요 ~

html 편집을 클릭 !









html 편집 페이지에서 파일업로드를 누르세요

전에 받은 파일에서 styles 와 scripts 폴더에 있는 파일들을 업로드 합니다.

syntaxhighlighter 의 다른 테마들이에요.


저는 기본 syntaxhighlighter 만 사용할거라서 styles 폴더에서는

shCore.css , shCoreDefault.css, shThemeDefault.css 파일 세개만 업로드 했습니다.



업로드 후에는 HTML에 코드를 넣으면 됩니다.









HTML 편집하는 곳에서

<head> 와 </head> 사이에




위에 있는 코드를 붙여넣기 하고 저장을 합니다 !

그럼 완료 !!!

이제 글을 쓸때 적용을 하면 됩니다.




3. syntaxhighlighter 를 이용해서 포스팅 하면 됩니다.







티스토리에서 글쓰기를 누르면 오른쪽에 있는 HTML을 누르신 후




<pre class="brush: 원하는 brush 타입 ">

    코드를 넣으세요

</pre>



이렇게 작성하면 됩니다.

brush 타입은 공식사이트에 있습니다.


예를 들면


<pre class="brush: java">

    System.out.println("Hello")

</pre>


를 HTML에서 적용하면


    System.out.println("Hello")



이렇게 코드가 이쁘게 나옵니다 ! 

syntaxhighlighter 적용 완료했습니다 :) !

적용 하는 방법이 어렵지 않아요 ~


좋은 하루 되세요 ~


저작자표시

'티스토리' 카테고리의 다른 글

구글 애드센스 신청 계정 해지, 삭제 방법  (0) 2018.03.14
구글 애드센스 1차, 2차 승인 통과 방법 - 후기  (0) 2018.02.07
티스토리 본문 중간에 광고 쉽게 넣는 법  (0) 2017.11.26
티스토리 블로그에 소스코드 넣는법 2 Color Scripter  (0) 2017.11.25
구글 애드센스 심사 통과하기 위한 방법/ 팁 1  (0) 2017.09.11
공유하기 링크
'티스토리' Related Articles more
Comments