Syntax Highlighter re-collapse addon
Syntax Highlighter의 설치 방법에 대해서는
http://noexists.tistory.com/172를 참고하면 된다.
Syntax Highlighter는 collapse 기능을 제공하는데, 기본적으로 한 번 expand 해버리면 다시 collapse가 안 된다. (Version 3.0.83 기준.) 인터넷을 뒤져봐도 version 3.0에 맞는 해결 방법이 나오지 않았고, ver. 2.0에 맞는 방법만 찾을 수 있었지만, ver. 2.0은 ver. 3.0과 구조적으로 너무 많이 달라서 적용이 불가능 했다. 그래서 직접 뜯어 고쳐서 re-collapse가 되도록 만들었다.
사실 shCore.js를 뜯어 고치면 더 쉽게 고칠 수 있는데, 가급적 원본에는 손을 대지 않고, 추가적인 코드만 적어서 뜯어 고치는 방법을 선택했다. (그렇게 하는 것이 관리가 편하다.) 그러나 몇몇 함수는 scope의 문제로 내가 원본의 함수를 call할 수가 없었다. 그래서 일부 함수는 어쩔 수 없이 copy and paste해야 했다.
그리고 collapse 기능이 활성화 된 경우에만, 수정된 코드가 작동하게 만들었다. 그렇지 않으면 collapse한 뒤, re-expand가 불가능해지는 사태가 발생할 수도 있기 때문이다. 그리고 expand의 기본 메시지도 제목만 나오는 것이 이상해서 조금 고쳤다.
결론적으로, shCustom.js와 shCustom.css를 만들어 업로드하고, 적절히 불러오면 된다. 당연한 얘기지만 shCustom를 나중에 불러와야 제대로 동작한다.
아무튼 완성(?)된 코드는 다음과 같다.
/* Copied from source of Syntax Highlighter 3.0.83
by Alex Gorbatchev */
function hasClass(target, className)
{
return target.className.indexOf(className) != -1;
};
function addClass(target, className)
{
if (!hasClass(target, className))
target.className += ' ' + className;
};
function removeClass(target, className)
{
target.className = target.className.replace(className, '');
};
function getHighlighterId(id)
{
var prefix = 'highlighter_';
return id.indexOf(prefix) == 0 ? id : prefix + id;
};
function getHighlighterById(id)
{
return sh.vars.highlighters[getHighlighterId(id)];
};
function getHighlighterDivById(id)
{
return document.getElementById(getHighlighterId(id));
};
/* Customized by me */
SyntaxHighlighter.toolbar.items.list.push('collapseSource');
SyntaxHighlighter.toolbar.items.collapseSource = {
getHtml: function(highlighter)
{
if (highlighter.getParam('collapse') != true)
return '';
return SyntaxHighlighter.toolbar.getButtonHtml(highlighter,
'collapseSource',
'Collapse');
},
execute: function(highlighter)
{
if (highlighter.getParam('collapse') != true)
return;
var div = getHighlighterDivById(highlighter.id);
addClass(div, 'collapsed');
}
};
SyntaxHighlighter.toolbar.items.expandSource.getHtml = function(highlighter)
{
if (highlighter.getParam('collapse') != true)
return '';
var title = highlighter.getParam('title');
return SyntaxHighlighter.toolbar.getButtonHtml(highlighter,
'expandSource',
(title ? title : '')
+ ' ('
+ SyntaxHighlighter.config.strings.expandSource
+ ')');
};
SyntaxHighlighter.config.strings.expandSource = 'Expand';
SyntaxHighlighter.config.strings.aboutDialog = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>About SyntaxHighlighter</title></head><body style="font-family:Geneva,Arial,Helvetica,sans-serif;background-color:#fff;color:#000;font-size:1em;text-align:center;"><div style="text-align:center;margin-top:1.5em;"><div style="font-size:xx-large;">SyntaxHighlighter</div><div style="font-size:.75em;margin-bottom:0.0em;"><div>version 3.0.83 (July 02 2010)</div><div><a href="http://alexgorbatchev.com/SyntaxHighlighter" target="_blank" style="color:#005896">http://alexgorbatchev.com/SyntaxHighlighter</a></div><div>JavaScript code syntax highlighter.</div><div>Copyright 2004-2010 Alex Gorbatchev.</div><hr/><div>Syntax Highlighter re-collapse addon</div><div>version 1.0 (April 12 2011)</div><div><a href="http://noexists.tistory.com/174" target="_blank" style="color:#005896">http://noexists.tistory.com/174</a></div><hr/></div><div>If you like this script, please <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2930402" style="color:#005896">donate</a> to <br/>keep development active!</div></div></body></html>';
SyntaxHighlighter.defaults['smart-tabs'] = false;
SyntaxHighlighter.defaults['tab-size'] = 8;
SyntaxHighlighter.all();
.syntaxhighlighter .toolbar {
padding: 0.1em 0.8em 0em 0.8em !important;
font-size: 1em !important;
position: static !important;
width: auto !important;
height: auto !important;
}
.syntaxhighlighter .toolbar span {
display: inline !important;
margin-right: 1em !important;
}
.syntaxhighlighter .toolbar a {
display: inline !important;
}
.syntaxhighlighter {
padding-bottom: 1px;
}
<link href="./images/shCore.css" rel="stylesheet" type="text/css" />
<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css" />
<link href="./images/shCustom.css" rel="stylesheet" type="text/css" />
<script src="./images/shCore.js" type="text/javascript"></script>
<script src="./images/shAutoloader.js" type="text/javascript"></script>
<script src="./images/shCustom.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function path()
{
var args = arguments,
result = []
;
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', './images/'));
return result
};
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));
//]]>
</script>
