티스토리용 SyntaxHighlighter 3.0을 소개합니다!

시험 기간이 끝나자마자 포스팅을 시작한다. 이러니 성적이 좋을 수가 있나.

---

2010년 7월 2일, SyntaxHighlighter 3.0.83이 배포되기 시작했다. (사본 다운로드)

syntaxhighlighter_3.0.83.zip

티스토리용 파일은 글 하단에 있지만 수정된 파일 하나만 올려 놓았기 때문에 이 파일도 받아야 한다.
- SyntaxHighlighter 웹 사이트 바로가기

1. 소개
3.0은 매우 많은 개선점을 컨셉으로 만들어졌다.

1. 외부 동작 변화
   
   • Copy to Clipboard와 View Source가 하나로 합쳐졌다고 할 수 있겠다.
     원래 클립보드에 복사할 때에는 플래시 파일을 쓰고, 소스 보기에는 새 창을 띄웠다.
     이제 렌더된 SH 영역을 더블클릭해 주면 소스를 편집할 수 있다.
     이 상태에서 영역을 선택하거나 일부를 지우고 복사할 수 있다.
     SH 영역 외부를 클릭하면 원래대로 돌아오며, 변경된 내용은 복원된다.
     textarea로 잠시 덮는 방법이다.
   • 첫 줄 번호를 정할 수 있다.
   • <pre> 태그에서도 워드랩이 사라지고 다시 좌우 스크롤바가 생겼다.
     이거 어떻게 안 된다. 난 워드랩 되는 게 좋던데.
     
   • 영역 전체에 css 클래스를 별도로 적용할 수 있다.
     (물론 이전에도 어떻게든 되기는 했지만, 공식적인)
   • 영역 전체에 타이틀을 넣을 수 있다.
   • 자체 기능: 소스 영역을 접어 놓을 수 있다. 다만 한 번 펴면 다시 접지는 못한다.
   • ruler 등을 끄고 켤 수 있다.
   • php 브러시와 xml 브러시를 동시에 적용할 수 있다.
     
2. 내부 구조 변화
   • 브러시 (언어별 사전) 구조가 바뀌었다.
     데이터 함수 + 실행 부분이던 브러시 파일이,
     전체 함수 { 데이터 함수 + 실행 부분 + CommonJS 지원 } 형태가 되었다.
     내부 형식은 똑같아서 2.x에 쓰이던 브러시를 그대로 쓸 수 있다.
   • Core CSS + Theme CSS 형식으로 쓰이던 테마를  파일 하나로 대체할 수 있다.
     즉, 두 파일을 동시에 불러 주는 CoreTheme CSS 파일이 있다.
     내부 형식이 달라져서 2.x에 쓰이던 고전 CSS 테마는 사용 불가능.
   • XRegExp를 지원한다.
   • CommonJS를 제대로 지원한다.
     특히 AJAX 유저들이 온갖 비표준법을 떡칠해 놓았는데 그럴 필요 없음.
   • SCSS로 작성된 테마를 이용할 수 있다.
     SCSS: SASS 형태로 구조화된 CSS; 더 이상의 자세한 설명은 생략한다.
   • Autoloader라는 게 생겼다. 기존의 HTML 태그 덩어리 대신 로더만 갖다 놓으면 된다.

등등 걸작이다.

2. 삽질 내용

티스토리라든지 텍스트큐브 기반 사용자를 위한 삽질보정.
블루앤라이브 님께서 자주 해 주시던 일이다. 약간의 거대한 조언을 얻었다. 말하자면 방문자 도둑질.

이 삽질의 결과가 아래 shCore.js 파일이다.

• 텍스트큐브/태터툴즈 계열 (티스토리도) 치환자 입력 지원.
  

  [#\\#_(치환자)_#\\#]

  라고 입력하면
  

  [#\#_(치환자)_#\#]

  라고 출력된다.
  티스토리 새관리의 버그, <pre> ~ </pre> 내의 무한 <br /> 제거도 병행한다.
  

  shCore.js 파일에 있는 fixInputString() 함수의
  

  	if (sh.config.bloggerMode == true)
  		str = str.replace(br, '\n');

  이 부분을
  

  	if (sh.config.bloggerMode == true)
  		str = str.replace(br, '').replace(/\\\#/g,"#");

  이렇게 고쳤을 뿐이다.
  bloggerMode가 true로 설정되어야 동작한다.
  
  당연하지만, \#을 #으로 고쳐 주는 방식이라 \#\#이나 \## 등 어떻게 쓰든 괜찮다.
  

• 소스 앞뒤의 <br /> 또는 빈 줄 제거.
  

  SyntaxHighlighter에서 trimFirstAndLastLines()와 fixInputString()이 이 별도로 동작한다.
  <br /> 태그와 행가름이 있는 경우 stripBrs를 true로 설정해도 둘 중 하나가 남는다.
  이것을 변경.
  
  shCore.js 파일에 있는 trimFirstAndLastLines() 함수의
  

  	return str.replace(/^[ ]*[\n]+|[\n]*[ ]*$/g, '');

  이 부분을
  

  	return str.replace(/^[ ]*[\n|[<br\s*\/?>]]+|[\n|[<br\s*\/?>]]*[ ]*$/g, '');

  이렇게 고쳤을 뿐이다. (재탕)
  
  이 함수는 설정 여부에 무관하게 실행되므로 stripBrs에 신경쓰지 않아도 괜찮다.
  

• 아래 파일에는 별도의 언어 파일을 추가하지 않았다.

3. 결과물
블루앤라이브 님은 속도 빨라지라고(?) 친절하게 인크립션까지 해 주시지만... 저는 그러지 않아요

shCore.js

2010.12.2. 원활한 작동을 위해 컴파일된 파일로 교체했다.


4. 설치 방법

압축을 풀고 모든 브러시 파일(/scripts/)과 사용할 테마 파일(/styles/)을 업로드해야 한다.
shCore.js는 수정본으로 교체한다.
1.x 시절부터 SyntaxHighlighter를 textarea 태그로 사용했다면 한 줄이 더 필요하다.

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

[1] 전통적인 방법

<script type="text/javascript" src="./images/shCore.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">
//<![CDATA[
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>

강조된 두 줄 중 아래 한 줄이 테마에 직접 관여한다. 두 줄을 이렇게 한 줄로 바꿔도 된다.

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

[2] 오토로더를 사용하는 방법

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.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">
//<![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'
));
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>

SyntaxHighlighter 웹 사이트에 나온 사용법을 거의 그대로 옮겨 왔다.
아무래도 소스가 길어지는 것은 구조적인 한계인 듯하다.
브러시에 있는 .aliases 설정을 가져오려면 애초에 브러시 파일을 불러와야 하는데,
그러면 오토로더를 쓸 필요가 없기 때문.

[3] SyntaxHighlighter 페이지 호스팅을 이용하는 방법

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>

최신 판 소스를 직접 가져올 수 있다.
SyntaxHighlighter 웹 사이트에 나온 사용법을 거의 그대로 옮겨 왔다.