들어가며

프로그래밍에서 소스코드를 표시할 때 구분 하이라이팅(Syntax Highlighting) 기술이라는 것은 소스코드 에디터등에서 예약어나 수식기호들을 각기 다른 색으로 구분하여 표현하는 것을 말합니다. 소스코드 하이라이팅의 목적은 소스코드의 가독성을 좋게 하기 위한 것 입니다. 이 곳 RealGrid블로그와 같은 프로그래밍 기술 블로그에서는 포스트에 소스코드를 표현해야 할 일이 많이 있는데, 이 때 코드가 하이라이팅된 경우와 그렇지 않은 경우는 글을 읽는 사람에게 분명 큰 차이로 다가오겠지요?

비교

아래 두 경우를 비교해 보겠습니다.

하이라이팅 안된 경우 ▼

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

하이라이팅 된 경우 ▼

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

두 덩이의 코드블럭을 비교해 보면 하이라이팅된 코드블럭이 확실히 읽기 편한것을 느낄 수 있습니다. 물론 약간의 개인적인 차이가 있을 수는 있지만 대부분의 경우 그럴것이라 생각됩니다.

티스토리에서 코드블럭의 하이라이팅을 구현하기 위해 검색해 보니 대부분의 경우 SyntaxHighlighter라는 라이브러리를 사용해서 구현하고 있습니다. 하지만, 이 블로그에서는 Google code prettify라는 라이브러리를 사용해서 구현해 보았습니다. 아래에서 그 구현 방법과 사용법을 간단히 정리해 보겠습니다.

Google Code Prettify로 코드 하이라이팅 구현하는 방법

  1. Google code prettify사이트 에서 소스 코드를 다운로드 받습니다.
  2. 티스토리의 스킨파일 업로드 영역에서 해당 파일을 모두 업로드 합니다. 핵심파일은 prettify.js와 prettify.css 입니다.
  3. 티스토리 skin.html파일의 header영역에 아래 코드를 추가 합니다.
<link href="./images/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="./images/prettify.js"></script>

티스토리의 스킨 파일을 수정하거나 업로드 하는 방법은 스킨가이드를 참조하세요.

티스토리 블로그에서 코드 하이라이팅 작성 방법

  1. 글쓰기에서 HTML보기를 체크하여 HTML코드 편집창을 실행 합니다.

  2. 코드는 PRE 태그를 이용합니다. 코드를 넣을 부분에 아래와 같이 코딩 합니다.

     <pre class="prettyprint"> 
   //여기에 코드를 입력합니다.
     function object CSharpFunction(string v)
     {
         return null;
     }
 </pre>

  3. 저장 후 블로그에서 보면 아래와 같이 보입니다.

         //여기에 코드를 입력합니다.
     function object CSharpFunction(string v)
     {
         //MARK 태그를 사용해서 노란색 형광 마킹도 할 수 있습니다.
         return null;
     }

하이라이팅 스타일(테마)

개인적으로 하이라이팅의 스타일은 너무 과하지 않게 하는것이 좋다고 생각합니다. 과하다, 과하지 않다는 정도의 차이는 물론 개인적인 취향이겠지만 구문에 따라 너무 알록달록 색깔을 다르게 하거나 배경색을 컬러풀 하게 하는 것은 하이라이팅의 원래 목적을 저해하는 요인이 될 수도 있습니다. 나중에 기회가 되면 여러가지 하이라이팅 스타일에 대해서도 포스팅해 보겠습니다.

참조