소스코드 하이라이터 플러그인/티스토리에 소스코드 작성하기/티스토리 소스코드 플러그인

(1) 설치 파일 다운로드

http://alexgorbatchev.com/SyntaxHighlighter/download/

 

저는 가장 최근인 3.0.83 버전을 다운로드 했습니다.

 

(2) 다운로드 파일 압축 해제

 

(3) 블로그 관리 > 꾸미기 > HTML/CSS편집 클릭

(4) 상단의 파일업로드 클릭

(5) 하단의 +추가 버튼 클릭

(6) 압축 해제 파일에서 styles 폴더 아래 모든 파일 업로드

   추가로, scripts 하위 파일도 동일하게 업로드

(7) 파일업로드를 마친 뒤, 상단의 HTML 클릭

(8) 하이라이터 플러그인에서 사용할 스타일을 지정한다.

head 태그 안에 코드형식에 따라 원하는스타일을 작성하여 기술하면 된다.

코드형식 : <link rel="stylesheet" =""="" type="text/css" href="./images/원하는스타일.css">

필자는 <link rel=" stylesheet" =""="" type="text/css" href="./images/shCoreEclipse.css">을 추가했다.

ps) styles 디렉토리에 가면 여러 종류의 스타일이 있으니 원하는거로 선택!

(9) 작성 뒤에는, 스크롤을 맨 아래로 내려 body와 html 사이에 프로그래밍 언어별 스크립트 코

드를 추가해준다.

<스크립트 전체 언어 코드>

<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shAutoloader.js"></script>

<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>

<script type="text/javascript" src="./images/shBrushAS3.js"></script>

<script type="text/javascript" src="./images/shBrushBash.js"></script>

<script type="text/javascript" src="./images/shBrushColdFusion.js"></script>

<script type="text/javascript" src="./images/shBrushCpp.js"></script>

<script type="text/javascript" src="./images/shBrushCSharp.js"></script>

<script type="text/javascript" src="./images/shBrushCss.js"></script>

<script type="text/javascript" src="./images/shBrushDelphi.js"></script>

<script type="text/javascript" src="./images/shBrushDiff.js"></script>

<script type="text/javascript" src="./images/shBrushErlang.js"></script>

<script type="text/javascript" src="./images/shBrushGroovy.js"></script>

<script type="text/javascript" src="./images/shBrushJava.js"></script>

<script type="text/javascript" src="./images/shBrushJavaFX.js"></script>

<script type="text/javascript" src="./images/shBrushJScript.js"></script>

<script type="text/javascript" src="./images/shBrushPerl.js"></script>

<script type="text/javascript" src="./images/shBrushPhp.js"></script>

<script type="text/javascript" src="./images/shBrushPlain.js"></script>

<script type="text/javascript" src="./images/shBrushPowerShell.js"></script>

<script type="text/javascript" src="./images/shBrushPython.js"></script>

<script type="text/javascript" src="./images/shBrushRuby.js"></script>

<script type="text/javascript" src="./images/shBrushSass.js"></script>

<script type="text/javascript" src="./images/shBrushScala.js"></script>

<script type="text/javascript" src="./images/shBrushSql.js"></script>

<script type="text/javascript" src="./images/shBrushVb.js"></script>

<script type="text/javascript" src="./images/shBrushXml.js"></script>

<script type="text/javascript" src="./images/shLegacy.js"></script>

<script type="text/javascript"> SyntaxHighlighter.all(); </script>

 

(10) 스킨 설정이 모두 완료되었다!

상단의 저장버튼을 클릭한다 :D

 

(11) 이제 글을 써보자 !!!!!!!

코드 입력 전, HTML 체크박스를 클릭한다.

 

(12) 다음과 같이 HTML 작성 편집기로 바뀌게 되면

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

(10.07 추가 수정했습니다........... ex) brush:java , brush:html 등...)

</pre>

를 작성하고 <pre> 태그 사이에 원하는 소스코드를 작성하면 된다.

(13) 테스트 소스 작성 후 , 미리보기를 클릭하여 확인한다.