codeHighlighter 소개

codeHighlighter는 pre 요소의 내용을 분석해서 HTML, JavaScript, CSS 문법에 해당하는 부분을 강조하는 자바스크립트 프로그램입니다. 화면에는 대략 이렇게 보입니다.

<!DOCTYPE html>
<html>
<head>
  <title>예제 페이지</title>
  <link REL="stylesheet" HREF='codeHighlighter.css' rel=stylesheet />
  <style>
    pre.cH_kip {font-family:consolas;}
  </style>
</head>
<body>
  <h1>예제 페이지</h1>
  <canvas> </canvas>
  <p>이것은 <a href="demo.html">단순한 예제</a> 페이지입니다.</p>
  <p>속성은
    <a HREF="demo.html"
       title="title 속성은 a 요소의 중요한 속성은 아닙니다">일부분만</a>
    강조합니다.
  </p>
  <!-- 주석입니다 -->
  <script src="codeHighlighter-1.1.min.js"> <!-- test var --> </script>
</body>
</html>

사용법

...
<head>
  ...
  <link rel="stylesheet" href="codeHighlighter.css" />
  ...
</head>

<body>
  ...
  ..
  ....
  <script src="codeHighlighter-1.1.min.js">
    //반드시 HTML 파일 마지막, </body> 바로 앞에 있어야 합니다.
  </script>
</body>
</html>

pre 요소에 "html", "css", "js", "pass" 클래스 중 하나를 선택해 쓰면 됩니다.

"html"

pre 요소에 들어있는 내용을 HTML 마크업으로 간주해서 강조합니다. script, style 요소에 들어있는 내용은 각각 자바스크립트 코드, CSS 스타일시트로 간주합니다. 맨 위의 예제입니다.

"css"

pre 요소에 들어있는 내용을 CSS 스타일시트로 간주해서 강조합니다. HTML 마크업, 자바스크립트 코드는 강조하지 않습니다.

<pre class="css">
body {max-width:900px;}                  /* CSS는 강조하지만 */
<html><head></head><body></body></html>  /* 마크업은 강조하지 않습니다 */
<pre>

"js"

pre 요소에 들어있는 내용을 자바스크립트 코드로 간주해서 강조합니다. HTML 마크업, CSS 스타일시트는 강조하지 않습니다.

"pass"

이 프로그램에 버그가 있거나 작성하신 마크업과 충돌해서 내용이 제대로 표현되지 않을 때를 대비한 폴백입니다. 대개는 pre 요소 내부에 마크업을 사용했거나, 아래 예제의 mathML처럼 HTML과 다른 문법일 경우 충돌할 가능성이 있습니다. "pass" 클래스를 쓰면 줄 번호와 홀수/짝수행만 표시하고 구문 분석은 하지 않습니다.

<pre class="pass">
<!DOCTYPE html>
...
   <math>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
     <mrow>
      ...
     </mrow>
     <mrow>
      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
     </mrow>
    </mfrac>
   </math>
  ...
</html>
<pre>

내려받을 파일 :

주요 특징

HTML 요소를 범주에 따라 구분합니다

HTML 5 명세는 요소를 몇 가지 범주로 구분했습니다. 이를 존중하여 범주별로 색깔을 구분했습니다.

속성을 선택적으로 강조합니다.

"강조"라는 단어를 쓰려면 주위 텍스트와 구분되어야 합니다. 기존에 널리 쓰이던 문법 강조 프로그램들은 속성에 일괄적으로 색을 입혔기 때문에 무엇이 중요한 속성인지 한 눈에 알기 어렵다는 문제가 있습니다. 이 프로그램은 각 요소에 필수적인 속성이나 매우 중요한 속성만을 선택해서 강조합니다. 예를 들어 다음과 같이 합니다.

<a href="demo.html" title="title 속성은 a 요소의 중요한 속성은 아닙니다">
<script src="codeHighlighter.js" type="text/javascript">
    // script 요소의 type 속성은 중요하긴 하지만 거의 모든 페이지에서
    // 자바스크립트만 쓰므로 이를 강조할 필요는 없습니다.
</script>

이 프로그램에서는 다음 속성을 중요한 속성으로 간주합니다.

명세로 링크

HTML 5 명세에 등록된 요소들은 명세의 해당 부분으로 링크합니다. 차후 속성들도 링크하겠으나 작업량이 많아서 시일이 필요합니다.

파악된 문제점

변경요약

1.1.3
script 블럭을 닫을 때 마지막 문장에 한 줄 주석이 있으면 </script>까지 주석으로 인식하던 버그 수정
자바스크립트 블럭에서 빈 문자열 ("")을 정확하게 인식하지 못하던 버그 수정
자바스크립트 블럭에서 <!-- --> 내부를 모두 주석으로 인식하던 버그 수정
1.1.2
다른 스크립트에서 highlight() 함수만 호출하면 모든 기능이 동작하도록 변경
(매개변수로 pre 블럭 넘김)
1.1.1
CSS 블럭에서 첫 주석만 바뀌고 이후는 바뀌지 않던 버그 해결
문자열 처리 개선으로 파일 크기 줄임
1.1
명세 및 레퍼런스로 연결 추가
1.0
첫 버전

댓글 (24629)