블로그/웹에서 소스코드 하이라이트/구문강조 사용하기

구글 블로거(Blogger), 티스토리(Tistory)등 여러 블로그나 웹 페이지에서 소스 코드를 공유하시려는 분들에게 code prettify를 소개합니다.
라이선스는 아파치 라이선스2.0 입니다.

소스 코드의 가독성 향상을 위해 소스 코드 하이라이트를 적용했는데, 여러가지 자바스크립트 라이브러리 중 "code prettify"가 심플해보여서 선택했습니다.
블로그나 웹 사이트에 코드를 공유하실 예정이고 심플한걸 원하시는 분들에게 추천합니다.

설정

아래 스크립트 태그를 삽입해주세요.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

사용하기

pre, code, xmp 의 class 요소에 prettyprint 를 넣어주면됩니다.

<pre class="prettyprint">
class Voila {
    public:
        // Voila
        static const string VOILA = "Voila";

        // will not interfere with embedded <a href="#voila2">tags</a>.
}
</pre>

기본 지원 언어

위 예제로 지원 가능한 언어는 아래와 같습니다.
C, C++, C#, PHP, Ruby, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Rust

확장 지원 언어 그리고 옵션

처음에 추가한 자바스크릅트에 옵션을 추가하면 더 많은 언어를 지원하며 테마도 변경 가능합니다.

• 확장 지원 언어

  Apollo, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, Llvm, Lua, Matlab, MLs: F#, Ocaml,SML, Mumps, Nemerle, Pascal, Protocol buffers, R, S, RD, Scala, SQL, TCL, Latek, Visual Basic, CHDL, Wiki, XQ, YAML
  

• 테마

  테마는 5가지만 지원합니다. 디자인을 보시려면 "Gallery of themes for code prettify"에서 확인 가능합니다.
  5가지 테마 명: Default, Desert, Sunburst, Sons-Of-Obsidian, Doxy
  

• 확장 지원 언어와 테마 적용 방법

  스크립트를 아래와 같이 추가하고 싶은 언어 만큼 lang 옵션으로 넣어주고, skin으로 테마 지정이 가능합니다.
  더 자세한 옵션 정보는 "Auto-Loader" 페이지에서 확인 가능합니다.
  

  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&lang=sql&skin=desert"></script>

  확장 언어에 대해서는 class 요소에 언어를 표시해줄 요소가 추가해줘야 합니다.
  

  <pre class="prettyprint lang-sql">SELECT * FROM table_name LIMIT 10;</pre>

• 라인 번호 지정

  class 요소에 linenums를 넣어주면 1부터 시작하며, linenums:숫자를 입력하면 지정한 숫자부터 번호가 시작됩니다.
  

  <pre class="prettyprint linenums">
  Many
  lines
  of
  code
  </pre>

마무리하며

더 이쁜 테마를 원하신다면 Paraiso-Google-Code-Prettify 사이트를 방문하시면 원하시는 테마를 찾을 수 있을게요.
공식적으로 5개 지원이지만 개발자들의 참여로 많은 테마가 있습니다.

그리고 스크립트 주소의 CDN 도메인은 "GitHub 저장소의 자바스크립트 파일을 외부에서 사용하기"로 포스팅한 적이 있는데 알아두시면 Github에서 관리되고 있는 여러 소스를 별도의 서버 없이 사용하실 수 있습니다.

함께보기

• code-prettify
• Paraiso-Google-Code-Prettify

출처: http://blog.gaerae.com/2015/09/google-code-prettify.html