Google-Code-Prettify라는 프로젝트인데요. JavaScript를 이용해서 브라우져단에서 C 스타일의 코드를 예쁘게 출력해주는(Syntax highlighting) 프로젝트입니다.
프로젝트 명: Google-Code-Prettify
라이센스 : APL(Apache Project License) 2.0입니다.
지원하는 언어 : C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles
사용하는 방법:
- 먼저, 프로젝트 페이지에서 prettify.js와 prettify.css 소스 파일을 다운로드 받습니다.
- 다운로드받은 소스를 사용할 페이지에 선언해주구요.
- 출력할 코드를 code, pre, xmp 태그안에 넣습니다.
- 1에서 선언한 태그의 class를 prettyprint로 설정합니다. 예를 들자면 <pre class="prettyprint"></pre>와 같은 형태로요.
- onload 이벤트에 prettyPrint()를 호출해주면 하이라이팅된 소스를 보실 수가 있습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Page</title>
<script type="text/javascript"src="prettify.js"></script>
<link type="text/css" rel="stylesheet" href="prettify.css" media="screen"></link>
</head>
<body onload="prettyPrint();">
<xmp class="prettyprint">
<html>
<head></head>
<body>
<div id="sample"></div>
</body>
</html>
</xmp>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Page</title>
<script type="text/javascript"src="prettify.js"></script>
<link type="text/css" rel="stylesheet" href="prettify.css" media="screen"></link>
</head>
<body onload="prettyPrint();">
<xmp class="prettyprint">
<html>
<head></head>
<body>
<div id="sample"></div>
</body>
</html>
</xmp>
</body>
</html>
그리고, 다음은 해당코드를 prettify.js를 사용해서 출력해본 화면입니다.
장점 : 다양한 언어를 지원하는 오픈소스 프로젝트입니다. 클라이언트에서 Syntax highlighting을 처리할 수 있기 때문에 서버단의 변경없이 쉽게 추가가 가능합니다.
단점 : 클라이언트 단에서 char단위의 파싱이 발생하기 때문에 많은 양의 소스를 파싱할 수 없으며, (소스 내부에서 250ms 단위로 체크해서 반응이 없을경우 종료시킵니다.) 비용이 많이든다는 문제점이 있습니다.
출처:
prettify.js
댓글 없음:
댓글 쓰기