[Javascript] 소스 보기 라이브러리 - Syntaxhighlighter

Development note/Javascript, JQuery, CSS  2013. 3. 12. 09:00

안녕하세요 명월입니다.


이 글은 Syntaxhighlighter라이브러리에 대한 소개입니다.

Syntaxhighlighter 라이브러리란 블로그 또는 웹 페이지에 프로그램 소스 보기할 때 사용하는 라이브러리 입니다.

저도 지금까지 이 라이브러리를 몰라서 포스팅에 소스를 사진으로 첨부하거나 테이블 박스를 생성하여 소스를 넣는 방법으로 입력했었습니다.


그러니 블로그 글을 보아서 소스를 참조하기도 힘들고 (이미지를 보고 하나하나 따라쳐야 하는 불편함) 눈에 확 들어오지 않네요.

그럼 Syntaxhighlighter 라이브러리의 사용 방법과 티스토리에 적용하는 방법까지 소개하겠습니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ConsoleTest
{
  class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine("Test 입니다");
    }
  }
}

위의 소스보기는 Syntaxhighlighter를 적용했을 때의 화면입니다.

먼저 아래의 링크에 접속을 하셔서 라이브러리를 다운로드 받습니다.

링크 - Syntaxhighlighter 다운로드


최신 버전을 다운로드 하시고 적용하는 방법입니다.

테스트를 위한 폴더를 작성하시고 그 하위 폴더에 라이브러리 파일의 압축을 풉니다. 그리고 테스트 html파일인 test.html를 작성합니다

<HTML>
  <HEAD>
    <script class="javascript" src="./scripts/shCore.js"></script>
    <script class="javascript" src="./scripts/shLegacy.js"></script>
    <script class="javascript" src="./scripts/shBrushCSharp.js"></script>
    <script class="javascript" src="./scripts/shBrushCpp.js"></script>
    <script class="javascript" src="./scripts/shBrushCss.js"></script>
    <script class="javascript" src="./scripts/shBrushDelphi.js"></script>
    <script class="javascript" src="./scripts/shBrushJScript.js"></script>
    <script class="javascript" src="./scripts/shBrushJava.js"></script>
    <script class="javascript" src="./scripts/shBrushPhp.js"></script>
    <script class="javascript" src="./scripts/shBrushPython.js"></script>
    <script class="javascript" src="./scripts/shBrushRuby.js"></script>
    <script class="javascript" src="./scripts/shBrushSql.js"></script>
    <script class="javascript" src="./scripts/shBrushVb.js"></script>
    <script class="javascript" src="./scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="./styles/shCore.css"></LINK>
    <link type="text/css" rel="stylesheet" href="./styles/shThemeDefault.css"></LINK>
    <script class="javascript">
      SyntaxHighlighter.all();
    </script>
  </HEAD>
<BODY Onload="dp.SyntaxHighlighter.HighlightAll('code');">
  <textarea name="code" class="brush:javascript;">
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;

    namespace ConsoleTest
    {
      class Program
      {
        static void Main(string[] args)
        {
          Console.WriteLine("Test 입니다");
        }
      }
    }
  </textarea>
</BODY>
</HTML>

결과 화면입니다.

이번에는 티스토리에 적용하겠습니다.

아까 전에 다운로드 받은 라이브러리를 스킨 항목에 업로드합니다.

그리고 티스토리 스킨 수정 부분으로 들어가서 skin.html 파일의 해더 부분에 스크립트 선언부를 입력해서 넣겠습니다.

그리고 포스팅 글을 작성할 시에 적용하는 방법입니다. 포스팅 글을 쓸 때는 HTML 로 전환을 하셔서 코드를 입력하면 되겠습니다.

프로그램 개발에 관계된 블로그를 운영하시는 분들께는 아주 유용하게 사용될 듯 싶습니다.

PS. 끝으로 이미지의 내용은 버전 1.5때의 적용사항의 이미지 입니다. 최신 모드로 수정해서 재 업로드를 하겠습니다.

'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글

[Jquery] ajax를 이용해 파일 업로드하는 방법  (2) 2019.06.16
[Jquery] Jquery 초기 구조 설정하기  (0) 2019.05.18
[Javascript] JSON.parse 함수  (0) 2015.04.20
[Javascript] JSON.stringify 함수  (0) 2015.04.19
[Jquery] 스크롤링 효과 예제  (0) 2012.10.06
[Jquery] 롤링 라이브러리 - jcarousellite  (0) 2012.09.24
[Jquery] Html에서 나타내는 Treeview  (0) 2012.09.22
[Jquery] 슬라이드 메뉴  (8) 2012.09.19