구글 티스토리에 소스코드를 깔끔(?)하게 올릴수 있는 방법을 알려드립니다.  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">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

?
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;">
System.out.println("http://test.com");
</pre> 

?
1
System.out.println("http://test.com");

기본은 true URL이 있으면 자동으로 링크가 생성되는데 링크 안 생기게 할려면 false로 지정


＊ class-name

<style>
.source_custom_style { border: 4px solid #00F; }
</style>
<pre class="brush: java; class-name: source_custom_style">
        System.out.println("Hello, Java ! ");
</pre>

?
1
System.out.println("Hello, Java ! ");


＊ class-name

<pre class="brush: java; collapse: true;">
        System.out.println("Hello, Java ! ");
</pre>


＊ first-line

<pre class="brush: java; first-line: 11;">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

?
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 ! ");
    }
}
</pre>

?
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}


* Highlight

<pre class="brush: java; first-line: 11; highlight: [13, 15];">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

?
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     1st
123  2nd
1234567   3rd
</pre> 

?
1
2
3
1   1st
123 2nd
1234567 3rd


＊ toolbar

<pre class="brush: plain; toolbar: false;">
hide toolbar
</pre> 

1
hide toolbar


5. 추가정보

지원가능한 언어


'Information' 카테고리의 다른 글

Mr.Rebates(미스터리베이츠) 가입방법 및 캐쉬백 환급받기  (0) 2014.02.10

+ Recent posts

티스토리툴바