reznoa의 동굴폐인 놀이터

이전에 Syntax Highlighter 1.3 - Google Code Prettify를 Markdown에 맞게 고치기라는 글을 통해 별도의 구문을 쓰지 않고 코드 하이라이팅을 처리하도록 하는 방법에 대해서 얘기했었다.

그러면서  를 제대로 출력하지 못하는 문제에 대해, 처음엔 "Markdown에서 코드 블럭을 처리하는데 버그가 있는것 같다."고 했다가, 그 다음엔 "Google Code Prettify와의 연동 문제인것 같다."고 고쳤었는데.. "내가 한번 고쳐보지!"라는 마음에 코드를 봤다가, Google Code Prettify의 버그란 것을 알게됬다.

구글이 만들었다길래 좀 믿고(?) 있었는데.. 뒤통수 맞은 느낌이다.

문제의 코드는 다음과 같다. ^주1

// ...

(function () {
  // ...

  var pr_ltEnt = /</g;
  var pr_gtEnt = />/g;
  var pr_aposEnt = /'/g;
  var pr_quotEnt = /"/g;
  var pr_ampEnt = /&/g;
  var pr_nbspEnt = / /g;
  /** unescapes html to plain text. */
  function htmlToText(html) {
    // ...

    return html.replace(pr_ltEnt, '<')
        .replace(pr_gtEnt, '>')
        .replace(pr_aposEnt, "'")
        .replace(pr_quotEnt, '"')
        .replace(pr_ampEnt, '&')
        .replace(pr_nbspEnt, ' ');
  }

  // ...
})();

눈치가 빠른 사람은 이 코드가 나오자마자 '딱!'하고 눈치를 챘을거다.

htmlToText() 끝부분을 보면 문자열을 바꿔치는 코드를 볼 수 있다. 이 코드는, html에서 특별한 문자를 표현하기 위해 사용하는, character entity를 원래 표현하려던 문자로 바꿔주는 역할을 한다.

문제는 바꿔치기하는 순서다. &가 맨 마지막에 있어야 하는데,   앞에 있는 바람에  가 띄어쓰기로 변환되 버리는거다. ^주2

문제를 해결하려면, &를 맨 마지막에 바꾸도록 다음처럼 바꾼다.

        // ...
        .replace(pr_quotEnt, '"')
        .replace(pr_nbspEnt, ' ')
        .replace(pr_ampEnt, '&');
  }
  // ...

이제 Google Code Prettify가 적용된 코드에서도  가 잘 표시되는걸 확인할 수 있다.

 

어때?

1. 이 코드는 prettify-21-May-2009.zip 기준이다.
2. 변환 과정은 이렇다: ' ' ==> ' ' ==> ' '

(0) (0)