fsj

http://alexgorbatchev.com/SyntaxHighlighter/download/

위 링크의 syntaxhighlighter 3.0.83 파일을 다운로드한다.

압축을 해제하여 scripts와 styles 폴더의 모든 파일들을 "HTML/CSS편집 -> 파일업로드"에 추가 해준다.

jquery-1.6.1.min.js

첨부한 jQuery파일을 같은 위치에 추가한다.

(jQuery 부분은 http://bryan7.tistory.com/10 이곳에서 참고했다.)

HTML/CSS편집 에서 <head> 태그에 안에 css를 추가 해준다.

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>fsj :: 티스토리에 syntaxhighlighter 3.0.83 적용하기 + jQuery + autoloader</title>

<link href="./style.css" rel="stylesheet" type="text/css" />

<link rel="alternate" type="application/rss+xml" title="fsj" href="https://showjean.tistory.com/rss" />

<link rel="shortcut icon" href="https://blog.showjean.com/favicon.ico" />

<link rel="stylesheet" type="text/css" href="./images/shCoreEclipse.css" />

<link rel="stylesheet" type="text/css" href="./images/shCore.css" />

</head>

- 여기서 shCore.css는 추가하지 않아도 제대로 작동한다. 스크롤바 패치를 테마css파일에 직접하지 않기 위해서 shCore.css에 적용 후 추가했다. 이러면 테마를 변경하더라도 패치가 계속 유지된다.

overflow를 x, y로 분리하여 설정한 shCore.css의 내용. 가로 스크롤바만 생긴다.

.syntaxhighlighter {

border: 1px solid #222 !important;

width: 98% !important;

margin: 1em 0 1em 0 !important;

position: relative !important;

font-size: 1em !important;

overflow-y: hidden !important;

overflow-x: auto !important;

}

마찬가지로 </body> 태그 위에 다음 script를 추가한다.

- 참고 : http://ddoong2.com/601

<SCRIPT type=text/javascript src="./images/jquery-1.6.1.min.js"></SCRIPT>



<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shAutoloader.js"></script>

<SCRIPT type="text/javascript">

/* jQuery 부분 */

jQuery.noConflict(); // 다른 라이브러리와 충돌을 방지한다.

jQuery(document).ready(function(){ // 문서가 모두 읽힌 후에 다음을 실행

jQuery("blockquote[class^=brush]").each( function() { //blokquote를 사용한 태그
var $this = jQuery(this);

// 복사 붙여넣기 했을때 탭처리
$this.find("span[class*=Apple-tab-span]").replaceWith(function() {
return jQuery(this).text();
});

// 편집창에서 직접 수정했을때 탭 처리
$this.find("p[style*=margin-left]").each(function() {
var $elem = jQuery(this);
var style = $elem.attr("style");
var result = /\s*?margin-left:\s(\w+?)em;\s*?/gi.exec(style);
if ( result != null ) {
result = result[1];
}
var spaceCount = parseInt(result) * 2;
var spaceString = "";
for (var i = 0; i < spaceCount; i++) {
spaceString += " ";
}
$elem.removeAttr("style");
$elem.html(spaceString + $elem.html());
});

var temp = $this.html(); // 내용 복사
temp = temp.replace(/\n/gi, "");
temp = temp.replace(/<p><\/p>/gi, "");
temp = temp.replace(/<p><br\s*\/?><\/p>/gi, "\n"); // 줄바꿈
temp = temp.replace(/<P>(.*?)<\/P>/gi, "$1\n"); // 한줄끝
temp = temp.replace(/<br\s*\/?>/gi, "\n"); // 줄바꿈

temp = '<script type="syntaxhighlighter" class="' + $this.attr('class') + '"><![CDATA[' + temp + ']]><\/script>'
$this.replaceWith(temp);
});

/* SyntaxHighlighter autoloader */

//<![CDATA[

SyntaxHighlighter.autoloader(

'applescript ./images/shBrushAppleScript.js',

'actionscript3 as3 ./images/shBrushAS3.js',

'bash shell ./images/shBrushBash.js',

'coldfusion cf ./images/shBrushColdFusion.js',

'cpp c ./images/shBrushCpp.js',

'c# c-sharp csharp ./images/shBrushCSharp.js',

'css ./images/shBrushCss.js',

'delphi pascal ./images/shBrushDelphi.js',

'diff patch pas ./images/shBrushDiff.js',

'erl erlang ./images/shBrushErlang.js',

'groovy ./images/shBrushGroovy.js',

'java ./images/shBrushJava.js',

'jfx javafx ./images/shBrushJavaFX.js',

'js jscript javascript ./images/shBrushJScript.js',

'perl pl ./images/shBrushPerl.js',

'php ./images/shBrushPhp.js',

'text plain ./images/shBrushPlain.js',

'py python ./images/shBrushPython.js',

'ruby rails ror rb ./images/shBrushRuby.js',

'sass scss ./images/shBrushSass.js',

'scala ./images/shBrushScala.js',

'sql ./images/shBrushSql.js',

'vb vbnet ./images/shBrushVb.js',

'xml xhtml xslt html ./images/shBrushXml.js'

);

//]]>

/* SyntaxHighlighter 사용부분 */

SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 안 보기

SyntaxHighlighter.all();

});

</SCRIPT>

</body>

사용법 1

1. 인용구(ctrl+Q)를 만들어 그 안에 코드를 넣는다.

2. HTML모드로 들어가 해당 인용구(blokquote)의 class를 "brush: type;"으로 변경한다.

3. 기타 syntaxhighlighter에 필요한 옵션(http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/)을 적용한다.

- 이 경우 jQuery에서 각종 태그들이 제거되거나 변형(주로 줄바꿈 관련)되므로 이를 무시하고 싶다면 2번째 방법으로 사용한다.

사용법 2

1. HTML모드로 아래와 같이 직접 입력한다.

//code

저작자표시 비영리 변경금지

'etc' 카테고리의 다른 글

티스토리에 자동 링크 적용하기 (0)	2013.10.09

fsj

'etc' 카테고리의 다른 글

티스토리툴바