'SyntaxHighlighter'에 해당되는 글 1건

  1. 2011.12.12 티스토리에 코드 하이라이트(SyntaxHighlighter) 기능 사용하기 (2)
SyntaxHighlighter  

SyntaxHighlighter는 티스토리에서 프로그래밍 코드를 사용할 경우 보기 좋기 변환해 주는 플러그인 입니다. 현재(2011/12/12일 기준) 3.0.83 버전까지 릴리즈 되어있으면 다운로드는 아래의 링크에서 받으실 수 있습니다.

SyntaxHighlighter 다운로드 페이지 가기

 



SyntaxHighligter 티스토리에 설치  
 
다운 받은 SyntaxHighliter를 티스토리에 적용시키는 것은 간단합니다. 먼저 다운받은 압축 파일을 해제 한 후 script, style 폴더에 있는 파일들만 티스토어의 HTML/CSS 편집의 파일업로드 메뉴에서 업로드 시킵니다. 그 다음 skin.html의 head 태그 안에 아래의 코드를 추가 합니다.
<!-- SyntaxHighlighter Start -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script> 
<link type="text/css" rel="stylesheet" href="./images/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/> 
<script type="text/javascript">
//<![CDATA[
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
//]]>
</script>
<!-- SyntaxHighlighter End -->


그리고 크롬 브라우저 사용자를 위해 css 편집창에 아래의 코드를 추가 합니다.
div .syntaxhighlighter { 
	overflow-y: hidden!important; overflow-x: auto!important; 
}





티스토리에서 SyntaxHighlighter 사용  

글 작성시 코드 하이라이트를 적용하려면 글쓰기시 창의 상단 우측에 있는 html에 체크를 한 후 아래와 같이 pre 태그를 사용하여 코드 하이라이트 적용시킬 부분을 설정합니다.

<pre class="brush:코드이름">여기에 코드 작성</pre>


코드 이름에 코드 하이라이트를 적용하기 원하는 코드의 종류를 써 주면 됩니다. brush에 사용가능한 코드이름은 아래와 표와 같습니다. (brush 명을 사용하려면 필요 js 파일이 반드시 설치되어 있어야 합니다.)

분류사용가능 brush명 
필요 파일
Bash/shell bash, shell shBrushBash.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
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.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
테이블 출처 : 이런저런이야기


그 다음 html의 체크를 다시 해제한 후 위지웍 글쓰기 창에서 원하는 코드를 넣어주면 됩니다.



추가적으로 특정 줄에 하이라이트를 주고 싶다면 아래와 같이 pre 태그의 class 속성에 highlight 항목을 설정해 주면 됩니다.

    
   
       코드 들어가는 부분
    
<div class="title">
    <div class="wrapper">
        <h1>
            <a href="[##_blog_link_##]" title="[##_title_##]">[##_title_##]</a>
            <span class="blogCover">[##_desc_##]</span>
        </h1>
    </div>
</div>


또한 SyntaxHighlighter의 스타일을 변경하는 경우에는 skin.html에서 css를 바꿔주면 됩니다. SyntaxHighlighter의 스타일에는 shCore.css, shCoreFadeToGrey.css, shCoreEclipse.css, shCoreEmacs.css 등이 있습니다.


참고 : TistorySkin






SyntaxHighlighter Code Converter  

티스토리에 SyntaxHighlighter를 이용해 코드를 올릴 시 원하는 대로 표시가 되지 않는 경우가 많은데 이러한 문제를 해결해주는 프로그램 입니다. 견족자K 님 께서 만드신 프리웨어로 코드 수정하지만 않는다면 자유롭게로 사용이 가능하다네요.




사용법은 아래의 출처의 링크를 참고하시면 됩니다.


출처 : '자유로운 그날을 위해' 블로그


신고
Posted by 플라스틱라디오


맨 위로

티스토리 툴바