티스토리용 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 웹 사이트에 나온 사용법을 거의 그대로 옮겨 왔다.

• 카카오스토리
• 트위터
• 페이스북

'Sablog Models > 인터넷·웹' 카테고리의 다른 글

장고는 반쪽 MVC이다  (0)	2013.12.01
티스토리용 SyntaxHighlighter 3.0을 소개합니다!  (9)	2010.07.11
유용한 확장 JavaScript Library (2) importScript()  (0)	2010.02.12
유용한 확장 JavaScript Library (1) insertAfter()  (0)	2010.02.11
네이버 블로그 포스트 내용을 plain text로 보기.  (5)	2009.11.28
ActiveX를 다운받게 하려면 브라우저 검사는 하란 말이다.. - HTML 브라우저 검사  (2)	2009.08.14