티스토리 뷰


* SyntaxHighlighter


: 블로그에 소스코드 스타일을 계속 수동으로 해주는 것은 참으로 고된일이라 어떤 라이브러리가 없을까해서 찾아본게 바로 SyntaxHighlighter 라는 라이브러리 입니다. 자바스크립트에 간단하게 적용예는 아래와 같습니다.

(function (doc, win) {
    "use strict";
    var nyschool,
        host = "ny-school.appspot.com",
        loginId,
        currentUserInformation,
        School,
        StudentList,
        Student,
        HomeRoom,
        Teacher,
        teacherList,
        studentListList,
        currentStudentList,
        homeRoomList,
        currentHomeRoom;
 
    function get(type, callback) {
        if (loginId) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", host + "/get/" + loginId + "/" + type, true);
            xhr.onreadystatechange = function (e) {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = this.responseText;
                    win.alert(response);
                    callback(response); //TODO : parse JSON
                }
            };
            xhr.send();
        } else {
            win.alert("Need to Login!");
        }
    }
}(document, window));



: 이러한 소스 코드의 스타일링을 간단하게 적용시킬 수 있는 라이브러리 입니다. 2012년 12월 9일 현재 3.0.83 버전까지 나와있고, 자바스크립트와 CSS를 이용한 라이브러리입니다.



* 티스토리에 적용하기


1. 티스토리에서는 자바스크립트 파일을 직접 올릴수가 없기 때문에 이미지 파일을 올리는 공간에다가 올려놓고, HTML 템플릿을 수정해서 라이브러리를 적용 시키면 됩니다. 일단 아래의 주소에서 소스 코드를 다운받고 압축을 풉니다.


http://alexgorbatchev.com/SyntaxHighlighter/download/


2. 티스토리 관리페이지로 가서 HTML/CSS 편집 메뉴로 들어가서 '파일업로드' 메뉴를 선택한다음 압축 푼 곳의 /syntaxhighlighter3/scripts/ 와 /syntaxhighlighter3/styles/에 js 파일들과 css 파일들이 있습니다. 이것들을 티스토리에 이렇게 업로드합니다.




3. 그 다음에는 올린 파일들을 스킨 템플릿에 추가합니다. HTML/CSS에 가서 js 파일들과 css 파일들을 HTML로 태그 안에 추가합니다. 저는 <title> 태그 바로 아래에 추가했습니다. js 파일은 모든 파일들을 다 추가해도 되고, 쓰는 파일만 추가해도 되고, 스타일은 사용하고자하는 스타일만 Core와 Theme한쌍 추가해주시면 됩니다. 이제 저장하면 세팅은 완료되었습니다.


: 아래는 제가 사용하고 있는 테마와 파일들을 추가 시킨 소스 코드입니다. 맨 아래에 SyntaxHighlighter.all() 을 실행해야 스타일이 적용됩니다.

<link rel="stylesheet" type="text/css" href="./images/shCoreRDark.css" />
<link rel="stylesheet" type="text/css" href="./images/shThemeRDark.css" />
<script class="javascript" src="./images/shCore.js"></script>
<script class="javascript" src="./images/shBrushCSharp.js"></script>
<script class="javascript" src="./images/shBrushCpp.js"></script>
<script class="javascript" src="./images/shBrushCss.js"></script>
<script class="javascript" src="./images/shBrushJScript.js"></script>
<script class="javascript" src="./images/shBrushJava.js"></script>
<script class="javascript" src="./images/shBrushBash.js"></script>
<script class="javascript" src="./images/shBrushPhp.js"></script>
<script class="javascript" src="./images/shBrushPython.js"></script>
<script class="javascript" src="./images/shBrushRuby.js"></script>
<script class="javascript" src="./images/shBrushSql.js"></script>
<script class="javascript" src="./images/shBrushVb.js"></script>
<script class="javascript" src="./images/shBrushXml.js"></script>
<script class="javascript">
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>

: 저는 딱 쓰는 스타일들만 추려냈습니다. http로 가져오는 파일이 많으면 많을수록 블로그 페이지 로드 속도가 느려지니까요. 더 최적화를 하고자한다면 js 파일의 내용을 하나로 합치는 것도 방법입니다. 위의 파일들 중 필수는 shCore.js와 하나의 css 파일입니다.



* 사용하기


4. 이제 글쓰기에서 적용하면 됩니다. 페이지에 적용할 때에는 SyntaxHighlighter는 기본적으로 <pre> 태그 안에 들어가는 태그를 변환시켜주는데, <pre> 태그의 class를 "brush:{사용하고자하는 소스코드 종류}"로 적용 시켜줘야합니다. 글을 쓰다가 소스 코드를 적용시키고자 한다면 오른쪽 위의 HTML 체크박스를 체크하고 직접 아래와 같이 적어주면 적용이 되는 겁니다. 





: 바로 위의 소스 코드 일부를 가져와본겁니다.

<pre class="brush:html">
    <script class="javascript" src="./images/shBrushVb.js"></script>
    <script class="javascript" src="./images/shBrushXml.js"></script>
</pre>


: 소스코드에 위와 같이 적어서 넣으면, 이렇게 적용이 됩니다.





: 참 쉽죠. brush: 다음에 들어갈 내용은 아래와 같이 언어의 종류를 선택 가능하도록 되어있고, autoloader를 이용한다면 수정이 가능합니다.

  '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'


: 그럼 이제부터 블로그에 소스코드 스타일링을 적용시키면 됩니다! 다른 환경 설정은 아래 사이트에 들어가면 몇가지 더 있습니다. 


http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/


끝.


공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함