Rev. 2.73

Dan Webb에서 만든 자바스크립트 코드 하이라이터입니다. 아래에 보시는 것처럼 멋드러지게 드로잉합니다. HTML, 자바스크립트, 스타일시트 그리고 루비의 코드를 기본으로 지원하며, 확장 가능한 형태로 구축되어 있고, 썩 쓸만한 성능을 보여주고 있습니다. 이제 코드 색상입히기 노가다는 끝이군요. (이상하게도 IE의 주석처리에 문제가 있습니다.) 코드(code)태그에는 br태가그 필요치 않군요. IE는 br태그가 입력되면 더이상 진행되지 않습니다.

자바스크립트 예제

/*
This script detects external links in a page
and attaches a behaviour to them so they open
in a external window.
*/

function initialiseLinks() {
    if (document.getElementsByTagName) {
        var links = document.getElementsByTagName("A");
        for (var i = 0; i < links.length; i++) {
            if (links[i].href.indexOf("http:")==0) {
                // if the links URL starts with http: then we assume it's an external link
                links[i].onclick = function() {
                    window.open(this.href);
                    return false; // stop normal link behaviour
                }
            }
        }
    }
}

window.onload = initialiseLinks();

스타일시트 예제

.javascript  .comment {
	color : green; /* ffbgffg */
}
.javascript  .string {
	color : maroon;
}
.javascript  .keywords {
	font-weight : bold;
}
.javascript  .global {
	color : blue;
	font-weight: bolder;
}
.javascript  .brackets {
	color : Gray;
}
.javascript  .thing {
	font-size : 10px;
	background : url(ghgfhfg gh f.rtjhf);
}

HTML 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CodeHighlighter example</title>
		<!-- This is all you need to do to get CodeHighlighter working -->
		<script type="text/javascript" src="CodeHighlighter.js"> </script>
		<script type="text/javascript" src="html.js"> </script>
	</head>
	<body>
		<p>Put your pre tags here!</p>
	</body>
</html>

Comments

URL에 모드-리라이트(mod_rewrite) 를 적용했습니다. 이 것은 URL에 재작성 규칙을 설정하여 보다 직관적이고 접근성이 좋은 모양으로 변형하여 라우팅합니다. 예를들어 "firejune.com/index.php?pl=1053" 과같은 지저분한 URL을 "firejune.com/1053"과 같이 쓸수 있게 해 줍니다. 자세한 사용법은 apache.org의 doc을 참조하시기 바랍니다.

이제 태터툴즈 클래식에서도 멋진 URL을 사용할 수 있게 되었습니다. 주요 URL만 적용했으며, 조금 더 복잡하고 조잡한 페이징이나 카테고리 등은 집어 치웠습니다. 대부분 정규식과 비슷한 문법으로 처리되기 때문에 꽤나 긴 삽질이 필요하더군요. 이곳에 적용한 .htaccess 파일의 일부분을 공개합니다.(이상한 곳이 있으면 지적해 주세요) 작업시 주의해야 할 점은 mod_rewrite가 모든 서버환경에 기본으로 채택되어 있지 않기 때문에 먼저 가능여부를 알아야 합니다. 둘째로 종전의 URL방식으로 접근 했을때 차단되어서는 안되기 때문에 하위 호환성을 유지해야 한다는 점입니다.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.+[^/])$ $1/ [L]
RewriteRule ^$ index.php [L]
RewriteRule ^index\.html$ / [L]

RewriteRule ^(images|medias)/(.*)$ public/$1/$2 [L]
RewriteRule ^(.*)favicon\.ico$ public/favicon.ico [L]
RewriteRule ^(.*)index\.gif$ public/index.gif [L]
RewriteRule ^(.*)sound-config\.xml$ public/sound-config\.xml [L]

RewriteRule ^(([0-9]+)|([0-9]+)&(.*))$ index.php?pl=$1 [L]
RewriteRule ^tag/(.*)$ index.php?stag=$1 [L]
RewriteRule ^page/(.+)$ index.php?page=$1 [L]
RewriteRule ^search/(.*)$ index.php?stext=$1 [L]
RewriteRule ^trackback/(.+)$ rserver.php?mode=tb&sl=$1 [L]
RewriteRule ^archive/(([0-9]+)|([0-9]+)&(.+))$ index.php?setdate=$1&$2 [L]
RewriteRule ^entries/(.+)$ index.php?ct1=$1 [L]
RewriteRule ^guestbook/(.+)$ index.php?md=guest&$1 [L]
RewriteRule ^tags/([0-9]+)$ index.php?md=tag&sort=$1 [L]

RewriteRule ^rss index.xml [L]
RewriteRule ^entries index.php?page=1&ct1=-1 [L]
RewriteRule ^projects index.php?stag=프로젝트 [L]
RewriteRule ^photos index.php?md=photo [L]
RewriteRule ^tags index.php?md=tag [L]
RewriteRule ^guestbook index.php?md=guest [L]
RewriteRule ^profile index.php?pl=777 [L]

Comments

Control.Tabs은 Ryan Johnson씨가 Prototype.js를 사용해서 만든 매우 겸손한(?) 자바스크립트 탭이다. 표준에 맞게 탭을 생성하기 때문에 넌-자바스크립트 브라우저에서도 완벽하게 접근할 수 있으며, 수정/추가/삭제가 매우 쉽다.

Example

I am tab one. I belong to group one.

I am tab two. I belong to group one.

I am tab three. I belong to group two.

I am tab four. I belong to group two.

커스토마이징 : 약간 아쉬운점이 있어서 소스를 건드렸다. W3C표준에는 div에 'name'애트리뷰트를 사용하지 않기 때문에 이것을 'title'로 변경하였다. 그리고 URL에 해시가 있을 때(http://firejune.com/#1 와 같은) 발생하는 오류를 잡았다. 이유는 해시값을 가지는 window.location.href를 또다시 해시에 대입하려는 시도가 있기 때문이다. 수정된 소스파일을 첨부한다.

control.tabs.js control.tabs.js (2.8 KB)

Comments