구글 티스토리에 소스코드를 깔끔(?)하게 올릴수 있는 방법을 알려드립니다. syntaxhighlighter를 설치통해서 손쉽게 사용이 가능합니다.
1. 파일 다운로드
http://alexgorbatchev.com/SyntaxHighlighter/download/
위의 사이트에서 syntaxhighlighter 프로그램을 다운로드 하시면 됩니다.
2. 파일 업로드
압축을 푸신후에 아래 scripts, styles폴더에 들어있는 파일들을 올려주시면 됩니다.
3. HTML/CSS 편집
다시 HTML/CSS 탭으로 넘어갑니다. Ctrl + F 를 누른신후에, </HEAD> 를 찾습니다.
그런다음에, 아래를 복사해서 붙여 넣어주시면 됩니다.
※ styles을 변경하고 싶으시면, styles폴더에서 원하는 파일명으로 변경을 해주시면 됩니다.
ex) shCoreEclipse.css 으로 파일명만 변경해주시면 됩니다.
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
Ctrl + F 를 누른신후에, </BODY> 를 찾습니다. 그런다음에 아래코드를 복사하셔서 붙여넣기 하시면 됩니다.
<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/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
SyntaxHighlighter.all();
</script>
저장버튼을 눌러 저장을 합니다.
4. 사용법
글쓰기를 버튼누른시후에 HTML편집모드에서 작성을 하시면 됩니다.
<pre class="brush: java"> |
1 2 3 4 5 6 7 | class HellowJava{ public static void main(String[] args) { System.out.println("Hello, Java ! "); }} |
＊ auto-links
<pre class="brush: java; auto-links: false;"> |
1 | System.out.println("http://test.com"); |
기본은 true URL이 있으면 자동으로 링크가 생성되는데 링크 안 생기게 할려면 false로 지정
＊ class-name
<style> |
1 | System.out.println("Hello, Java ! "); |
＊ class-name
<pre class="brush: java; collapse: true;"> |
＊ first-line
<pre class="brush: java; first-line: 11;"> |
11 12 13 14 15 16 17 | class HellowJava{ public static void main(String[] args) { System.out.println("Hello, Java ! "); }} |
* gutter
<pre class="brush: java; gutter: false;"> |
class HellowJava{ public static void main(String[] args) { System.out.println("Hello, Java ! "); }} |
* Highlight
<pre class="brush: java; first-line: 11; highlight: [13, 15];"> |
11 12 13 14 15 16 17 | class HellowJava{ public static void main(String[] args) { System.out.println("Hello, Java ! "); }} |
* smart-tabs
<pre class="brush: plain; smart-tabs: true"> |
1 2 3 | 1 1st123 2nd1234567 3rd |
＊ toolbar
<pre class="brush: plain; toolbar: false;"> |
1 | hide toolbar |
5. 추가정보
지원가능한 언어
'Information' 카테고리의 다른 글
| Mr.Rebates(미스터리베이츠) 가입방법 및 캐쉬백 환급받기 (0) | 2014.02.10 |
|---|
