검색결과 리스트
글
출처: http://gyuha.tistory.com/405
이전 버전을 계속 포스팅 했었는데, br태그가 이상하게 나온다거나.. tistory에서 사용 할 때 불편한 문제점들이 이것저것 있는데.. 아래 처럼 사용하면 좀 더 편하게 사용 할 수 있습니다.
먼저 최신 버전의 SyntaxHighlighter을 다운로드 받습니다.
http://alexgorbatchev.com/SyntaxHighlighter/
압축을 풀면 아래와 같이 보입니다.
여기서 scripts와 styles 폴더의 내용을 모두,
관리자 화면 > 스킨 > HTML/CSS편집 > 파일 업로드에서 파일 업로드를 통해서 올려 줍니다.
추가 된 것을 확인 하시면,
관리자 화면 > 스킨 > HTML/CSS편집 > HTML/CSS편집에서 <title> 밑에 아래 코드를 추가해 줍니다.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js "></script>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.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>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"/>
<script type="text/javascript">
/* jQuery 부분 */
jQuery.noConflict(); // 다른 라이브러리와 충돌을 방지한다.
jQuery(document).ready(function(){ // 문서가 모두 읽힌 후에 다음을 실행
jQuery("blockquote").each( function() { //blokquote가 사용한 태그
if (jQuery(this).attr('class').substr(0,5)=='brush')
// 그중 클래스명이 brush로 시작하는 것을 찾아 적용
{
var temp = jQuery(this).html(); // 내용 복사
temp = temp.replace(/\n/gi, "");
temp = temp.replace(/<BR>/gi, "\n");
temp = temp.replace(/<BR \/>/gi, "\n");
//temp = '<pre class="'+ jQuery(this).attr('class') + '">'+temp+'</pre>'
temp = '<script type="syntaxhighlighter" class="'+ jQuery(this).attr('class') + '"><![CDATA['+temp+']]><\/script>'
jQuery(this).after(temp); // 뒤에 새 작성된 pre 또는 script태그로 붙인다.
jQuery(this).remove(); // 기존의 인용태그 삭제
}
});
/* SyntaxHighlighter 부분 */
SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 안 보기
SyntaxHighlighter.all();
});
</script>
jQuery는 구글의 apis에서 가져다 오도록 했습니다. 현재 최신 버전이 1.4.4입니다.
그리고, 41번과 42번 줄에 보시면, pre태그와 script태그를 둘중 하나를 선택해서 사용 하시면 되는데..
여기 를 참고 하시고 선택해서 사용하세요.
저 같은 경우에는 script 태그를 선택 했습니다.
그리고 사용하는 방법은 매우 간단해 졌습니다.
텍스트 모드에서 붙여 넣기를 한 후,
인용구<Ctrl+Q>를 선택 하시면 됩니다.
<blockquote class="brush:html">
...
</blockquote>
그리고, 줄에 하일라이트를 넣고 싶거나, 상세 설정은
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
이 페이지 를 참고 하시면 됩니다.
지원 문법
| 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 |
참고 사이트
http://techbook.tistory.com/entry/tistory-highlight : jQuery 부분은 여기의 내용을 참고 했습니다. 감사합니다.
이 포스팅에 사용된 버전
syntaxhighlighter_3.0.83.zip
RECENT COMMENT