위 링크의 syntaxhighlighter 3.0.83 파일을 다운로드한다.
압축을 해제하여 scripts와 styles 폴더의 모든 파일들을 "HTML/CSS편집 -> 파일업로드"에 추가 해준다.
첨부한 jQuery파일을 같은 위치에 추가한다.
HTML/CSS편집 에서 <head> 태그에 안에 css를 추가 해준다.
- 여기서 shCore.css는 추가하지 않아도 제대로 작동한다. 스크롤바 패치를 테마css파일에 직접하지 않기 위해서 shCore.css에 적용 후 추가했다. 이러면 테마를 변경하더라도 패치가 계속 유지된다.
overflow를 x, y로 분리하여 설정한 shCore.css의 내용. 가로 스크롤바만 생긴다.
<!-- jQuery 삽입 -->
<SCRIPT type=text/javascript src="./images/jquery-1.6.1.min.js"></SCRIPT>
<!-- <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/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. 인용구(ctrl+Q)를 만들어 그 안에 코드를 넣는다.
2. HTML모드로 들어가 해당 인용구(blokquote)의 class를 "brush: type;"으로 변경한다.
- 이 경우 jQuery에서 각종 태그들이 제거되거나 변형(주로 줄바꿈 관련)되므로 이를 무시하고 싶다면 2번째 방법으로 사용한다.
1. HTML모드로 아래와 같이 직접 입력한다.
jquery-1.6.1.min.js
font_embed-showjean.zip