tistory SyntaxHighLighter 3.0.83 사용

SyntaxHighlighter_v3.0.83.zip

1.  SyntaxHighlighter_v3.0.83.zip파일 다운로드

2. 압축을 풀고 해당 폴더의 파일을 tistory 스킨편집 페이지에 업로드

   https://[티스토리주소]/manage/design/skin/edit#

 2-1 스킨편집> html편집> 파일업로드> [+추가] 버튼  클릭

       syntaxhighlighter_3.0.83\scripts 

       yntaxhighlighter_3.0.83\styles

     폴더안 파일 업로드

  

   

    

2-2  HTML 클릭하고

  </body>바로 위에 스크립트 삽입 하고 [저장] 버튼 클릭

<!-- SyntaxHighlighter 설정 시작-->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.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/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.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>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeMidnight.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter 설정 끝-->

<!-- SyntaxHighlighter 스크롤바 제거 -->
<style type="text/css">
  .syntaxhighlighter { 
     overflow-y: hidden !important; 
     overflow-x: auto !important; 
  }
    .syntaxhighlighter .toolbar {
        display : none;
    }
</style>
<!-- SyntaxHighlighter 스크롤바 제거 끝 -->

3. 사용법- 티스토리 에디터에서 html을 체크하고 아래와 같이 입력

3-1

<pre class="brush: html;">

SyntaxHighlighter-를 사용하고 싶은 소스 

</pre>

본문에 

"<"을 "&lt;"로,

">"을 "&gt;"로 변경하여 사용

3-2 SyntaxHighlighter 활용 옵션

<pre class="brush:html">  <!-- HTML 소스표시 -->
<pre class="brush:css">   <!-- CSS 소스표시 -->
<pre class="brush:js">    <!-- JavaScript 소스표시 -->
<pre class="brush:html highlight:[2,4]">  <!-- 특정 행 강조 -->
<pre class="brush:js html-script:true">   <!-- 다른 언어와 HTML -->
<pre class="brush:html first-line:25">    <!-- 시작 행 번호 변경 -->
<pre class="brush:html toolbar:false">    <!-- 도구모음 숨기기 -->
<pre class="brush:html auto-links:false"> <!-- 오토 링크 해제 -->
<pre class="brush:html collapse: true"> <!-- 소스접기 -->
<pre class="brush:html  gutter: false"> <!-- 행번호 삭제 -->

3-3  brush:언어 부분에 두번째 열인 Brush aliases 부분을 입력

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js