기본 콘텐츠로 건너뛰기

괜찮으십니까

블로그에 Syntax Highlighter 설치하기

개발자가 블로그를 운영하다보면 Vim이나 Eclipse(또는 영광의 Visual Studio)에서 지원하는 문법강조(Syntax highlight) 기능을 쓰고 싶어 미칠 것이다.

몇몇 블로그 서비스는 정식 플러그인을 통해 지원하지만, 대부분 블로그는 전혀 지원하지 않고 있다.

그! 러! 나!

블로그 템플릿(또는 테마?)을 수정할 수 있다면, 자바 스크립트로 만들어진 Syntax Highlighter를 사용할 수 있다.

설치는 간단하다.

  1. </head> 태그 바로 위에 아래 내용을 삽입한다.
    <!-- 문법강조시작 -->
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>       
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <!-- 문법강조끝 -->
  2. </html> 태그 바로 위에 아래 내용을 삽입한다.
    <script type='text/javascript'>
         SyntaxHighlighter.all()
    </script> 
자, 이제 테마를 저장하고, 실제 사용법을 알아보자.

참조: http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

위 링크에 가보면 두 가지 방법을 제시한다.

  1. <pre> 태그
    class 속성에 "brush: [언어]"를 추가하는 형식이다.
    단점은 꺽쇠(<, >)를 모두 HTML 인코딩 해야하는 것인데, 보통 블로그 편집기는 이 과정을 자동으로 해준다.
  2. <script> 태그
    type 속성은 syntaxhighlighter, class 속성은 "brush: [언어]", <script> 태그 사이에는 <![CDATA[ /* 소스 */ ]]> 형태로 넣는 것인데,
    장점은 꺽쇠에 대해 HTML인코딩을 하지 않아도 되는 점.
    단점은 1. 대부분 RSS리더는 <script>태그를 건너 뛴다는 점과, 2. </script> 태그로 닫는걸 깜빡한다면 대참사가 일어난다는 점이다.
그래서 공식 홈페이지에선 블로그에서 사용할 때는 <pre> 태그 방식을 권하고 있다.

댓글

이 블로그의 인기 게시물

Bash Array, Map 정리

Bash에서 Array, Map에 대한 정리. (매번 찾기 귀찮) 찾아보진 않았지만, Bash에서 Array든 Map이든 동일하게 Map(C++에서 Unordered Map)으로 동작하는 것 같다. 왜냐하면, Array의 Index가 연속하지 않아도 동작한다. 그저 Key가 0 이상의 정수인 Map이랑 비슷하게 동작한다. 예) 1, 2, 3, 9, 10 Array # 생성 declare -a empty_array declare -a ar=(haha hoho baba "long string haha hoho") # 접근 echo "ar[0]=${ar[0]}" echo "all as array=${ar[@]}" # 큰따옴표 안에서 각 원소를 따로따로 전달한다. echo "all as one=${ar[*]}" # 큰따옴표 안에서 각 원소를 문자열 하나로 합쳐 전달한다. echo "indexes=${!ar[@]}" echo "indexes=${!ar[*]}" echo "length=${#ar[@]}" echo "length=${#ar[*]}" echo "last=${ar[-1]}" echo "last=${ar[@]: -1}" # 콜론 뒤에 빈 칸이 꼭 필요하다. 옛 방식 # 현재 상황 declare -p ar #(출력) declare -a ar=([0]="haha" [1]="hoho" [2]="baba" [3]="long string haha hoho") ar[100]=hello # 인덱스를 건너 뛰어도 동작한다. declare -p ar #(출력) declare -a ar=([0]="haha" [1]="hoho" [2]="baba" [3]=&

SQLite에서 파일 크기 줄이기

간단한 개인 프로젝트를 하고 있는데, SQLite DB파일 크기가 매우 커져서 테이블에 필요 없는 레코드를 날렸다. 그런데 날리고도 파일크기가 그대로라서 여기저기 뒤져보니 VACUUM 커맨드를 사용하란다. 사용법은 매우 간단하다. 그저 "VACUUM;"이라고 날려주면 동작한다. (참조: http://sqlite.org/lang_vacuum.html ) 다만, 동작이 매우 느려서 자주 쓸만한 것은 아니다. 실제로 100MB짜리 파일을 7KB로 줄이는데 수 분이 걸렸다. 소스를 봐야겠지만, DB를 EXPORT한 뒤에, 파일을 지우고 다시 IMPORT하는게 아닐까 하는 의구심이 든다. 매번 하기 귀찮으면 "PRAGMA auto_vacuum=1;"를 하면, 새로운 빈 페이지(DELETE나 DROP TABLE 같은...)가 생길 때마다, VACUUM을 실행한다. 다만, SQLite구조 문제로 테이블을 생성하기 전에 미리 날려야하는 안타까움이 있다. (참조: http://sqlite.org/pragma.html#pragma_auto_vacuum )

std::thread에서 클래스 메소드 호출하기

C++11이 나온지 어언 3년... 그동안 GCC도 많이 발전하고 해서, 귀찮은 pthread_* 함수를 쓰는 것보다, 잘 감싼 std::thread를 써보고 있다. 딱히 커다란 장단점은 찾아볼 수 없지만, 콜백 함수 형태에 구애받지 않는다. C++11이 갖는 꽃별천지 언어특성과 표준라이브러리가 만나 그렇게 할 수 있는 것이지만, 자세한 설명은 생략한다... (응?) 보통 일반 함수를 쓸 경우, 아래와 같이 쓸 수 있다. void cb_func1(void) { /* ... */ } void cb_func2(int i) { /* ... */ } void init(void) { std::thread t1(cb_func1); std::thread t2(cb_func1, 10); t1.join(); t2.join(); } 그러면 메소드를 쓰다면...? 메소드 포인터 다음에 객체 포인터를 넣어서 해결할 수 있다. class MyThread { public: MyThread() { m_th = std::thread(&MyThread::proc, this); m_th.detach(); } private: void proc(void) { /* ... */ } private: std::thread m_th; }; 요로코롬 할 수 있다. 물론 밖에서 호출할 때는 "this" 대신에 해당 객체 포인터를 넘겨야 제대로 동작한다.