티스토리에 소스코드 넣기 syntaxhighlighter
나의 경우에는 티스토리는 프로그래밍과 관련해서 정리 및 운영을 하기 위한 공간이다.
근데 글쓰기 기능에 소스넣는 기능이 없다.
그래서 찾아보니 Syntaxhighlighter 라는 스크립트를 올리면 되는 기능이 있다.
Syntaxhighlighter 홈페이지 : http://alexgorbatchev.com/SyntaxHighlighter/
설명이 죄다 영어지만 당황하지 않고,
오른쪽 메뉴 중 에 있는 다운로드를 누르면,
GITHUB 페이지로 연결된다.
(https://github.com/syntaxhighlighter/syntaxhighlighter)
근데 다운받아보면 뭔가 프로젝트를 셋팅해서 프로그래밍이 된 파일이 나와야 한다.
어렵다.
그렇기에
syntaxhighlighter_3.0.83.zip요거 다운받으면 된다.
압축을 푼다음 Tistory에 스킨편집 > HTML편집 > 파일업로드 로 들어가서
scripts 폴더와 styles 폴더의 파일을 전부 업로딩 하면 된다.
그리고 HTML로 돌아와서 <head> 와 </head> 사이에
<link href="./images/shCoreRDark.css" rel=" stylesheet" type="text/css" =""=""> |
둘중 하나를 넣어주면 된다.
난 다크한게 좋으니 다크 ㅋㅋ
<script src="./images/shCore.js" type="text/javascript"></script> <script src="./images/shAutoloader.js" type="text/javascript"></script> <script src="./images/shBrushAppleScript.js" type="text/javascript"></script> <script src="./images/shBrushAS3.js" type="text/javascript"></script> <script src="./images/shBrushBash.js" type="text/javascript"></script> <script src="./images/shBrushColdFusion.js" type="text/javascript"></script> <script src="./images/shBrushCpp.js" type="text/javascript"></script> <script src="./images/shBrushCSharp.js" type="text/javascript"></script> <script src="./images/shBrushCss.js" type="text/javascript"></script> <script src="./images/shBrushDelphi.js" type="text/javascript"></script> <script src="./images/shBrushDiff.js" type="text/javascript"></script> <script src="./images/shBrushErlang.js" type="text/javascript"></script> <script src="./images/shBrushGroovy.js" type="text/javascript"></script> <script src="./images/shBrushJava.js" type="text/javascript"></script> <script src="./images/shBrushJavaFX.js" type="text/javascript"></script> <script src="./images/shBrushJScript.js" type="text/javascript"></script> <script src="./images/shBrushPerl.js" type="text/javascript"></script> <script src="./images/shBrushPhp.js" type="text/javascript"></script> <script src="./images/shBrushPlain.js" type="text/javascript"></script> <script src="./images/shBrushPowerShell.js" type="text/javascript"></script> <script src="./images/shBrushPython.js" type="text/javascript"></script> <script src="./images/shBrushRuby.js" type="text/javascript"></script> <script src="./images/shBrushSass.js" type="text/javascript"></script> <script src="./images/shBrushScala.js" type="text/javascript"></script> <script src="./images/shBrushSql.js" type="text/javascript"></script> <script src="./images/shBrushVb.js" type="text/javascript"></script> <script src="./images/shBrushXml.js" type="text/javascript"></script> <script src="./images/shLegacy.js" type="text/javascript"></script> <script type="text/javascript"> SyntaxHighlighter.all();</script> |
그리고 <body> 바로 아래에 위 스크립트를 모두 복붙하면 된다.
그리고 저장!!!
사용법은 글 쓸 때 HTML를 체크해서
<pre class="brush: java"> 코드내용 </pre> |
html코드를 붙여준다음 그대로 소스 복사 붙여넣기하면 된다.
HTML 체크를 지우면 은색 네모칸에 그냥 썼구나 싶지만 발행하고 나면,
소스코드 페이지로 바뀌게 된다.
서식에 코드내용부분만 등록해서 쉽게 사용 중이다.